719 lines
30 KiB
HTML
719 lines
30 KiB
HTML
<p align="center">
|
||
<br>
|
||
<img width="200" src="./awesome-svelte.svg" alt="awesome-svelte logo">
|
||
<br> <br>
|
||
</p>
|
||
<h1 id="awesome-svelte-awesome">Awesome Svelte <a
|
||
href="https://github.com/sindresorhus/awesome"><img
|
||
src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"
|
||
alt="Awesome" /></a></h1>
|
||
<blockquote>
|
||
<p>⚡ A curated list of awesome Svelte resources</p>
|
||
</blockquote>
|
||
<p><a href="https://svelte.dev/">Svelte</a> is a new way to build web
|
||
applications. It’s a compiler that takes your declarative components and
|
||
converts them into efficient JavaScript</p>
|
||
<p>Contributions welcome. Add links through pull requests or create an
|
||
issue to start a discussion.</p>
|
||
<h2 id="contents">Contents</h2>
|
||
<ul>
|
||
<li><a href="#awesome-svelte-">Awesome Svelte</a>
|
||
<ul>
|
||
<li><a href="#contents">Contents</a></li>
|
||
<li><a href="#resources">Resources</a>
|
||
<ul>
|
||
<li><a href="#official-resources">Official Resources</a></li>
|
||
<li><a href="#community">Community</a></li>
|
||
<li><a href="#conferences">Conferences</a></li>
|
||
<li><a href="#podcasts">Podcasts</a></li>
|
||
<li><a href="#youtube-channels">YouTube Channels</a></li>
|
||
<li><a href="#tutorials">Tutorials</a></li>
|
||
<li><a href="#studies">Studies</a></li>
|
||
</ul></li>
|
||
<li><a href="#integrations">Integrations</a>
|
||
<ul>
|
||
<li><a href="#preprocessing">Preprocessing</a></li>
|
||
<li><a href="#mobile">Mobile</a></li>
|
||
</ul></li>
|
||
<li><a href="#state-libraries">State Libraries</a></li>
|
||
<li><a href="#ui-libraries">UI Libraries</a></li>
|
||
<li><a href="#ui-components">UI Components</a>
|
||
<ul>
|
||
<li><a href="#table">Table</a></li>
|
||
<li><a href="#notification">Notification</a></li>
|
||
<li><a href="#grid">Grid</a></li>
|
||
<li><a href="#icons">Icons</a></li>
|
||
<li><a href="#calendar">Calendar</a></li>
|
||
<li><a href="#maps">Maps</a></li>
|
||
<li><a href="#charts">Charts</a></li>
|
||
<li><a href="#miscellaneous">Miscellaneous</a></li>
|
||
</ul></li>
|
||
<li><a href="#scaffold">Scaffold</a></li>
|
||
<li><a href="#utilities">Utilities</a>
|
||
<ul>
|
||
<li><a href="#animations">Animations</a></li>
|
||
<li><a href="#drag--drop">Drag & Drop</a></li>
|
||
<li><a href="#forms">Forms</a>
|
||
<ul>
|
||
<li><a href="#form-components">Form Components</a></li>
|
||
</ul></li>
|
||
<li><a href="#http-requests">HTTP Requests</a></li>
|
||
<li><a href="#sound--video">Sound & Video</a></li>
|
||
<li><a href="#webgl">WebGL</a></li>
|
||
<li><a href="#pwa">PWA</a></li>
|
||
<li><a href="#portal">Portal</a></li>
|
||
<li><a href="#fonts">Fonts</a></li>
|
||
<li><a href="#internationalization">Internationalization</a></li>
|
||
</ul></li>
|
||
<li><a href="#routers">Routers</a></li>
|
||
<li><a href="#frameworks">Frameworks</a></li>
|
||
<li><a href="#dev-tools">Dev Tools</a>
|
||
<ul>
|
||
<li><a href="#lint">Lint</a></li>
|
||
<li><a href="#test">Test</a></li>
|
||
<li><a href="#editors">Editors</a>
|
||
<ul>
|
||
<li><a href="#visual-studio-code">Visual Studio Code</a></li>
|
||
<li><a href="#sublime-text">Sublime Text</a></li>
|
||
<li><a href="#vim">Vim</a></li>
|
||
<li><a href="#jetbrains">JetBrains</a></li>
|
||
</ul></li>
|
||
</ul></li>
|
||
</ul></li>
|
||
</ul>
|
||
<h2 id="resources">Resources</h2>
|
||
<h3 id="official-resources">Official Resources</h3>
|
||
<ul>
|
||
<li><a href="https://svelte.dev/tutorial">Official Guide</a></li>
|
||
<li><a href="https://svelte.dev/docs">API Reference</a></li>
|
||
<li><a href="https://github.com/sveltejs/svelte">GitHub Repo</a></li>
|
||
<li><a
|
||
href="https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md">Changelog</a></li>
|
||
</ul>
|
||
<h3 id="community">Community</h3>
|
||
<ul>
|
||
<li><a href="https://twitter.com/sveltejs">Twitter</a></li>
|
||
<li><a href="https://svelte.dev/chat">Discord</a></li>
|
||
<li><a href="https://www.reddit.com/r/sveltejs/">Reddit</a></li>
|
||
<li><a href="https://discord.com/invite/YTXq3ZtBbx">Japan Discord</a> -
|
||
Svelte 日本.</li>
|
||
</ul>
|
||
<h3 id="conferences">Conferences</h3>
|
||
<ul>
|
||
<li><a href="https://sveltesummit.com/">Svelte Summit</a></li>
|
||
</ul>
|
||
<h3 id="podcasts">Podcasts</h3>
|
||
<ul>
|
||
<li><a href="https://www.svelteradio.com/">Svelte Radio</a></li>
|
||
</ul>
|
||
<h3 id="youtube-channels">YouTube Channels</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.youtube.com/channel/UCZSr5B0l07JXK2FIeWA0-jw">Svelte
|
||
Society</a></li>
|
||
<li><a
|
||
href="https://www.youtube.com/channel/UCg6SQd5jnWo5Y70rZD9SQFA">Svelte
|
||
Mastery</a></li>
|
||
<li><a href="https://www.youtube.com/@JoyofCodeDev">Joy of Code</a></li>
|
||
</ul>
|
||
<h3 id="tutorials">Tutorials</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.edistys.dev/blog/getting-started-with-svelte-5-a-guide-for-react-developers">Getting
|
||
Started with Svelte 5: A Guide for React Developers</a> - Edistys</li>
|
||
<li><a href="https://www.youtube.com/watch?v=8DQailPy3q8">Svelte 5
|
||
Basics - Complete Svelte 5 Course for Beginners</a> - Syntax
|
||
(YouTube)</li>
|
||
</ul>
|
||
<h3 id="studies">Studies</h3>
|
||
<p><em>Studies and research on the Svelte framework.</em></p>
|
||
<ul>
|
||
<li><a href="https://svelte-scaling.acmion.com/">SvelteScaling</a> -
|
||
Does Svelte Scale? <em>(pre-v5)</em></li>
|
||
<li><a href="https://github.com/halfnelson/svelte-it-will-scale">Will it
|
||
Scale?</a> - Finding Svelte’s inflection point. <em>(pre-v5)</em></li>
|
||
</ul>
|
||
<h2 id="integrations">Integrations</h2>
|
||
<h3 id="preprocessing">Preprocessing</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/sveltejs/svelte-preprocess">svelte-preprocess</a>
|
||
- A preprocessor for PostCSS, SCSS, Less, Stylus, Coffeescript,
|
||
TypeScript, Pug and much more.</li>
|
||
<li><a href="https://github.com/pngwn/MDsveX">MDSveX</a> - Preprocessor
|
||
for MDX markdown.</li>
|
||
<li><a
|
||
href="https://github.com/l-portet/svelte-switch-case">svelte-switch-case</a>
|
||
- Switch case syntax for Svelte.</li>
|
||
<li><a
|
||
href="https://github.com/ls-age/svelte-preprocess-less">svelte-preprocess-less</a>
|
||
- Preprocessor for less.</li>
|
||
<li><a
|
||
href="https://github.com/tivac/modular-css/tree/main/packages/svelte">modular-css</a>
|
||
- Preprocessor support for modular-css.</li>
|
||
<li><a
|
||
href="https://github.com/ls-age/svelte-preprocess-sass">svelte-preprocess-sass</a>
|
||
- Preprocessor for sass.</li>
|
||
<li><a
|
||
href="https://github.com/AlexxNB/svelte-preprocess-markdown">svelte-preprocess-markdown</a>
|
||
- Write Svelte components in markdown syntax.</li>
|
||
<li><a href="https://github.com/nvlang/sveltex"><span class="citation"
|
||
data-cites="nvl/sveltex">@nvl/sveltex</span></a> - Svelte + Markdown +
|
||
LaTeX.</li>
|
||
</ul>
|
||
<h3 id="mobile">Mobile</h3>
|
||
<p><em>UI frameworks for mobile.</em></p>
|
||
<ul>
|
||
<li><a href="https://svelte-native.technology/">Svelte Native</a> -
|
||
Svelte controlling native components via Nativescript.</li>
|
||
<li><a href="https://framework7.io/svelte/">Framework7</a> - Full
|
||
featured HTML framework for building iOS & Android apps.</li>
|
||
<li><a href="https://capacitorjs.com/solution/svelte">Capacitor</a> -
|
||
Build native mobile apps with web technology and Svelte.</li>
|
||
</ul>
|
||
<h2 id="state-libraries">State Libraries</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/sveltetools/svelte-asyncable">svelte-asyncable</a>
|
||
- The Svelte store contract with support for asynchronous values.</li>
|
||
<li><a href="https://github.com/Marcisbee/exome">exome</a> - Simple
|
||
proxy based state manager for deeply nested states.</li>
|
||
<li><a
|
||
href="https://tanstack.com/store/latest/docs/framework/svelte/quick-start">tanstack-store</a>
|
||
- Framework agnostic type-safe store w/ reactive framework
|
||
adapters.</li>
|
||
<li></li>
|
||
</ul>
|
||
<h2 id="ui-libraries">UI Libraries</h2>
|
||
<ul>
|
||
<li><a href="https://ui.lomer.dev">lomer-ui</a> - A dead-simple CLI tool
|
||
to instantly kickstart your components.</li>
|
||
<li><a href="https://www.shadcn-svelte.com/">shadcn-svelte</a> -
|
||
Beautifully designed components that you can copy and paste into your
|
||
apps.</li>
|
||
<li><a href="https://svelteui.dev/">SvelteUI</a> - all inclusive Svelte
|
||
library - Components, Actions, Utilities, Animations.</li>
|
||
<li><a href="https://flowbite-svelte.com/">Flowbite Svelte</a> -
|
||
Open-source Svelte UI components built with Tailwind CSS and
|
||
Flowbite.</li>
|
||
<li><a href="https://www.skeleton.dev/docs/get-started">Skeleton</a> -
|
||
Skeleton uses Tailwind utility classes and design system to easily
|
||
create theme-able user interfaces.</li>
|
||
<li><a href="https://github.com/sveltestrap/sveltestrap">Sveltestrap</a>
|
||
- Bootstrap 4 & 5 components.</li>
|
||
<li><a
|
||
href="https://github.com/IBM/carbon-components-svelte">carbon-components-svelte</a>
|
||
- Svelte implementation of the IBM Carbon Design System.</li>
|
||
<li><a href="https://github.com/hperrin/svelte-material-ui">Svelte
|
||
Material UI</a> - Material UI Components.</li>
|
||
<li><a href="https://github.com/melt-ui/melt-ui">Melt UI</a> - A
|
||
collection of accessible, reusable, and composable headless component
|
||
builders and utilities.</li>
|
||
<li><a href="https://github.com/illright/attractions">attractions</a> -
|
||
A pretty cool and modern UI kit. <em>(pre-v5)</em></li>
|
||
<li><a
|
||
href="https://github.com/Tommertom/svelte-ionic-app">ionic-svelte</a> -
|
||
Svelte integration with Ionic’s UI for mobile app development, including
|
||
many starters.</li>
|
||
<li><a href="https://www.yesvelte.com/">YeSvelte</a> - YeSvelte is
|
||
flexible Svelte UI component library built on top of Bootstrap css.</li>
|
||
<li><a href="https://github.com/techniq/svelte-ux">Svelte UX</a> - Large
|
||
collection of components, actions, stores, and utilities to build highly
|
||
interactive applications</li>
|
||
<li><a href="https://stdf.design">STDF</a> - Mobile web component
|
||
library based on Svelte and Tailwind.</li>
|
||
<li><a href="https://github.com/KTibow/m3-svelte">M3 Svelte</a> - Robust
|
||
component library implementing Material Design 3</li>
|
||
<li><a
|
||
href="https://amadeusitgroup.github.io/AgnosUI/latest/">AgnosUI</a> -
|
||
Highly configurable headless framework agnostic component library</li>
|
||
<li><a href="https://daisyui.com/">daisyUI</a> - The most popular
|
||
component library for Tailwind CSS - <code>daisyUI</code> adds component
|
||
class names to Tailwind CSS so you can make beautiful websites faster
|
||
than ever.</li>
|
||
<li><a href="https://github.com/matyunya/smelte">Smelte</a> - UI
|
||
framework with material components built with Tailwind CSS.
|
||
<em>(pre-v5)</em></li>
|
||
<li><a href="https://github.com/svar-widgets/core">SVAR Core for
|
||
Svelte</a> - A collection of 20+ Svelte UI components for building
|
||
fast-performing, interactive and responsive web apps.</li>
|
||
<li><a href="https://github.com/agnosticui/agnosticui">AgnosticUI</a> -
|
||
Accessible Svelte Component Primitives (that also work with React, Vue
|
||
3, and Angular).</li>
|
||
<li><a href="https://animation-svelte.vercel.app">Svelte Animations</a>
|
||
- Consist of Svelte Magic UI, Svelte Aceternity UI, Svelte Luxe
|
||
Components over 200+ Free Animation Components & 2 Templates</li>
|
||
<li><a href="https://sv-blocks.vercel.app">Svelte Marketing Blocks</a> -
|
||
A powerful library of 100+ marketing and UI blocks built using Shadcn
|
||
Svelte, Tailwind CSS v4, and Svelte 5.</li>
|
||
<li><a href="https://quaff.dev">Quaff</a> - An extensive UI framework
|
||
featuring modern and elegant components following Material Design 3
|
||
principles.</li>
|
||
</ul>
|
||
<h2 id="ui-components">UI Components</h2>
|
||
<h3 id="table">Table</h3>
|
||
<p><em>Tables and data grids.</em></p>
|
||
<ul>
|
||
<li><a href="https://github.com/vincjo/datatables"><span
|
||
class="citation"
|
||
data-cites="vincjo/datatables">@vincjo/datatables</span></a> - A toolkit
|
||
for creating datatable components with Svelte.</li>
|
||
<li><a href="https://github.com/dasDaniel/svelte-table">svelte-table</a>
|
||
- A table implementation that allows sorting and filtering.</li>
|
||
<li><a
|
||
href="https://github.com/ivosdc/svelte-generic-crud-table">svelte-generic-crud-table</a>
|
||
- Agnostic web-component for object-arrays with CRUD functionality. Sort
|
||
and resize columns. Multiple tables per page.</li>
|
||
<li><a
|
||
href="https://github.com/ivosdc/svelte-generic-table-pager">svelte-generic-table-pager</a>
|
||
- Svelte-generic-crud-table with paginator.</li>
|
||
<li><a href="https://github.com/muonw/powertable">powertable</a> -
|
||
PowerTable is a JavaScript component that turns JSON data into an
|
||
interactive HTML table. This facilitates manual inspection, sorting,
|
||
filtering, searching, and editing of the data.</li>
|
||
<li><a
|
||
href="https://github.com/jjagielka/svelte-pivottable">svelte-pivottable</a>
|
||
- Svelte-based pivot table library with drag’n’drop functionality.</li>
|
||
<li><a
|
||
href="https://github.com/revolist/svelte-datagrid">svelte-datagrid</a> -
|
||
Powerful data grid library based on <a
|
||
href="https://rv-grid.com">revogrid</a> with best features from
|
||
Excel.</li>
|
||
<li><a href="https://github.com/WJSoftware/wjfe-dataview"><span
|
||
class="citation" data-cites="wjfe/dataview">@wjfe/dataview</span></a> -
|
||
Table for data visualization purposes with advanced features like column
|
||
pinning, and the only component in the world that does cross-table
|
||
column position synchronization for master-child scenarios.</li>
|
||
</ul>
|
||
<h3 id="notification">Notification</h3>
|
||
<p><em>Toaster / snackbar - Notify the user with a modeless temporary
|
||
little popup.</em></p>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/beyonk-adventures/svelte-notifications">svelte-notifications</a>
|
||
- Toast notifications component that can be used in any JS
|
||
application.</li>
|
||
<li><a
|
||
href="https://github.com/kevmodrome/svelte-favicon-badge">svelte-favicon-badge</a>
|
||
- A custom component that adds a favicon and a badge that you can use to
|
||
show for example number of unread messages, etc.</li>
|
||
<li><a href="https://github.com/zerodevx/svelte-toast"><span
|
||
class="citation"
|
||
data-cites="zerodevx/svelte-toast">@zerodevx/svelte-toast</span></a> -
|
||
Simple elegant toast notifications.</li>
|
||
<li><a
|
||
href="https://github.com/kbrgl/svelte-french-toast">svelte-french-toast</a>
|
||
- Buttery smooth toast notifications for Svelte, inspired by React Hot
|
||
Toast. Lightweight, customizable, and beautiful by default.</li>
|
||
<li><a
|
||
href="https://github.com/wobsoriano/svelte-sonner">svelte-sonner</a> -
|
||
An opinionated toast component for Svelte.</li>
|
||
</ul>
|
||
<h3 id="grid">Grid</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/andrelmlins/svelte-grid-responsive">svelte-grid-responsive</a>
|
||
- Bootstrap-inspired responsive grid system.</li>
|
||
<li><a
|
||
href="https://github.com/himynameisdave/svelte-flex">svelte-flex</a> - A
|
||
simple and reusable flexbox component for Svelte.</li>
|
||
</ul>
|
||
<h3 id="icons">Icons</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/unplugin/unplugin-icons">unplugin-icons</a> -
|
||
Access thousands of icons as components on-demand universally.</li>
|
||
<li><a href="https://github.com/Cweili/svelte-fa">svelte-fa</a> - Tiny
|
||
FontAwesome 5 and 6 component.</li>
|
||
<li><a
|
||
href="https://github.com/RobBrazier/svelte-awesome">svelte-awesome</a> -
|
||
Awesome SVG icon component, built with Font Awesome icons.</li>
|
||
<li><a href="https://github.com/steeze-ui/icons">steeze-ui/icons</a> -
|
||
Effortless Icon Packs & Components for Svelte, React, Vue and
|
||
more.</li>
|
||
<li><a
|
||
href="https://github.com/AnxiousDarkly/svelte-icons">svelte-icons</a> -
|
||
Icon components.</li>
|
||
<li><a
|
||
href="https://github.com/krowten/svelte-heroicons">svelte-heroicons</a>
|
||
- Icons, crafted by the creators of Tailwind CSS.</li>
|
||
<li><a
|
||
href="https://github.com/aykutkardas/svelte-icomoon">svelte-icomoon</a>
|
||
- It makes it very simple to use SVG icons in your Svelte projects.</li>
|
||
<li><a
|
||
href="https://github.com/devShamim/svelte-unicons">svelte-unicons</a> -
|
||
Unicons svg icons for Svelte based on <span class="citation"
|
||
data-cites="iconscout/unicons">@iconscout/unicons</span>.</li>
|
||
<li><a href="https://github.com/lucide-icons/lucide">lucide-svelte</a> -
|
||
Implementation of the lucide icon library for svelte applications.</li>
|
||
<li><a
|
||
href="https://github.com/leshak/svelte-icons-pack">svelte-icons-pack</a>
|
||
- Based on <a href="https://github.com/react-icons/react-icons"
|
||
class="uri">https://github.com/react-icons/react-icons</a>.</li>
|
||
<li><a href="https://github.com/pouchlabs/svesome">svesome</a> - A
|
||
fontawesome v6 icons wrapper for svelte its awesome.</li>
|
||
<li><a href="https://github.com/jis3r/icons">moving icons</a> - A
|
||
collection of beautifully crafted, animated Lucide icons.</li>
|
||
</ul>
|
||
<h3 id="calendar">Calendar</h3>
|
||
<p><em>Display non-editable events in a calendar.</em></p>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/YogliB/svelte-fullcalendar">svelte-fullcalendar</a>
|
||
- A component wrapper around FullCalendar.</li>
|
||
<li><a
|
||
href="https://github.com/6eDesign/svelte-calendar">svelte-calendar</a> -
|
||
A lightweight datepicker with neat animations and a unique UX.</li>
|
||
<li><a
|
||
href="https://github.com/probablykasper/date-picker-svelte">date-picker-svelte</a>
|
||
- A date and time picker for Svelte with clean UX.</li>
|
||
<li><a href="https://github.com/schedule-x/schedule-x"><span
|
||
class="citation"
|
||
data-cites="schedule-x/svelte">@schedule-x/svelte</span></a> - A
|
||
material design event calendar library.</li>
|
||
</ul>
|
||
<h3 id="maps">Maps</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/beyonk-adventures/svelte-googlemaps">svelte-googlemaps</a>
|
||
- Google Maps component.</li>
|
||
<li><a
|
||
href="https://github.com/beyonk-adventures/svelte-mapbox">svelte-mapbox</a>
|
||
- MapBox map and autocomplete components.</li>
|
||
<li><a
|
||
href="https://github.com/anoram/leaflet-svelte">leaflet-svelte</a> -
|
||
Svelte wrapper for Leaflet.</li>
|
||
<li><a
|
||
href="https://github.com/gavinr-maps/esri-svelte-example">esri-svelte</a>
|
||
- Web application that shows how to use the ArcGIS API for JavaScript
|
||
with Svelte.</li>
|
||
<li><a
|
||
href="https://github.com/dimfeld/svelte-maplibre">svelte-maplibre</a> -
|
||
Svelte bindings for the MapLibre mapping library.</li>
|
||
</ul>
|
||
<h3 id="charts">Charts</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/himynameisdave/svelte-frappe-charts">svelte-frappe-charts</a>
|
||
- Svelte bindings for frappe-charts.</li>
|
||
<li><a href="https://github.com/mhkeller/layercake">Layer Cake</a> - A
|
||
framework for mostly-reusable graphics with svelte</li>
|
||
<li><a href="https://github.com/techniq/layerchart">LayerChart</a> -
|
||
Large collection of composable Svelte components to build a wide range
|
||
of visualizations, built upon Layer Cake</li>
|
||
</ul>
|
||
<h3 id="graphs">Graphs</h3>
|
||
<ul>
|
||
<li><a href="https://svelteflow.dev">svelte-flow</a> - A customizable
|
||
Svelte component for building node-based editors and interactive
|
||
diagrams by the creators of React Flow</li>
|
||
</ul>
|
||
<h3 id="miscellaneous">Miscellaneous</h3>
|
||
<ul>
|
||
<li><a href="https://kitschpatrol.com/svelte-tweakpane-ui">Svelte
|
||
Tweakpane UI</a> - UI elements from <a
|
||
href="https://tweakpane.github.io/docs/">Tweakpane</a> wrapped in a
|
||
collection of idiomatic Svelte components.</li>
|
||
<li><a
|
||
href="https://github.com/kpulkit29/svelte-tree-viewer">svelte-tree-viewer</a>
|
||
- A lightweight component to render tree views.</li>
|
||
<li><a
|
||
href="https://github.com/himynameisdave/svelte-copyright">svelte-copyright</a>
|
||
- A Svelte component to format and display a copyright notice.</li>
|
||
<li><a
|
||
href="https://github.com/orefalo/svelte-splitpanes">svelte-splitpanes</a>
|
||
- Full featured resizeable views panels.</li>
|
||
<li><a
|
||
href="https://github.com/WoolDoughnut310/mathjax-svelte">mathjax-svelte</a>
|
||
- A Svelte component for MathJax.</li>
|
||
<li><a
|
||
href="https://github.com/efstajas/svelte-stepper">svelte-stepper</a> - A
|
||
Svelte component for building animated step flows.</li>
|
||
<li><a
|
||
href="https://github.com/rofixro/css-3d-progress">css-3d-progress</a> -
|
||
A 3D Progress Bar component</li>
|
||
<li><a
|
||
href="https://github.com/palerdot/svelte-speedometer">svelte-speedometer</a>
|
||
- Svelte component for showing speedometer like gauge using d3.</li>
|
||
<li><a href="https://github.com/embedz/embedz">embedz</a> - Easy,
|
||
dependency free embeds for Svelte and Vue.</li>
|
||
<li><a href="https://edra.tsuzat.com">Edra</a> - Best Rich Text Editor,
|
||
made for Svelte Developers with Tiptap.</li>
|
||
</ul>
|
||
<h2 id="scaffold">Scaffold</h2>
|
||
<p><em>Templates / boilerplate / starter kits / stack ensemble / Yeoman
|
||
generator.</em></p>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/vitejs/vite/tree/main/packages/create-vite#readme">create-vite</a>
|
||
- Generates scaffold for a vite + svelte app.</li>
|
||
<li><a
|
||
href="https://github.com/sveltejs/kit/tree/master/packages/create-svelte#readme">create-svelte</a>
|
||
- A CLI for creating a new SvelteKit project.</li>
|
||
<li><a
|
||
href="https://github.com/CriticalMoments/CMSaasStarter">saasstarter</a>
|
||
- A open source, fast, and free to host Svelte SaaS template.</li>
|
||
<li><a
|
||
href="https://github.com/tretapey/svelte-pwa">svelte-pwa-template</a> -
|
||
A starter template for PWAs based in the official Template.
|
||
<em>(pre-v5)</em></li>
|
||
<li><a
|
||
href="https://github.com/bavragor/vite-svelte-docker-template">vite-svelte-docker-template</a>
|
||
- Template for Svelte + Docker + Vite + Vitest.</li>
|
||
<li><a
|
||
href="https://github.com/code-gio/svelte-docs-starter">svelte-docs-starter</a>
|
||
- A modern documentation template built with Svelte 5, MDSvex, and
|
||
Tailwind CSS.</li>
|
||
<li><a
|
||
href="https://github.com/phaserjs/template-svelte">template-svelte</a> -
|
||
An official quickstart template with Phaser.</li>
|
||
</ul>
|
||
<h2 id="utilities">Utilities</h2>
|
||
<h3 id="animations">Animations</h3>
|
||
<ul>
|
||
<li><a href="https://auto-animate.formkit.com/">AutoAnimate</a> - A
|
||
zero-config, drop-in animation utility that adds smooth transitions to
|
||
your Svelte app.</li>
|
||
<li><a
|
||
href="https://github.com/henriquehbr/svelte-typewriter">svelte-typewriter</a>
|
||
- A simple and reusable typewriter effect for your Svelte
|
||
applications.</li>
|
||
</ul>
|
||
<h3 id="drag-drop">Drag & Drop</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/PuruVJ/neodrag">neodrag</a> - One
|
||
Draggable to rule them all 💍.</li>
|
||
</ul>
|
||
<h3 id="forms">Forms</h3>
|
||
<ul>
|
||
<li><a href="https://superforms.rocks">Superforms</a> - SvelteKit
|
||
library for handling server and client validation, and client-side
|
||
display of forms.</li>
|
||
<li><a href="https://www.formsnap.dev/">Formsnap</a> - High level Svelte
|
||
components for forms, built on top of Superforms and Zod.</li>
|
||
<li><a href="https://felte.dev/">felte</a> - Extensible form library,
|
||
with built-in Yup, Zod, Vest, and Superstruct validation.</li>
|
||
<li><a href="https://github.com/ealush/vest">vest</a> - 🦺 Declarative
|
||
form validation framework inspired by unit testing.</li>
|
||
<li><a
|
||
href="https://github.com/arabdevelop/svelte-formly">svelte-formly</a> -
|
||
A good solution to generate and control a dynamic forms using core and
|
||
custom rules with customize styles. <em>(pre-v5)</em></li>
|
||
<li><a
|
||
href="https://github.com/pragmatic-engineering/svelte-form-builder-community">svelte-form-builder</a>
|
||
- A No-code Drag n Drop Form Builder built for Svelte.</li>
|
||
<li><a href="https://svelte-form-builder.vercel.app">Svelte Form
|
||
Builder</a> - Create forms with Shadcn Svelte, Superforms and ZOD |
|
||
Valibot Schema within minutes.</li>
|
||
</ul>
|
||
<h4 id="form-components">Form Components</h4>
|
||
<p><em>Individual form components.</em></p>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/HosseinShabani/svelte-checkbox">svelte-checkbox</a>
|
||
- A checkbox component (cool animation, customizable).
|
||
<em>(pre-v5)</em></li>
|
||
<li><a
|
||
href="https://github.com/beyonk-adventures/svelte-toggle">svelte-toggle</a>
|
||
- Basic toggle component with styling. <em>(pre-v5)</em></li>
|
||
</ul>
|
||
<h3 id="http-requests">HTTP Requests</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/ConsoleTVs/sswr">sswr</a> - Svelte stale
|
||
while revalidate (SWR) data fetching strategy.</li>
|
||
<li><a href="https://sveltequery.vercel.app/">svelte-query</a> - Fetch,
|
||
cache and update data in your Svelte applications all without touching
|
||
any “global state”.</li>
|
||
<li><a
|
||
href="https://tanstack.com/query/latest/docs/svelte/overview">tanstack-svelte-query</a>
|
||
- Framework agnostic type-safe query and mutation library for
|
||
Svelte.</li>
|
||
</ul>
|
||
<h3 id="sound-video">Sound & Video</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/Rajaniraiyn/svelte-sound">svelte-sound</a> -
|
||
Svelte Actions to play interaction sounds on target DOM events.</li>
|
||
</ul>
|
||
<h3 id="webgl">WebGL</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/vatro/svelthree">svelthree</a> -
|
||
Component library for declarative construction of reactive and reusable
|
||
three.js scene graphs.</li>
|
||
<li><a href="https://threlte.xyz">threlte</a> - Threlte is a renderer
|
||
and component library for using Three.js in a declarative and
|
||
state-driven way in Svelte apps.</li>
|
||
</ul>
|
||
<h3 id="pwa">PWA</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/hedgehog125/SvelteKit-Adapter-Versioned-Worker">SvelteKit-Adapter-Versioned-Worker</a>
|
||
- An easy-to-use service worker build plugin where you don’t need to
|
||
worry about cache durations.</li>
|
||
</ul>
|
||
<h3 id="portal">Portal</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/romkor/svelte-portal">svelte-portal</a>
|
||
- Component for rendering outside the DOM of parent component.</li>
|
||
<li><a
|
||
href="https://github.com/nasso/svelte-teleport">svelte-teleport</a> - A
|
||
component to teleport elements across the DOM.</li>
|
||
</ul>
|
||
<h3 id="fonts">Fonts</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/svelte-web-fonts/google">svelte-web-fonts/google</a>
|
||
- Tiny component for easily loading Fonts via the Google Fonts API
|
||
including autocompletion.</li>
|
||
</ul>
|
||
<h3 id="internationalization">Internationalization</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/nubolab-ffwd/svelte-fluent">svelte-fluent</a> -
|
||
Components for easy integration of <a
|
||
href="https://projectfluent.org/">Fluent</a> localization.</li>
|
||
<li><a href="https://github.com/kaisermann/svelte-i18n">svelte-i18n</a>
|
||
- Internationalization library for Svelte.</li>
|
||
<li><a href="https://zhangfisher.github.io/voerka-i18n/">VoerkaI18n</a>
|
||
- Internationalization solution for
|
||
<code>Javascript/Typescript/Vue/React/Solidjs/SvelteJs/ReactNative</code></li>
|
||
<li><a
|
||
href="https://github.com/jarda-svoboda/sveltekit-i18n">sveltekit-i18n</a>
|
||
- For integrating <a href="https://www.npmjs.com/package/i18n">i18n</a>
|
||
style localization in SvelteKit.</li>
|
||
<li><a
|
||
href="https://github.com/tolgee/tolgee-js/tree/main/packages/svelte"><span
|
||
class="citation" data-cites="tolgee/svelte">@tolgee/svelte</span></a> -
|
||
Web-based localization tool enabling users to translate directly in the
|
||
Svelte app they develop.</li>
|
||
<li><a href="https://github.com/i18n-pro/svelte"><span class="citation"
|
||
data-cites="i18n-pro/svelte">@i18n-pro/svelte</span></a> - Lightweight,
|
||
simple, flexible, automatic translation internationalization tool for
|
||
Svelte.</li>
|
||
<li><a
|
||
href="https://inlang.com/m/dxnzrydw/library-inlang-paraglideJsAdapterSvelteKit">ParaglideJS</a>
|
||
- Tiny, typesafe i18n library with translated links out of the box.</li>
|
||
</ul>
|
||
<h2 id="routers">Routers</h2>
|
||
<p><em>For Single Page Applications (SPAs) and more.</em></p>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/jorgegorka/svelte-router">svelte-router-spa</a>
|
||
- Router adds routing to your Single Page Applications (SPA). Includes
|
||
localisation, guards and nested layouts.</li>
|
||
<li><a
|
||
href="https://github.com/EmilTholin/svelte-routing">svelte-routing</a> -
|
||
A declarative Svelte routing library with SSR support.</li>
|
||
<li><a href="https://github.com/AlexxNB/tinro">tinro</a> - A tiny,
|
||
dependency free and highly declarative router.</li>
|
||
<li><a
|
||
href="https://github.com/ItalyPaleAle/svelte-spa-router">svelte-spa-router</a>
|
||
- Optimized for Single Page Applications (SPA) with hash based routing
|
||
and support for parameters.</li>
|
||
<li><a
|
||
href="https://github.com/arthurgermano/svelte-client-router">svelte-client-router</a>
|
||
- Svelte Client Router is everything you need and think when routing
|
||
SPA’s.</li>
|
||
<li><a href="https://github.com/DanielSharkov/svelte-router"><span
|
||
class="citation"
|
||
data-cites="danielsharkov/svelte-router">@danielsharkov/svelte-router</span></a>
|
||
- A simple & easy to use SPA router, developed with page transitions
|
||
in mind.</li>
|
||
<li><a href="https://github.com/shaunlee/svelterouter"><span
|
||
class="citation"
|
||
data-cites="shaun/svelterouter">@shaun/svelterouter</span></a> - Another
|
||
vue-router inspired Svelte router.</li>
|
||
<li><a href="https://github.com/howesteve/elegua">Elegua</a> - Small
|
||
(< 180LoC), fast, easy, full featured SPA router</li>
|
||
<li><a
|
||
href="https://github.com/mateothegreat/svelte5-router">svelte5-router</a>
|
||
- First Svelte 5 SPA router with nesting, hooks, and more.. Use
|
||
components, snippets, or both!</li>
|
||
<li><a href="https://github.com/WJSoftware/wjfe-n-savant"><span
|
||
class="citation" data-cites="wjfe/n-savant">@wjfe/n-savant</span></a> -
|
||
Fast, reactive router with always-on path and hash routing, and the
|
||
router that invented multi-hash routing.</li>
|
||
<li><a href="https://github.com/colinlienard/sv-router">sv-router</a> -
|
||
Type-safe SPA router with file-based or code-based routing.</li>
|
||
</ul>
|
||
<h2 id="frameworks">Frameworks</h2>
|
||
<ul>
|
||
<li><a href="https://svelte.dev/docs/kit/introduction">SvelteKit</a> -
|
||
The fastest way to build Svelte apps.</li>
|
||
<li><a href="https://routify.dev/">Routify</a> - Routes for Svelte,
|
||
automated by your file structure.</li>
|
||
<li><a href="https://github.com/elderjs/elderjs">Elder.js</a> -
|
||
Opinionated static site generator and web framework for Svelte built
|
||
with SEO in mind. <em>(pre-v5)</em></li>
|
||
<li><a href="https://www.junglejs.org/">JungleJS</a> - The Jamstack
|
||
framework for Svelte with GraphQL. <em>(pre-v5)</em></li>
|
||
<li><a
|
||
href="https://github.com/mblouka/svelte-document">svelte-document</a> -
|
||
Create documents (PDFs), resumes, or presentations entirely in
|
||
Svelte.</li>
|
||
</ul>
|
||
<h2 id="dev-tools">Dev Tools</h2>
|
||
<h3 id="lint">Lint</h3>
|
||
<p><em>Lint and format your code.</em></p>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/sveltejs/prettier-plugin-svelte">prettier-plugin-svelte</a>
|
||
- Format your components using prettier.</li>
|
||
<li><a
|
||
href="https://www.npmjs.com/package/svelte-check">svelte-check</a> -
|
||
Check your code.</li>
|
||
<li><a
|
||
href="https://github.com/sveltejs/eslint-plugin-svelte">eslint-plugin-svelte</a>
|
||
- An ESLint plugin for Svelte using AST.</li>
|
||
</ul>
|
||
<h3 id="test">Test</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/mihar-22/svelte-jester">svelte-jester</a> - A
|
||
Jest transformer to compile your components before importing them into
|
||
tests.</li>
|
||
<li><a
|
||
href="https://github.com/testing-library/svelte-testing-library"><span
|
||
class="citation"
|
||
data-cites="testing-library/svelte">@testing-library/svelte</span></a> -
|
||
Simple and complete Svelte DOM testing utilities that encourage good
|
||
testing practices.</li>
|
||
<li><a
|
||
href="https://github.com/rspieker/jest-transform-svelte">jest-transform-svelte</a>
|
||
- Jest Transformer for Svelte components.</li>
|
||
</ul>
|
||
<h3 id="editors">Editors</h3>
|
||
<p><em>Text editor plugins.</em></p>
|
||
<h4 id="visual-studio-code">Visual Studio Code</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode">Svelte
|
||
for VS Code</a> - Provides syntax highlighting and rich intellisense for
|
||
your components.</li>
|
||
<li><a
|
||
href="https://marketplace.visualstudio.com/items?itemName=fivethree.vscode-svelte-snippets">Svelte
|
||
3 Snippets</a> - Svelte 3 Snippets for VS Code.</li>
|
||
</ul>
|
||
<h4 id="sublime-text">Sublime Text</h4>
|
||
<ul>
|
||
<li><a href="https://packagecontrol.io/packages/Svelte">Svelte</a> -
|
||
Syntax highlighting and support for Sublime Text.</li>
|
||
</ul>
|
||
<h4 id="vim">Vim</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/leafOfTree/vim-svelte-plugin">vim-svelte-plugin</a>
|
||
- Syntax highlighting and support for Vim.</li>
|
||
<li><a
|
||
href="https://github.com/coc-extensions/coc-svelte">coc-svelte</a> -
|
||
Syntax highlighting and support for (Neo)Vim.</li>
|
||
</ul>
|
||
<h4 id="jetbrains">JetBrains</h4>
|
||
<ul>
|
||
<li><a
|
||
href="https://plugins.jetbrains.com/plugin/12375-svelte">Svelte</a> -
|
||
Syntax highlighting and support for JetBrains.</li>
|
||
</ul>
|
||
<p><a href="https://github.com/TheComputerM/awesome-svelte">svelte.md
|
||
Github</a></p>
|