Libx Awesomeリスト

    このページの内容

    Awesome Svelte

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

    目次

    リソース

    公式リソース

    コミュニティ

    カンファレンス

    ポッドキャスト

    YouTubeチャンネル

    チュートリアル

    研究

    Svelteフレームワークに関する研究。

    統合

    前処理

    モバイル

    モバイル向けUIフレームワーク。

    • Svelte Native - Nativescriptを介してSvelteからNative Componentを制御します。
    • Framework7 - iOS・Androidアプリを構築する高機能HTMLフレームワーク。
    • Capacitor - Web技術とSvelteでNative Mobile Appを構築します。

    状態ライブラリ

    • svelte-asyncable - 非同期値に対応するSvelte Store Contract。
    • exome - 深くネストした状態向けの簡潔なProxyベース状態マネージャー。
    • tanstack-store - リアクティブフレームワーク向けAdapterを備えた、フレームワーク非依存でType SafeなStore。

    UIライブラリ

    • lomer-ui - コンポーネントを即座に開始できる非常に簡潔なCLIツール。
    • shadcn-svelte - アプリへコピー＆ペーストできる美しく設計されたコンポーネント。
    • SvelteUI - コンポーネント、Action、Utility、Animationを含む包括的なSvelteライブラリ。
    • Flowbite Svelte - Tailwind CSSとFlowbiteで構築されたオープンソースSvelte UIコンポーネント。
    • Skeleton - Tailwind Utility ClassとDesign Systemにより、Theme設定可能なUser Interfaceを簡単に作成します。
    • Sveltestrap - Bootstrap 4・5コンポーネント。
    • carbon-components-svelte - IBM Carbon Design SystemのSvelte実装。
    • Svelte Material UI - Material UIコンポーネント。
    • Melt UI - アクセシブルで再利用・組み合わせ可能なHeadless Component BuilderとUtilityのコレクション。
    • attractions - 現代的で格好よいUI Kit。 (v5以前)
    • ionic-svelte - 多数のStarterを含む、モバイルアプリ開発向けIonic UIとSvelteの統合。
    • YeSvelte - Bootstrap CSS上に構築された柔軟なSvelte UIコンポーネントライブラリ。
    • Svelte UX - 高度に対話的なアプリケーションを構築するためのコンポーネント、Action、Store、Utilityの大規模コレクション。
    • STDF - SvelteとTailwindを基にしたMobile Web Componentライブラリ。
    • M3 Svelte - Material Design 3を実装する堅牢なコンポーネントライブラリ。
    • AgnosUI - 高度に設定可能でHeadless、フレームワーク非依存のコンポーネントライブラリ。
    • daisyUI - 最も人気のあるTailwind CSS向けコンポーネントライブラリ。daisyUIはTailwind CSSへコンポーネントクラス名を追加し、美しいWebサイトをすばやく構築できるようにします。
    • Smelte - Tailwind CSSで構築されたMaterial Component対応UIフレームワーク。 (v5以前)
    • SVAR Core for Svelte - 高速で対話的かつレスポンシブなWebアプリを構築する20以上のSvelte UIコンポーネント集。
    • AgnosticUI - アクセシブルなSvelte Component Primitive（React、Vue 3、Angularでも動作）。
    • Svelte Animations - Svelte Magic UI、Svelte Aceternity UI、Svelte Luxe Componentsからなる、200以上の無料Animation Componentと2つのTemplate。
    • Svelte Marketing Blocks - Shadcn Svelte、Tailwind CSS v4、Svelte 5で構築された100以上のMarketing・UI Blockの強力なライブラリ。
    • Quaff - Material Design 3原則に従った現代的で洗練されたコンポーネントを備える広範なUIフレームワーク。
    • retroui-svelte - shadcn-svelte上に構築され、独創的で遊び心のあるインターフェース向けに40以上のカスタマイズ可能なUIコンポーネントを提供するレトロ調Svelteコンポーネントライブラリ。
    • svelte-audio-ui - アクセシブルで組み合わせ可能なAudio UIコンポーネント集。shadcn-svelte上に構築され、audio-uiに着想を得ており、コピー、貼り付け、所有できるよう設計されています。
    • AgentsKit - SvelteでAIアプリを構築するHeadless Chat・Agent ComponentとStore。Streaming、Tool、Memory、RAGに対応するFramework Agnostic Coreを備えます。

    UIコンポーネント

    テーブル

    テーブルとデータグリッド。

    • @vincjo/datatables - SvelteでData Tableコンポーネントを作成するToolkit。
    • svelte-table - ソートとフィルターに対応するテーブル実装。
    • svelte-generic-crud-table - CRUD機能を備えたObject Array向けの非依存Web Component。列のソート・サイズ変更、1ページ内の複数テーブルに対応します。
    • svelte-generic-table-pager - Paginatorを備えたsvelte-generic-crud-table。
    • powertable - JSONデータを対話型HTMLテーブルへ変換するJavaScriptコンポーネント。データの手動検査、ソート、フィルター、検索、編集を容易にします。
    • svelte-pivottable - Drag and Drop機能を備えたSvelteベースのPivot Tableライブラリ。
    • SVAR DataGrid - セル内編集、ソート、Context Menu、折りたたみ可能列・固定列、Tree Data View、Paging、Virtual Scrollを備えたSvelte Data Grid。
    • svelte-datagrid - Excelの優れた機能を取り入れたrevogridベースの強力なData Gridライブラリ。
    • @wjfe/dataview - Column Pinningなど高度な機能を備え、Master-Child Scenarioでテーブル間の列位置同期を行える世界唯一のData Visualization用テーブル。

    通知

    Toaster／Snackbar — モードレスで一時的な小さなPopupによりユーザーへ通知します。

    • svelte-notifications - あらゆるJSアプリケーションで使えるToast Notificationコンポーネント。
    • svelte-favicon-badge - FaviconとBadgeを追加し、未読メッセージ数などの表示に使えるCustom Component。
    • @zerodevx/svelte-toast - 簡潔で洗練されたToast Notification。
    • svelte-french-toast - React Hot Toastに着想を得た、滑らかなSvelte向けToast Notification。軽量でカスタマイズ可能、既定でも美しい設計です。
    • svelte-sonner - 方針を明確にしたSvelte向けToast Component。

    グリッド

    アイコン

    • unplugin-icons - 数千のアイコンを必要に応じてコンポーネントとして汎用的に利用できます。
    • svelte-fa - 小さなFontAwesome 5・6コンポーネント。
    • svelte-awesome - Font Awesomeアイコンで構築されたSVG Icon Component。
    • steeze-ui/icons - Svelte、React、Vueなど向けの簡単なIcon Pack・Component。
    • svelte-icons - Icon Component。
    • svelte-heroicons - Tailwind CSSの作者が作成したアイコン。
    • svelte-icomoon - SvelteプロジェクトでSVGアイコンを非常に簡単に使えます。
    • svelte-unicons - @iconscout/uniconsに基づくSvelte向けUnicons SVGアイコン。
    • @thesvg/svelte - Svelte向けの5,600以上のSVGブランド・クラウドアイコンコンポーネント。AWS、Azure、GCP、4,000以上のブランドロゴ。
    • lucide-svelte - Svelteアプリケーション向けLucide Iconライブラリ実装。
    • svelte-icons-pack - https://github.com/react-icons/react-iconsを基にします。
    • svesome - Svelte向けFont Awesome v6アイコンラッパー。
    • hugeicons - アイコンを完全に網羅した、美しく本番利用可能なSvelte向けIcon Package。
    • moving icons - 美しく作り込まれたAnimated Lucide Iconのコレクション。

    カレンダー

    編集不可のイベントをカレンダーへ表示します。

    地図

    チャート

    • svelte-frappe-charts - frappe-charts向けSvelte Binding。
    • Layer Cake - 主に再利用可能なグラフィックスをSvelteで作るフレームワーク。
    • LayerChart - Layer Cake上に構築され、幅広い可視化を作成する組み合わせ可能なSvelteコンポーネントの大規模コレクション。
    • SVAR Gantt Chart - Svelteで書かれた対話型でカスタマイズ可能なGantt Chartコンポーネント。

    グラフ

    • svelte-flow - React Flowの作者による、Node-based EditorとInteractive Diagramを構築するカスタマイズ可能なSvelteコンポーネント。

    その他

    • number-flow - 数値の遷移、整形、ローカライズを行うコンポーネント。
    • Svelte Tweakpane UI - TweakpaneのUI要素を、Svelteらしいコンポーネント集としてラップします。
    • svelte-tree-viewer - Tree Viewを描画する軽量コンポーネント。
    • svelte-copyright - Copyright Noticeを整形・表示するSvelteコンポーネント。
    • svelte-splitpanes - 高機能でサイズ変更可能なView Panel。
    • mathjax-svelte - MathJax向けSvelteコンポーネント。
    • svelte-stepper - Animated Step Flowを構築するSvelteコンポーネント。
    • css-3d-progress - 3D Progress Barコンポーネント。
    • svelte-speedometer - D3を使ってSpeedometer風Gaugeを表示するSvelteコンポーネント。
    • embedz - SvelteとVue向けの簡単で依存関係のない埋め込み。
    • EmbedPDF - PDFiumを活用したSvelte向けのモジュール式高性能PDF Viewer・Editor。Annotation、Redaction、Thumbnailなどのプラグインで完全に拡張できます。
    • Edra - Tiptapを使い、Svelte開発者向けに作られた優れたRich Text Editor。
    • svelte-streamdown - streamdownのPort。組み込みStyle、Math、Mermaid、Code Highlightなどに対応し、Streaming向けに最適化された統合Markdown Renderer。
    • svelte-bash - Svelte 5向けのカスタマイズ可能なTerminal風コンポーネント。

    Scaffold

    Template／Boilerplate／Starter Kit／Stack Ensemble／Yeoman Generator。

    • create-vite - Vite + SvelteアプリのScaffoldを生成します。
    • create-svelte - 新しいSvelteKitプロジェクトを作成するCLI。
    • saasstarter - オープンソースで高速、無料ホスト可能なSvelte SaaSテンプレート。
    • svelte-pwa-template - 公式Templateを基にしたPWA向けStarter Template。 (v5以前)
    • vite-svelte-docker-template - Svelte + Docker + Vite + Vitest向けテンプレート。
    • svelte-docs-starter - Svelte 5、MDSvex、Tailwind CSSで構築された現代的なDocumentation Template。
    • template-svelte - Phaser対応の公式Quickstart Template。
    • generic-app-template - SvelteKit + shadcn-svelteで構築されたオープンソースの現代的なFull-stack Web Application Template。i18n、Theme、Cookie Management、SEO Management、mdsvexによるStatic Content、Shell Componentなどに対応します。

    ユーティリティ

    アニメーション

    • AutoAnimate - Svelteアプリへ滑らかなTransitionを追加する、設定不要でそのまま使えるAnimation Utility。
    • svelte-typewriter - Svelteアプリケーション向けの簡潔で再利用可能なTypewriter Effect。
    • moving-icons - Svelte向けの美しく作り込まれた動くアイコン。🧡
    • ssgoi - Spring PhysicsによるNative App風Page Transition。モバイルで60fps、SSR対応、すべてのModern Browserに対応します。

    Drag & Drop

    フォーム

    • Superforms - Server／Client ValidationとClient-side Form表示を扱うSvelteKitライブラリ。
    • Formsnap - SuperformsとZod上に構築された高レベルSvelte Formコンポーネント。
    • felte - 組み込みのYup、Zod、Vest、Superstruct検証を備えた拡張可能なFormライブラリ。
    • vest - 🦺 Unit Testingに着想を得た宣言的Form Validationフレームワーク。
    • svelte-formly - Core・Custom Ruleとカスタマイズ可能なStyleを使い、Dynamic Formを生成・制御するソリューション。 (v5以前)
    • svelte-form-builder - Svelte向けNo-code Drag and Drop Form Builder。
    • Svelte Form Builder - Shadcn Svelte、Superforms、ZOD／Valibot Schemaでフォームを数分で作成します。
    • Formisch - パフォーマンス、Type Safety、Bundle Sizeを重視するSvelte向けFormライブラリ。

    フォームコンポーネント

    個別のフォームコンポーネント。

    • svelte-checkbox - Checkboxコンポーネント（美しいAnimation、カスタマイズ可能）。 (v5以前)
    • svelte-toggle - Style付きの基本Toggleコンポーネント。 (v5以前)

    HTTPリクエスト

    • sswr - Svelte向けStale While Revalidate（SWR）データ取得戦略。
    • svelte-query - 「Global State」に触れずにSvelteアプリケーションでデータを取得、キャッシュ、更新します。
    • tanstack-svelte-query - Svelte向けのフレームワーク非依存でType SafeなQuery・Mutationライブラリ。

    音声・動画

    • svelte-sound - 対象DOM Eventで操作音を再生するSvelte Action。

    WebGL

    • svelthree - リアクティブで再利用可能なThree.js Scene Graphを宣言的に構築するコンポーネントライブラリ。
    • threlte - SvelteアプリでThree.jsを宣言的かつ状態駆動で使うRenderer・Component Library。

    PWA

    Portal

    • svelte-portal - 親コンポーネントのDOM外へ描画するコンポーネント。
    • svelte-teleport - DOMをまたいで要素をTeleportするコンポーネント。

    フォント

    • svelte-web-fonts/google - 自動補完を含むGoogle Fonts API経由でFontを簡単に読み込む小さなコンポーネント。

    国際化

    • svelte-fluent - Fluent Localizationを容易に統合するコンポーネント。
    • svelte-i18n - Svelte向け国際化ライブラリ。
    • VoerkaI18n - Javascript/Typescript/Vue/React/Solidjs/SvelteJs/ReactNative向け国際化ソリューション。
    • sveltekit-i18n - SvelteKitでi18n形式のLocalizationを統合します。
    • @tolgee/svelte - 開発中のSvelteアプリ内でユーザーが直接翻訳できるWebベースLocalization Tool。
    • @i18n-pro/svelte - Svelte向けの軽量、簡潔、柔軟、自動翻訳対応の国際化ツール。
    • ParaglideJS - 翻訳済みリンクを標準搭載した、小さくType Safeなi18nライブラリ。
    • wuchale - 関数呼び出しなどの形式を必要とせず、そのままコードを書ける国際化ライブラリ。

    Router

    Single Page Application（SPA）など向け。

    • svelte-router-spa - Single Page Application（SPA）へRoutingを追加します。Localization、Guard、Nested Layoutを備えます。
    • svelte-routing - SSR対応の宣言的Svelte Routingライブラリ。
    • tinro - 小さく、依存関係がなく、高度に宣言的なRouter。
    • svelte-spa-router - Hash-based RoutingとParameter対応を備え、Single Page Application（SPA）向けに最適化されています。
    • svelte-client-router - SPAのRoutingで必要・想定されるすべてを提供するSvelte Client Router。
    • @danielsharkov/svelte-router - Page Transitionを念頭に開発された、簡潔で使いやすいSPA Router。
    • @shaun/svelterouter - Vue Routerに着想を得た別のSvelte Router。
    • Elegua - 小さく（180 LoC未満）、高速で使いやすい高機能SPA Router。
    • svelte5-router - Nesting、Hookなどを備えた最初のSvelte 5 SPA Router。Component、Snippet、または両方を使えます！
    • @wjfe/n-savant - 常時有効なPath・Hash Routingを備えた高速でリアクティブなRouter。Multi-hash Routingを発明したRouterでもあります。
    • sv-router - File-basedまたはCode-based Routingに対応するType Safe SPA Router。

    フレームワーク

    • SvelteKit - Svelteアプリを構築する最速の方法。
    • Routify - ファイル構造で自動化されるSvelte向けRoute。
    • Elder.js - SEOを念頭に構築された、方針を明確にしたSvelte向けStatic Site Generator・Web Framework。 (v5以前)
    • JungleJS - GraphQL対応のSvelte向けJamstackフレームワーク。 (v5以前)
    • svelte-document - 文書（PDF）、履歴書、プレゼンテーションを完全にSvelteで作成します。

    開発ツール

    • Frontman - Click-to-editとHot Reloadを備え、ブラウザー内で動作するSvelteアプリ向けオープンソースAI Coding Agent。

    Adapter

    • JesterKit EXE - SvelteKit WebアプリをRuntime依存関係のない単一実行バイナリとして配布するAdapter。Static Buildと異なり、SSR、API Endpoint、Server HookなどKitの全機能を保持します。

    Lint

    コードをLint・整形します。

    テスト

    • svelte-jester - テストへインポートする前にコンポーネントをコンパイルするJest Transformer。
    • @testing-library/svelte - 優れたテストプラクティスを促す、簡潔で完全なSvelte DOM Testing Utility。
    • jest-transform-svelte - Svelteコンポーネント向けJest Transformer。

    エディター

    Text Editorプラグイン。

    Visual Studio Code

    Sublime Text

    • Svelte - Sublime Text向け構文強調と対応。

    Vim

    JetBrains

    • Svelte - JetBrains向け構文強調と対応。

    アプリケーション例

    デスクトップ

    • Oxide-Lab - Svelte 5 Frontendと、candle MLフレームワークを使うRust Backendで構築されたプライバシー重視のLocal LLM Chatアプリケーション。
    • Zephyr - Archipelago Multiworld Randomizer対応を組み込み、Svelte 5とTauri 2で構築されたPCゲーム向けオープンソースMod Manager。