On the blog: Build your next Design System with Web Components

Stencil

A toolchain for building Design Systems and Progressive Web Apps

Stencil builds reusable, scalable Design Systems by combining the best features from popular frontend frameworks but generating Web Components instead of a third-party component model. Stencil-built Web Components run in all modern browsers and popular frontend frameworks, and are free from framework-churn.

Stencil was built to power the next generation of Ionic Framework , one of the most popular open source Design Systems in the world.

  • Based on Web Components
  • Framework-free
  • TypeScript support
  • Asynchronous rendering pipeline
  • A tiny virtual DOM layer
  • One-way data binding
  • JSX support
  • Simple component lazy-loading
  • Component pre-rendering
  • Routing and state management

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?

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