stenciljs/core

★ 13,088TypeScriptAudience · developerComplexity · 3/5LicenseSetup · moderate

Mindmap

mindmap
  root((Stencil))
    What It Does
      Compiles to Web Components
      Framework agnostic output
    Authoring
      TypeScript
      JSX templates
      Decorators for config
    Use Cases
      Design systems
      Shared component libraries
    Targets
      React Angular Vue
      Plain HTML

mindmap root((Stencil)) What It Does Compiles to Web Components Framework agnostic output Authoring TypeScript JSX templates Decorators for config Use Cases Design systems Shared component libraries Targets React Angular Vue Plain HTML

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Build a shared UI component library once and use it across React, Angular, Vue, and plain HTML projects without rewriting.

USE CASE 2

Compile a design system's components into framework-agnostic Web Components and publish to npm.

USE CASE 3

Create a reusable widget that works in any modern browser without requiring a specific front-end framework.

Tech stack

TypeScriptJSX

Getting it running

Difficulty · moderate Time to first run · 30min

Requires npm and familiarity with JSX-like templates and TypeScript decorators.

Use freely for any purpose, including commercial products, as long as you keep the MIT copyright notice.

In plain English

Stencil is a compiler that lets you write reusable UI components once and use them in any web environment. It was built by the team behind the Ionic mobile framework. The core idea is that you write your component using TypeScript and a JSX-like template syntax (the same approach React uses), and Stencil compiles it into a Web Component: a browser-native format that works without any specific front-end framework installed. A Stencil component looks similar to a React class component but uses TypeScript decorators to define things like the HTML tag name, the CSS file for its styles, whether to use the ShadowDOM for style isolation, and which properties the component accepts from outside. Once compiled, the resulting element can be dropped into an HTML page just like any built-in browser tag. The same component can also be imported directly into React, Angular, Vue, or other framework-based projects without rewriting anything, because the output is standard Web Component code that all modern browsers understand natively. This approach is useful for design systems and shared component libraries, where one team wants to publish components that work across multiple products built with different front-end stacks. Rather than maintaining separate component versions for each framework, one Stencil codebase produces outputs that target all of them. The README shows a short example: a component that accepts two text properties and renders a greeting. Using it in HTML then looks like any other tag. The project is licensed under the MIT License, published on npm as @stencil/core, and community support is available through Discord and the Ionic Forums.

Copy-paste prompts

Prompt 1

How do I create a Stencil Web Component with TypeScript that accepts props and emits custom events, then use it in a plain HTML page?

Prompt 2

Show me how to set up a Stencil design system project, build it, and publish the components to npm as a package.

Prompt 3

How do I wrap a Stencil Web Component for use in a React project with correct TypeScript types using the Stencil React output target?

Prompt 4

Walk me through using ShadowDOM in a Stencil component to isolate its CSS from the rest of the page.

Open on GitHub → Explain another repo

← stenciljs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.