See how Stencil fits into the entire Ionic Ecosystem ->
Stencil is part of the Ionic Ecosystem ->
Register now • Stencil Enterprise Webinar: Design Systems at ScaleArrow Forward

Build. Customize. Distribute. Adopt.

Stencil is a toolchain for building reusable, scalable Design Systems. Generate small, blazing fast, and 100% standards based Web Components that run in every browser.

Get startedWhy Stencil?

Powering design systems and cross-framework components at

  • Apple logo
  • Amazon logo
  • Porsche logo
  • Arm logo
  • Panera logo
  • Microsoft logo

The magical, reusable web component compiler. Start building in seconds.

  • Web Component-based
  • Asynchronous rendering pipeline
  • TypeScript support
  • One-way Data Binding
  • Component prerendering
  • Simple component lazy-loading
  • JSX support
  • Dependency-free components

Getting started is simple:

$ npm init stencilRequires NPM v6

Dive deeper with our Getting Started guide

Stencil doesn’t fight the web platform. It embraces it.

  • Simple

    With intentionally small tooling, a tiny API, and zero configuration, Stencil gets out of the way and lets you focus on your work.

  • Lightweight

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

  • Future proof

    Build cross-framework components and design systems on open web standards, and 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?

Show me more

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 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.

The Stencil Newsletter

Keep up to date with all the latest Stencil news and updates.