BlogFall 2019 Stencil Roadmap

構築. 再利用性. 導入.


Get startedWhy Stencil?


  • Apple logo
  • Amazon logo
  • Porsche logo
  • Arm logo
  • Panera logo
  • Microsoft logo

魔法のような再利用可能な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.

The Stencil Newsletter

Keep up to date with all the latest Stencil news and updates.