
Stencil Has a Free Web Components Compiler — Build Once, Run Everywhere
What if you could write a component once and use it in React, Vue, Angular, and vanilla JS — without wrappers or adapters? That's Stencil. Built by the Ionic team, used by Apple, Amazon, and Microsoft. What is Stencil? Stencil is a compiler that generates standard Web Components. You write components using TypeScript and JSX (familiar syntax), and Stencil compiles them into native custom elements that work in any framework or no framework at all. Why Stencil Wins 1. Framework-Agnostic Output import { Component , Prop , h } from ' @stencil/core ' ; @ Component ({ tag : ' my-button ' , styleUrl : ' my-button.css ' , shadow : true , }) export class MyButton { @ Prop () variant : ' primary ' | ' secondary ' = ' primary ' ; @ Prop () disabled : boolean = false ; render () { return ( < button class = { this . variant } disabled = { this . disabled } > < slot ></ slot > </ button > ); } } Use it anywhere: <!-- Vanilla HTML --> <my-button variant= "primary" > Click me </my-button> <!-- React -
Continue reading on Dev.to JavaScript
Opens in a new tab



