Libx Awesomeリスト

    このページの内容

    Awesome Lit

    Litを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

    目次

    一般リソース

    コミュニティ

    概要

    スターターテンプレート

    コードラボ

    チュートリアル

    例

    Lit Labs

    • @lit/localize - Litで構築されたWebアプリケーションをローカライズするライブラリとCLIツール。
    • @lit-labs/ssr - Litのテンプレートとコンポーネントをサーバー側レンダリングするパッケージ。
    • @lit-labs/motion - 動きを付けるためのLitディレクティブ。
    • @lit-labs/react - Web ComponentsとリアクティブLitコントローラーのReact統合。
    • @lit-labs/scoped-registry-mixin - 提案を評価してフィードバックを促すため、試験的なScoped CustomElementRegistry polyfillと統合するLitElement用mixin。
    • @lit-labs/task - 非同期タスクを描画するLit用コントローラー。
    • @lit-labs/virtualizer - Litへ仮想スクロールを提供するパッケージ。

    拡張機能

    • @adobe/lit-mobx - Litでmobxを使うためのmixinと基底クラス。
    • @apollo-elements/lit-apollo - LitElementとApollo GraphQLの統合。
    • @lit-app/state - Lit 2向けの軽量で簡潔なグローバル状態管理。
    • @shoelace-style/localize - Lit向けディレクティブを提供する、Custom Elementsローカライズ用マイクロライブラリ。
    • @stefanholzapfel/lit-state - Lit 2向け軽量リアクティブ状態管理。
    • @tanstack/lit-table - Litで高機能なテーブルとデータグリッドを構築するヘッドレスUI。
    • @vaadin/form - TypeScriptとLitでフォームを構築するユーティリティ集。
    • dark-theme-utils - Web Componentsで構築されたダークモード用ユーティリティ。
    • exome - Litに対応する、深くネストした状態向け状態マネージャー。
    • pure-lit - Lit要素を純粋関数として登録します。
    • lit-composition - LitでWeb Componentsを作成するComposition API。
    • lit-element-effect - LitElement向けEffect hook。
    • lit-element-state-decoupler - LitElementでコンポーネント外部の状態を扱うユーティリティ。
    • lit-intlayer - Intlayerを使ってLitアプリケーションを多言語化します。
    • lit-redux-router - pwa-helpersとReduxを活用したLit向け宣言的ルーティング。
    • lit-svelte-stores - Svelte storeを状態管理として使うLitコントローラー。
    • ullr - Litと関数型プログラミングでWeb Componentsを構築します。

    デザインシステム

    • AXA Pattern Library - LitElementで構築されたAXA CH UIコンポーネントライブラリ。
    • Brightspace UI core - Brightspaceアプリケーションを構築するWeb Componentsコレクション。
    • Calcite Design System - ArcGISによるUIキット、アイコン、配色、Web Componentライブラリ。
    • Carbon Web Components - Web Components上に構築されたCarbon Design Systemの派生版。
    • Clarity Core Web Components - Clarity Design System向けWeb Componentsスイート。
    • Kor - オープンソースのDesign Systemと軽量UI Component Library。
    • Lion - 高性能でアクセシブルかつ柔軟なWeb Components。
    • Material Web Components - Web Componentsとして実装されたMaterial Design。
    • Momentum UI Web Components - Momentum Designに基づくUIコンポーネント集。
    • Outline Design System - Web Componentベースのデザインシステムスターターキット。
    • Pharos Design System - 一貫性があり、支援的で美しい体験を作るJSTORのデザインシステム。
    • Red Hat Design System - Red Hatブランドで統一された体験を構築するWeb Components。
    • Spectrum Web Components - LitElementで構築されたAdobe Spectrumデザイン言語の実装。
    • UI5 Web Components - ネイティブAPI上にエンタープライズ向け機能を追加します！
    • Vaadin web components - ビジネスWebアプリケーション向けの高品質Web Components集。
    • Web Awesome - Font AwesomeによるオープンソースWeb Componentsライブラリ。

    コンポーネントライブラリ

    • AgnosticUI - Lit Web Componentsをプロジェクトへ直接コピーするCLIベースUIコンポーネントライブラリ。ネイティブフレームワーク体験向けにReact・Vueの完全なラッパーを備えます。
    • Apollo Elements - Custom ElementsとApollo GraphQLの融合。
    • Blackstone UI - lit-htmlとLitElementでインターフェースを作成するWeb Components。
    • Burnish Components - MCPツール呼び出しの出力をUIとして描画するWeb Components。
    • Chartjs Web Components - Chart.js向けWeb Components。
    • Clever components - Clever Cloud製Web Componentsのコレクション。
    • Curvenote - 対話型の科学記事を作成するWeb Components。
    • Dile Components - Webサイト・アプリケーション向け汎用Web Components。
    • ESP Web Tools - ESPHomeなどESPベースのファームウェアをブラウザーから書き込めます。
    • Furo Webcomponents - Eclipse Furoと組み合わせるのに最適な、本番利用可能なWeb Components集。
    • Fusion Web Components - Equinor Fusionで使われるWeb Components集。
    • Ignite UI Web Components - Infragisticsによる完全なUIコンポーネントライブラリ。
    • LRNWebComponents - ELMS:LNが作成した、あらゆるプロジェクト向けWeb Components。
    • M3E - Material 3 Expressiveを実装するWeb Components。
    • Medblocks UI - openEHR・FHIRシステムを迅速に開発するWeb Components。
    • Microsoft Graph Toolkit - Microsoft Graph向けWeb Componentsコレクション。
    • Mutation testing elements - Mutation testing結果のスキーマと、その可視化用Web Components。
    • One Platform Components - Red Hat One Platform向けWeb Components集。
    • PatternFly Elements - PatternFlyデザインシステムに基づく軽量Web Components。
    • Playground Elements - Web Componentsによるサーバーレスなコード体験。
    • Stripe Elements - Stripe.js v3 ElementsのCustom Elementラッパー。
    • Titanium Elements - Leavitt Group Enterprisesが使用する軽量Web Componentsコレクション。
    • TrendChart Elements - 傾向を表す簡潔なグラフを生成するコンポーネント。
    • Umbraco UI Components - Umbraco CMS向けユーザーインターフェースWeb Componentsコレクション。
    • Vidstack Elements - 仕様準拠でカスタマイズ・拡張可能、アクセシブルかつ汎用的なメディア要素。
    • VSCode Webview Elements - Webview APIを使うVSCode拡張機能を作成するコンポーネント。
    • Web Components for TEI Publisher - TEI Publisherと、それが生成するアプリで使われるWeb Components。
    • Webmarkets web components - Webmarketsの公開Web Components集。
    • Wired Elements - 手描き風の要素コレクション。
    • Wokwi Elements - Arduinoと各種電子部品向けWeb Components。

    単独コンポーネント

    • <api-viewer> - Web Components向けAPIドキュメントとライブPlayground。
    • <app-datepicker> - LitElementとMaterial Design 2で構築されたDatepicker要素。
    • <burgton-button> - 使いやすく、カスタマイズ可能でアクセシブルなハンバーガーボタン要素。
    • <code-block> - Prism.jsとLitElementにより色付きで整形したコードを表示するWeb Component。
    • <codesandbox-button> - クリック時にCodeSandboxデモを表示するCustom Element。
    • <editor-container> - 汎用的な共同作業アプリケーション向けに設計されたブロックベースエディター。
    • <granite-qrcode-generator> - qr.jsライブラリを使ってQRコードを生成・描画するCustom Element。
    • <helium-animated-pages> - Litで構築されたCSSアニメーション作成用Web Component。
    • <json-viewer> - JSONデータをツリー表示で可視化するWeb Component。
    • <light-gallery> - Lit向けの高機能JavaScript画像・動画ギャラリー。
    • <lit-datatable> - LitElementを活用したデータテーブルのMaterial Design実装。
    • <lit-image-cropper> - 高速で軽量な画像切り抜きコンポーネント。
    • <lottie-player> - Lottieアニメーションを簡単に埋め込み・再生するWeb Component。
    • <model-viewer> - 対話型3Dモデルを描画するWeb Component。
    • <phantom-ui> - 実際のDOMを計測してオーバーレイブロックを自動生成する、構造認識型のシマーSkeleton Loader。
    • <rapi-doc> - OpenAPI 3.0・Swagger 2.0仕様を表示するWeb Component。
    • <responsive-image> - レスポンシブ画像を描画するWeb Component。
    • <round-slider> - Litで構築された簡潔な円形スライダーWeb Component。
    • <stl-part-viewer> - Three.jsを使ってSTLモデルファイルを表示するLitElement Web Component。

    メタフレームワーク

    • Gracile - 薄いフルスタックメタフレームワーク。ViteとLit SSRを利用します。

    ツール

    ビルド

    • babel-plugin-lit-property-types-from-ts - TypeScript型注釈に基づき、Litコンポーネントで宣言したリアクティブプロパティへtypeを設定するBabelプラグイン。
    • babel-plugin-template-html-minifier - Tagged Template String内のHTMLを縮小するBabelプラグイン。
    • esbuild-plugin-lit - CSS、SVG、HTML、XLIFFファイルをJavaScriptのTagged Template LiteralオブジェクトとしてインポートするESBuildプラグイン。
    • esbuild-plugin-lit-css - CSSファイルをJavaScriptのTagged Template LiteralオブジェクトとしてインポートするESBuildプラグイン。
    • lit-css-loader - CSSファイルをJavaScriptのTagged Template LiteralオブジェクトとしてインポートするWebpack loader。
    • lit-scss-loader - CSS／SCSSをLitコンポーネントへインポートするWebpack loader。
    • Mappa - package.jsonの依存関係からBare Specifierを解決する、高速なES modules向けImport Mapジェネレーター。
    • rollup-plugin-lit-css - CSSファイルをJavaScriptのTagged Template LiteralオブジェクトとしてインポートするRollupプラグイン。
    • rollup-plugin-minify-html-literals - Tagged Template String内のHTMLを縮小するRollupプラグイン。
    • rollup-plugin-postcss-lit - PostCSSで処理したスタイルシートをLitコンポーネントへ読み込むRollupプラグイン。

    Lint

    • eslint-plugin-lit - Lit Template String向けESLintプラグイン。
    • eslint-plugin-lit-a11y - Litテンプレート向けアクセシビリティLintプラグイン。
    • lit-analyzer - Litテンプレート内のバインディングを型検査するCLI。

    IDEプラグイン

    • vscode-lit-html - lit-html Template String向け構文強調とIntelliSense。
    • vscode-lit-plugin - lit-html向け構文強調、型検査、コード補完。
    • es6-string-html - ES6複数行文字列内のHTMLへ構文強調を提供するVSCode拡張機能。
    • vim-html-template-literals - Tagged Template Literal内のHTML向け構文強調とインデント。
    • @web-types/lit - Tagged Template Literal内のHTML向け属性補完。

    TypeScriptプラグイン

    • ts-lit-plugin - Litテンプレートへ型検査とコード補完を追加するプラグイン。
    • typescript-lit-html-plugin - LitテンプレートへIntelliSenseを追加するTypeScript serverプラグイン。

    その他のツール

    • @custom-elements-manifest/analyzer - Web Components向けAPIドキュメントを生成するCLIツール。
    • Asimonim - W3C DTCG仕様向けDesign Tokenパーサー、バリデーター、言語サーバー。
    • cem - LSP・MCPサーバーを内蔵し、Custom Elements Manifestを生成、検証、照会するCLIマルチツール。
    • Storybook for web-components - プレーンなWeb Componentスニペット向けUI開発環境。
    • web-components-codemods - lit-html Template Literalと互換性があるWeb Components向けCodemod。
    • Web Component DevTools - Web Componentsを扱う開発者向けブラウザー拡張機能。
    • Web Component Factory - Web Componentsを生成、ビルド、テスト、公開するCLIツール。

    CDN

    次のContent Delivery NetworkはLitのES module版を提供します。

    Bundleの利用方法はlit.devドキュメントを参照してください。

    統合

    • Bridgetown Lit Renderer - Bridgetown向けLitコンポーネントのSSRとHydration。
    • Fable.Lit - Litの力でHTMLコードをF#コードへ埋め込むツール集。
    • Ruby2JS - 最小限ながら拡張可能なRubyからJavaScriptへの変換。

    動画

    ポッドキャスト

    アーカイブ

    次の記事はlit-htmlとLitElementの古いバージョンを扱っています。

    類似ライブラリ

    これらのライブラリはLitとは関係ありませんが、類似の概念を使って構築されています。html Tagged Template Literalを使い、構文強調には同じIDEプラグインの利点を活用します。

    • haunted - 標準Web ComponentsとhyperHTMLまたはlit-html向けのReact Hooks API。
    • htm - Hyperscript Tagged Markup。コンパイラー対応を備え、標準Tagged Templateを使うJSX代替。
    • hybrids - 簡潔で関数型のAPIによりWeb Componentsを作成するUIライブラリ。
    • lit-ntml - lit-htmlに着想を得た、Node.jsのSSR向け軽量で現代的なテンプレート機能。

    その他のAwesomeリソース

    さらに多くの優れたリソースが必要なら、awesomeリストをご覧ください！

    ライセンス

    CC0