656 lines
27 KiB
HTML
656 lines
27 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="#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="#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="#form">Form</a></li>
|
||
<li><a href="#charts">Charts</a></li>
|
||
<li><a href="#miscellaneous">Miscellaneous</a></li>
|
||
</ul></li>
|
||
<li><a href="#scaffold">Scaffold</a>
|
||
<ul>
|
||
<li><a href="#client">Client</a></li>
|
||
<li><a href="#universal">Universal</a></li>
|
||
</ul></li>
|
||
<li><a href="#utilities">Utilities</a>
|
||
<ul>
|
||
<li><a href="#animations">Animations</a></li>
|
||
<li><a href="#form-1">Form</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="#internationalisation">Internationalisation</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="#docs">Docs</a></li>
|
||
<li><a href="#test">Test</a></li>
|
||
<li><a href="#editors">Editors</a></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>
|
||
</ul>
|
||
<h3 id="tutorials">Tutorials</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.digitalocean.com/community/tutorials/getting-started-with-svelte-3">Getting
|
||
Started with Svelte 3</a> - DigitalOcean.</li>
|
||
<li><a
|
||
href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Develop
|
||
a complete application with Svelte and TypeScript</a> - MDN Web
|
||
Docs.</li>
|
||
<li><a href="https://svelte.school/tutorials/introduction-to-actions">An
|
||
Introduction to Actions</a> - Svelte School.</li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PL4cUxeGkcC9hlbrVO_2QFVqVPhlZmz7tO">Svelte
|
||
Tutorial for Beginners</a> - The Net Ninja (YouTube).</li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PL4cUxeGkcC9gdr4Qhx83gBBcID-KMe-PQ">Sapper
|
||
Tutorial (Crash Course)</a> - The Net Ninja (YouTube).</li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLKUl5gVuvLjh7l0SDn-BoZtMgN3TDMNPd">SvelteJS
|
||
Series - tutorials and talks</a> - SpinSpire (YouTube).</li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLoKaNN3BjQX3fG-XOSwsPHtnV8FUY6lgK">Svelte
|
||
Stores</a> - <span class="citation"
|
||
data-cites="lihautan">@lihautan</span> (YouTube).</li>
|
||
<li><a
|
||
href="https://www.youtube.com/playlist?list=PLoKaNN3BjQX3Gl14MBygFf8buPIw9pAeK">Svelte
|
||
Actions</a> - <span class="citation"
|
||
data-cites="lihautan">@lihautan</span> (YouTube).</li>
|
||
<li><a href="https://www.youtube.com/hashtag/svelte101">Svelte 101</a> -
|
||
<span class="citation" data-cites="lihautan">@lihautan</span>
|
||
(YouTube).</li>
|
||
<li><a
|
||
href="https://raddevon.com/articles/learn-svelte-by-building-a-habit-tracker-app/">Learn
|
||
Svelte by building a habit tracker app</a> - RadDevon.</li>
|
||
<li><a
|
||
href="https://www.sitepoint.com/svelte-javascript-framework-introduction/">Meet
|
||
Svelte 3, a Powerful, Even Radical JavaScript Framework</a> - SitePoint,
|
||
by Chrome DevTools engineer <span class="citation"
|
||
data-cites="Jack_Franklin">@Jack_Franklin</span>.</li>
|
||
<li><a href="https://svelteland.github.io/svelte-kit-blog-demo/">Create
|
||
your blog with SvelteKit</a> - <span class="citation"
|
||
data-cites="zhuzilin">@zhuzilin</span> (Github).</li>
|
||
<li><a
|
||
href="https://github.com/ivanhofer/sveltekit-typescript-showcase">Typescript
|
||
+ Svelte Cheatsheet</a> - An overview of all TypeScript related topics
|
||
for Svelte and SvelteKit - <span class="citation"
|
||
data-cites="ivanhofer">@ivanhofer</span> (Github).</li>
|
||
<li><a
|
||
href="https://levelup.video/library?tags=svelte#library-grid">Mutiple
|
||
Paid Svelte/Sveltekit tutourials - LevelUpTutourials</a></li>
|
||
<li><a href="https://joyofcode.xyz/categories/svelte">Mutiple Free
|
||
Svelte Tutourials - Joy Of Code</a></li>
|
||
<li><a href="https://joyofcode.xyz/categories/sveltekit">Mutiple Free
|
||
Sveltekit Tutourials - Joy Of Code</a></li>
|
||
<li><a href="https://www.youtube.com/watch?v=ridRgYSJ0ds">Setup
|
||
Authentication with AuthJS and Sveltekit 2.0</a> - <span
|
||
class="citation" data-cites="bradcypert">@bradcypert</span>
|
||
(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?</li>
|
||
<li><a href="https://github.com/halfnelson/svelte-it-will-scale">Will it
|
||
Scale?</a> - Finding Svelte’s inflection point.</li>
|
||
<li><a
|
||
href="https://medium.com/javascript-in-plain-english/javascript-frameworks-performance-comparison-2020-cd881ac21fce">JavaScript
|
||
Frameworks Performance Comparison</a> - Performance of Svelte and other
|
||
top javascript frameworks.</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/AlexxNB/svelte-preprocess-markdown">svelte-preprocess-markdown</a>
|
||
- Write Svelte components in markdown syntax.</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/TehShrike/svelte-preprocess-postcss">svelte-preprocess-postcss</a>
|
||
- Use PostCSS to preprocess your styles in Svelte components.</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/l-portet/svelte-switch-case">svelte-switch-case</a>
|
||
- Switch case syntax for Svelte.</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/thegenius/svelte-domain">Svelte-Domain</a> -
|
||
The state management for svelte.</li>
|
||
<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>
|
||
</ul>
|
||
<h2 id="ui-libraries">UI Libraries</h2>
|
||
<ul>
|
||
<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://flowbite-svelte.com/">Flowbite Svelte</a> -
|
||
Open-source Svelte UI components built with Tailwind CSS and
|
||
Flowbite.</li>
|
||
<li><a href="https://github.com/bestguy/sveltestrap">Sveltestrap</a> -
|
||
Bootstrap 4 & 5 components.</li>
|
||
<li><a href="https://github.com/matyunya/smelte">Smelte</a> - UI
|
||
framework with material components built with Tailwind CSS.</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/IBM/carbon-components-svelte">carbon-components-svelte</a>
|
||
- Svelte implementation of the IBM Carbon Design System.</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/radix-svelte/radix-svelte">Radix
|
||
Svelte</a> - An unofficial community-led Svelte port of Radix UI
|
||
Primitives</li>
|
||
<li><a href="https://github.com/illright/attractions">attractions</a> -
|
||
A pretty cool and modern UI kit</li>
|
||
<li><a href="https://github.com/AlexxNB/svelte-chota">svelte-chota</a> -
|
||
Component library built with Chota, a super light-weight CSS
|
||
framework</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.svelteui.org/">Svelte UI</a> - SvelteUI is an
|
||
all inclusive Svelte library.</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://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/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>
|
||
</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/svelte-simple-datatables">svelte-simple-datatables</a>
|
||
- A Datatable component for 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>
|
||
</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/Cweili/svelte-fa">svelte-fa</a> - Tiny
|
||
FontAwesome 5 component.</li>
|
||
<li><a
|
||
href="https://github.com/beyonk-adventures/svelte-simple-icons">svelte-simple-icons</a>
|
||
- Simple Icons 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/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>
|
||
</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>
|
||
</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>
|
||
</ul>
|
||
<h3 id="form">Form</h3>
|
||
<p><em>Lets the user create and edit data.</em></p>
|
||
<h4 id="checkbox">Checkbox</h4>
|
||
<p><em>Switch / on/off toggle / checkbox.</em></p>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/HosseinShabani/svelte-checkbox">svelte-checkbox</a>
|
||
- A checkbox component (cool animation, customizable).</li>
|
||
<li><a
|
||
href="https://github.com/beyonk-adventures/svelte-toggle">svelte-toggle</a>
|
||
- Basic toggle component with styling.</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="miscellaneous">Miscellaneous</h3>
|
||
<ul>
|
||
<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>
|
||
</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/sveltejs/component-template">component-template</a>
|
||
- A base for building shareable components.</li>
|
||
<li><a
|
||
href="https://github.com/tretapey/svelte-pwa">svelte-pwa-template</a> -
|
||
A starter template for PWAs based in the official Template.</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="form-1">Form</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/tjinauyeung/svelte-forms-lib">svelte-forms-lib</a>
|
||
- A lightweight library for managing forms.</li>
|
||
<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://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.</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://www.formsnap.dev/docs/introduction">Formsnap</a> -
|
||
High level Svelte components for forms, built on top of Superforms and
|
||
Zod.</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> - Svelte wrapper for
|
||
three.js</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="internationalisation">Internationalisation</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>
|
||
</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>
|
||
</ul>
|
||
<h2 id="frameworks">Frameworks</h2>
|
||
<ul>
|
||
<li><a href="https://kit.svelte.dev/">SvelteKit</a> - The fastest way to
|
||
build Svelte apps.</li>
|
||
<li><a href="https://elderguide.com/tech/elderjs/">Elder.js</a> -
|
||
Opinionated static site generator and web framework for Svelte built
|
||
with SEO in mind.</li>
|
||
<li><a href="https://routify.dev/">Routify</a> - Routes for Svelte,
|
||
automated by your file structure.</li>
|
||
<li><a href="https://www.junglejs.org/">JungleJS</a> - The Jamstack
|
||
framework for Svelte with GraphQL.</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/ota-meshi/eslint-plugin-svelte">eslint-plugin-svelte</a>
|
||
- An ESLint plugin for Svelte using AST.</li>
|
||
</ul>
|
||
<h3 id="docs">Docs</h3>
|
||
<p><em>Create documentation.</em></p>
|
||
<ul>
|
||
<li><a href="https://github.com/AlexxNB/svelte-docs">svelte-docs</a> - A
|
||
rapid way to write documentation for your Svelte components.</li>
|
||
<li><a
|
||
href="https://github.com/alexprey/sveltedoc-parser">sveltedoc-parser</a>
|
||
- Generate a JSON documentation for your component.</li>
|
||
<li><a
|
||
href="https://github.com/TheComputerM/svelte-docster">svelte-docster</a>
|
||
- Generate metadata about your Svelte files from jsdoc.</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="atom">Atom</h4>
|
||
<ul>
|
||
<li><a href="https://atom.io/packages/ide-svelte">ide-svelte</a> -
|
||
Provides syntax highlighting and rich intellisense for your
|
||
components.</li>
|
||
<li><a
|
||
href="https://atom.io/packages/language-svelte">language-svelte</a> -
|
||
Provides syntax highlighting for components, directives and other Svelte
|
||
specific syntax in Atom.</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/evanleck/vim-svelte">vim-svelte</a> -
|
||
Vim syntax highlighting and indentation for Svelte 3 components.</li>
|
||
<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>
|