core

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.