An OutSystems Company →

Stencil 4 is here! Read all about what’s new in latest major release Read the Blog →

Build. Customize. Distribute. Adopt.

Stencil is a library for building reusable, scalable component libraries. Generate small, blazing fast Web Components that run everywhere.

Get started →
  • circle icon

    Simple

    With intentionally small tooling, a tiny API, and out-of-the-box configuration, Stencil gets out of the way and lets you focus.

  • circle icon

    Performant

    A tiny runtime and the raw power of native Web Components make Stencil one of the fastest compilers around.

  • circle icon

    Future proof

    Build cross-framework component libraries on open web standards, and break free of Framework Churn.

  • circle icon

    Framework-agnostic

    Stencil components are just Web Components, so they will work with any major framework—or no framework at all.

apple logoamazon logomastercard logovoltswagon logopanera logovisa logosquare logo

Powering cross-functional components at some of the world’s best companies. See how →

Features

The magical, reusable web component compiler.

  • box icon

    Web components

    Build modern, standards-compliant web components that work in any browser with slots, shadow DOM, and more.

  • shining icon

    Flexible output

    With flexible models for how you want to use your components, Stencil can optimize for treeshaking, loading, and more.

  • typescript logo

    TypeScript support

    Stencil uses TypeScript, providing your components with type safety as your system scales.

  • star icon

    Asynchronous rendering pipeline

    Ensure your components render smoothly with Stencil’s built-in asynchronous rendering pipeline.

  • stack icon

    Documentation generation

    Generate automatically-updated documentation from JSDoc comments that live close to the code

  • triangle icon

    Dependency-free

    Stencil comes with all the dependencies and preset scripts you need to start building.

  • react icon

    JSX support

    Describe your components using a well known templating syntax, with all the features of JavaScript available to you.

  • box icon

    Intuitive developer experience

    With a fully-typed API, built-in hot reloading dev-server, and custom utils, Stencil offers an intuitive DX.

  • box icon

    Component Libraries

    Build and publish interactive components and features that run on any site, built on any stack.

Component Libraries

The perfect tool for component libraries.

Ensure consistent UX and brand experiences at scale with components that run on any platform or device. Build custom UIs that work seamlessly across teams and projects.

Documentation →
@Component({
  tag: 'ds-text',
  styleUrl: 'ds-text.css',
  shadow: true,
})
export class Text {
  render() {
    return (
      <slot name='ds-corp-text'>
        Your Text Rendered Here
      </slot>
    );
  }
}

Framework Integrations

A single component library for all of your apps.

Stencil components are built to work with any major framework or no framework at all.

Explore Integrations →

Web Components

It’s just Web Components.

Develop Web Components using established standard technologies and APIs, including Shadow DOM, custom elements, and slots.

Documentation →
import { Component, Listen, h } from '@stencil/core';


@Component({
  tag: 'huge-text-button',
  styleUrl: 'huge-text-button.css',
  shadow: true,
})
export class HugeTextButton {
  @Listen('click', { capture: true })
  handleClick(ev) {
    ev.preventDefault();
    console.log("I've been clicked!");
  }


  render() {
    return (
      <button>
        <huge-text>
          <slot name='huge-button-text'>Click Me</slot>
        </huge-text>
      </button>
    )
  }
}

Developer Experience

A great developer experience out of the box.

Project goals →
  • checkmark

    Sourcemaps

    Generate maps from your TypeScript to the generated JavaScript for easy debugging.

  • checkmark

    Zero-config

    Stencil comes with a great out of the box default configuration, while allowing you to change it.

  • checkmark

    Unit Testing

    Unit testing is built in to Stencil, including custom test matchers and configuration.

  • checkmark

    Code Generation

    Generate the code for a new component, styles, and tests with a single command.

  • checkmark

    Doc Generation

    Generate documentation directly from code comments, ensuring your docs are always up to date.

  • checkmark

    Types

    Stencil uses TypeScript, providing type safety and syntax highlighting in your favorite code editor.

  • checkmark

    Local Dev-Server

    Move faster with a local dev-server with hot module reloading. Make a change, see it instantly.

  • checkmark

    World-Class Docs

    Comprehensive documentation written by the Stencil team and the open source community.

Community

Stencil is an open source project by Ionic. Join our growing community—everyone is welcome.