Stencil
ELI5 — The Vibe Check
Stencil is a compiler that generates standard Web Components using a React-like developer experience — JSX, decorators, reactive data. It was created by the Ionic team so they could build framework-agnostic components. Think of it as a translation layer: you write React-style code, it outputs Web Components.
Real Talk
Stencil is a toolchain for building reusable, scalable design systems using Web Components. It compiles TypeScript and JSX into standards-compliant Custom Elements with lazy-loading, virtual DOM rendering, and reactive data binding. Output components work in any framework or no framework at all.
When You'll Hear This
"Stencil lets us write Web Components with JSX instead of vanilla JS" / "Ionic's entire component library is built with Stencil"
Related Terms
Custom Elements
Custom Elements let you define your own HTML tags that the browser recognizes as first-class citizens. Want a <fancy-tooltip> tag?
Lit
Lit is Google's way of saying 'Web Components don't have to be painful.
Shadow DOM
Shadow DOM is like a force field around your component's internals.
Web Components
Web Components are the browser's native component system. Custom elements, shadow DOM, templates - no framework needed.