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 -->
<my-button variant="primary">Click me</my-button>

<!-- Vue -->
<my-button variant="primary">Click me</my-button>

2. Lazy Loading Built In

Stencil automatically code-splits your components. Only the components visible on the page get loaded. A design system with 100 components? Users only download what they use.

3. Reactive Data Binding

@Component({ tag: 'my-counter', shadow: true })
export class MyCounter {
  @State() count: number = 0;

  render() {
    return (
      <div>
        <p>Count: {this.count}</p>
        <button onClick={() => this.count++}>Increment</button>
      </div>
    );
  }
}

4. Auto-Generated Framework Wrappers

# Generate React wrappers
npx stencil generate --react

# Generate Vue wrappers
npx stencil generate --vue

# Generate Angular wrappers
npx stencil generate --angular

First-class integration with all major frameworks.

5. SSR & Hydration

import { renderToString } from '@stencil/core/server';

const { html } = await renderToString(
  '<my-app></my-app>',
  { prettyHtml: true }
);

Server-side render your Web Components. They hydrate on the client.

Who Uses Stencil?

• Ionic Framework — 50K+ GitHub stars, built entirely with Stencil
• Apple — Internal design systems
• Amazon — Component libraries
• Porsche — Design system (porsche-design-system)

Stencil vs Other Web Component Tools

	Stencil	Lit	Vanilla WC
Syntax	TSX	Template literals	Template literals
Lazy loading	Automatic	Manual	Manual
SSR	Built-in	Via SSR package	Manual
Framework wrappers	Auto-generated	Manual	Manual
Testing	Built-in	Via WTR	Manual
Bundle size	Tree-shaken	~5KB	0KB

Getting Started

npm init stencil
# Choose: component (for a component library)
cd my-components
npm start

The Bottom Line

Stencil lets you build a component library once and distribute it to every framework. If your team uses React today but might use Vue tomorrow — Stencil is your insurance policy.

---

Need custom data tools? I build web scraping and data extraction solutions. Check my Apify actors or email [e-mail].