Page Inspect

Stencil

**Important Announcement:** The Future of Ionic’s Commercial Products →

DocsResources

CommunityBlog

⋮

- Docs
- Resources
- Community
- Blog
- Enterprise

Stencil 4 is here! Read all about what’s new in latest major release Read the Blog →# Build. Customize. Distribute. *Adopt.*

Stencil is a library for building reusable, scalable component libraries. Generate small, blazing fast Web Components that run everywhere.

Get started →npm init stencil

- ## Simple

With intentionally small tooling, a tiny API, and out-of-the-box configuration, Stencil gets out of the way and lets you focus.
- ## Performant

A tiny runtime and the raw power of native Web Components make Stencil one of the fastest compilers around.
- ## Future proof

Build cross-framework component libraries on open web standards, and break free of Framework Churn.
- ## Framework-agnostic

Stencil components are just Web Components, so they will work with any major framework—or no framework at all.

Powering cross-functional components at some of the world’s best companies. See how →

## Features
### The magical, reusable web component compiler.

- #### Web components

Build modern, standards-compliant web components that work in any browser with slots, shadow DOM, and more.
- #### Flexible output

With flexible models for how you want to use your components, Stencil can optimize for treeshaking, loading, and more.
- #### TypeScript support

Stencil uses TypeScript, providing your components with type safety as your system scales.
- #### Asynchronous rendering pipeline

Ensure your components render smoothly with Stencil’s built-in asynchronous rendering pipeline.
- #### Documentation generation

Generate automatically-updated documentation from JSDoc comments that live close to the code
- #### Dependency-free

Stencil comes with all the dependencies and preset scripts you need to start building.
- #### JSX support

Describe your components using a well known templating syntax, with all the features of JavaScript available to you.
- #### Intuitive developer experience

With a fully-typed API, built-in hot reloading dev-server, and custom utils, Stencil offers an intuitive DX.
- #### Component Libraries

Build and publish interactive components and features that run on any site, built on any stack.

## Component Libraries
### The perfect tool for component libraries.

Ensure consistent UX and brand experiences at scale with components that run on any platform or device. Build custom UIs that work seamlessly across teams and projects.

Documentation →

@Component({  tag: 'ds-text',  styleUrl: 'ds-text.css',  shadow: true,})export class Text {  render() {    return (      <slot name='ds-corp-text'>        Your Text Rendered Here      </slot>    );  }}

## Framework Integrations
### A single component library for all of your apps.

Stencil components are built to work with any major framework or no framework at all.

- ## Integration
### Angular

Use Custom Elements in your Angular code base
- ## Integration
### React

Use Custom Elements in your React code base
- ## Integration
### Vue

Use Custom Elements in your Vue code base

Explore Integrations →

## Web Components
### It’s just Web Components.

Develop Web Components using established standard technologies and APIs, including Shadow DOM, custom elements, and slots.

Documentation →

import { Component, Listen, h } from '@stencil/core';
@Component({  tag: 'huge-text-button',  styleUrl: 'huge-text-button.css',  shadow: true,})export class HugeTextButton {  @Listen('click', { capture: true })  handleClick(ev) {    ev.preventDefault();    console.log("I've been clicked!");  }
render() {    return (      <button>        <huge-text>          <slot name='huge-button-text'>Click Me</slot>        </huge-text>      </button>    )  }}

## Developer Experience
### A great developer experience out of the box.
Project goals →

- ## Sourcemaps

Generate maps from your TypeScript to the generated JavaScript for easy debugging.
- ## Zero-config

Stencil comes with a great out of the box default configuration, while allowing you to change it.
- ## Unit Testing

Unit testing is built in to Stencil, including custom test matchers and configuration.
- ## Code Generation

Generate the code for a new component, styles, and tests with a single command.
- ## Doc Generation

Generate documentation directly from code comments, ensuring your docs are always up to date.
- ## Types

Stencil uses TypeScript, providing type safety and syntax highlighting in your favorite code editor.
- ## Local Dev-Server

Move faster with a local dev-server with hot module reloading. Make a change, see it instantly.
- ## World-Class Docs

Comprehensive documentation written by the Stencil team and the open source community.

## Community

Stencil is an open source project by Ionic. Join our growing community—everyone is welcome.

- ### X

Announcements, blog posts, and general Stencil news.
- ### Discord

To get involved, ask questions, and share tips.
- ### GitHub

File issues, request features, and contribute to the project.
- ### Resources

Articles, videos, and more from the Stencil community.

© 2025 | MIT License

A project by **Ionic**

## Overview

- Introduction
- Getting Started
- Component API
- Guides
- FAQ

## Docs

- Framework Integrations
- Static Site Generation
- Config
- Output Targets
- Testing
- Core Compiler API

## Community

- Blog
- GitHub
- X
- Discord