Stencil.js

Definition

Stencil is a compiler, built by the Ionic team, that takes components written in a TypeScript and JSX-based syntax and compiles them into standards-compliant Web Components, rather than shipping a client-side runtime framework.

Overview

Stencil occupies an unusual position: it looks like a component framework to the developer writing code, with JSX templates, decorators for props and state, and a familiar component lifecycle, but what it actually produces is plain Web Components with a small, optional runtime — closer in spirit to a compiler like Svelte than a runtime framework like React. Developers write components using `@Component`, `@Prop`, `@State`, and `@Event` decorators in TypeScript files, and Stencil's build step compiles these into Custom Elements that register themselves with the browser and can be used with plain HTML tags, with no Stencil-specific runtime library required by the consuming application. This compile-to-standards approach is what makes Stencil popular for design systems and component libraries meant to be consumed across many different frontend stacks: a component compiled by Stencil works the same in a React app, an Angular app, a Vue app, or a page with no framework at all, because the browser interprets it as a native custom element rather than requiring the host application to also run Stencil or React. Ionic Framework itself, the popular cross-platform mobile UI toolkit, is built with Stencil, and Stencil is also used by companies including Amazon, Microsoft (Fluent UI Web Components in part), and Apple's own internal tooling for exactly this cross-framework portability. Stencil adds several capabilities on top of raw Web Components that are otherwise painful to hand-roll: automatic code splitting and lazy-loading so only the components actually used on a page are downloaded, server-side rendering and pre-rendering support for better initial load performance and SEO, and TypeScript type definitions generated automatically for consumers. Because Stencil-compiled output is close to the metal — real Custom Elements rather than a framework's virtual representation — its runtime overhead is small, and components integrate cleanly wherever the browser's native component model is supported, which today is effectively every modern browser.

Key Features

• Compiles JSX/TypeScript component syntax to standards-based Web Components
• No required runtime framework for consuming applications
• Automatic code splitting and lazy-loading of components
• Server-side rendering and pre-rendering support for SEO and load performance
• Decorator-based API (@Component, @Prop, @State, @Event) familiar to React/Angular developers
• Auto-generated TypeScript type definitions for component consumers
• Framework-agnostic output usable in React, Angular, Vue, or plain HTML
• Powers the Ionic Framework's cross-platform UI component library

Use Cases

Alternatives

History

Stencil is a build-time compiler that generates standards-based Web Components (custom elements) rather than a runtime framework. It was created by the Ionic Framework team and announced in August 2017 at the Polymer Summit. Ionic built Stencil because the performance and bundle-size demands of Progressive Web Apps were hard to meet with traditional framework tooling; Stencil combines familiar ideas — a virtual DOM, JSX, TypeScript, and reactive data — into a compiler that outputs small, fast, framework-agnostic components. Because the output is native custom elements, Stencil components can be used in React, Angular, Vue, or plain HTML from a single codebase, which made it popular for building cross-framework design systems.

Frequently Asked Questions

Related in Web