構築. 再利用性. 導入.

Stencilは、再利用可能でスケーラブルなデザインシステムを構築するためのツールチェーンです。あらゆるブラウザで動作する、小型で高速かつ100%標準ベースのWebコンポーネントを生成します。

Get started

Why Stencil?

デザインシステムとフレームワーク共通で使えるコンポーネントの促進

魔法のような再利用可能なWeb Componentsのコンパイラ。数秒で構築を開始できます。

Web Componentsベース
非同期レンダリング
TypeScriptサポート
一方向データバインディング
コンポーネントのプリレンダリング
シンプルなコンポーネントの遅延読み込み
JSXサポート
依存関係のないコンポーネント

はじめるのは簡単です：

$ npm init stencilRequires NPM v6

より詳しくはじめ方を確認する

StencilはWebプラットフォームと競合しません。内包します。

シンプル
With intentionally small tooling, a tiny API, and zero configuration, Stencil gets out of the way and lets you focus on your work.
軽量
A tiny runtime, pre-rendering, and the raw power of native Web Components make Stencil one of the fastest compilers around.
将来への対応
Build cross-framework components and design systems on open web standards, and break free of Framework Churn.

The perfect tool for building a design system.

Ensure consistent UX and brand experiences, at scale
Web components run on any platform or device
Build a custom UI library that works across teams and projects

Interested in learning more about building design systems with Stencil?

Show me more

Awesome developer experience out of the box.

Built-in dev-server for hot module reloading
Screenshot visual UI diffs
Auto-generate component documentation
(including css variables)

Build one component library for all of your apps.

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

Learn how Stencil seamlessly integrates with:

The Stencil story

Stencil was created to power the components for Ionic Framework - a cross-platform mobile development technology stack used by more than 5M developers worldwide.

Architecting A Component Compiler

See the v1 announcement

Watch launch video