Sourcemaps
Generate maps from your TypeScript to the generated JavaScript for easy debugging.
Stencil is a library for building reusable, scalable component libraries. Generate small, blazing fast Web Components that run everywhere.
With intentionally small tooling, a tiny API, and out-of-the-box configuration, Stencil gets out of the way and lets you focus.
A tiny runtime and the raw power of native Web Components make Stencil one of the fastest compilers around.
Build cross-framework component libraries on open web standards, and break free of Framework Churn.
Stencil components are just Web Components, so they will work with any major framework—or no framework at all.
Powering cross-functional components at some of the world’s best companies. See how →
Build modern, standards-compliant web components that work in any browser with slots, shadow DOM, and more.
With flexible models for how you want to use your components, Stencil can optimize for treeshaking, loading, and more.
Stencil uses TypeScript, providing your components with type safety as your system scales.
Ensure your components render smoothly with Stencil’s built-in asynchronous rendering pipeline.
Generate automatically-updated documentation from JSDoc comments that live close to the code
Stencil comes with all the dependencies and preset scripts you need to start building.
Describe your components using a well known templating syntax, with all the features of JavaScript available to you.
With a fully-typed API, built-in hot reloading dev-server, and custom utils, Stencil offers an intuitive DX.
Build and publish interactive components and features that run on any site, built on any stack.
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> ); }}
Stencil components are built to work with any major framework or no framework at all.
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> ) }}
Generate maps from your TypeScript to the generated JavaScript for easy debugging.
Stencil comes with a great out of the box default configuration, while allowing you to change it.
Unit testing is built in to Stencil, including custom test matchers and configuration.
Generate the code for a new component, styles, and tests with a single command.
Generate documentation directly from code comments, ensuring your docs are always up to date.
Stencil uses TypeScript, providing type safety and syntax highlighting in your favorite code editor.
Move faster with a local dev-server with hot module reloading. Make a change, see it instantly.
Comprehensive documentation written by the Stencil team and the open source community.
Stencil is an open source project by Ionic. Join our growing community—everyone is welcome.