The magical, reusable web component compiler

Stencil combines the best concepts of the most popular frontend frameworks and generates 100% standards-based Web Components that run in any modern browser. Built by the Ionic Framework team.

  • TypeScript support
  • Asynchronous rendering pipeline
  • A tiny virtual DOM layer
  • One-way data binding
  • JSX support
  • Simple component lazy-loading

Start coding with Stencil in seconds

npm init stencil Requires NPM v6

Dive deeper with our Getting Started guide

  • Simple

    With intentionally small tooling, a tiny API, zero configuration, you're set.

  • Performant

    6kb min+gzip runtime, pre-rendering, and the raw power of native Web Components.

  • Future proof

    Build versatile apps and components based 100% on web standards. Break free of Framework Churn.

The perfect tool for building a design system

  • Ensure consistent UX and brand experiences, at scale
  • Web components run on any platform or device
  • Build a custom UI library that works across teams and projects

Interested in learning more about building design systems with Stencil?

Get in touch

Awesome developer experience out of the box

  • Built-in dev-server for hot module reloading
  • Screenshot visual UI diffs
  • Auto-generate component documentation
    (including css variables)

Build one component library for all of your apps

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

Learn how Stencil seamlessly integrates with:

The ecosystem you need to build apps that scale

We’re creating libraries to help you tackle the challenges of building large production applications with Web Components.

The Stencil story

Stencil was created to power the components for Ionic Framework - a cross-platform mobile development technology stack used by more than 5M developers worldwide.

Icon for VideoWatch launch video