Stencil

Stencil is a compiler and toolchain, built by the Ionic team, for generating standards-based Web Components using TypeScript and JSX. Components authored once in Stencil can be distributed natively to React, Angular, Vue, and traditional web applications from a single, framework-agnostic codebase.

Stencil combines familiar concepts from popular frontend frameworks - a virtual DOM, async rendering, reactive data binding, and JSX - and compiles them down to small, dependency-free custom elements that run anywhere. It also ships build-time features like lazy loading, prerendering/SSR, and a dev server, making it a full authoring environment for scalable design systems.

What You Get

• A compiler that transforms decorator-based TypeScript/JSX components into optimized custom elements
• Framework output targets that generate native React, Angular, and Vue wrapper components
• Build-time features including lazy loading, tree-shaking, and pre-rendering / server-side rendering
• A CLI with project scaffolding, a dev server with hot module reloading, and a testing harness
• A reactive component model with @Component, @Prop, @State, and lifecycle hooks

Common Use Cases

• Building a design system or component library shared across multiple frameworks
• Shipping reusable UI widgets that embed in React, Angular, Vue, or plain HTML pages
• Creating framework-agnostic custom elements for micro-frontends
• Prerendering or server-side rendering component-driven sites and PWAs

Under The Hood

Architecture - The codebase under src/ is split into clear subsystems: compiler/ performs the AST transforms and bundling, runtime/client/ provide the tiny virtual-DOM runtime shipped with components, cli/ drives scaffolding and builds, dev-server/ powers HMR, and hydrate/ handles SSR/prerendering. declarations/ holds the public TypeScript contracts. Components authored with decorators are compiled into lazy-loadable custom-element bundles, and separate output targets generate framework wrappers.

Tech Stack - Written in TypeScript, compiling authored TypeScript + JSX. It leverages Rollup for bundling internally, TypeScript’s compiler API for transforms, and produces standards-based Custom Elements. The monorepo is large (8000+ commits, 100+ releases) and maintained by the Ionic team.

Code Quality - Stencil is a mature, heavily maintained project with extensive test coverage, a dedicated testing package, and active release cadence. The clear module boundaries (compiler vs runtime vs cli vs dev-server) reflect a well-factored architecture built for long-term maintenance.

API Design - The authoring API is deliberately familiar: decorators like @Component, @Prop, and @State plus JSX mirror React/Angular idioms, flattening the learning curve. The CLI scaffolds projects and the multiple output targets let one component source ship to many frameworks with minimal configuration, giving excellent developer experience for cross-framework work.