rhetenor/awesome-awesomeness
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update lists

Browse Source
This commit is contained in:
Jonas Zeunert
2025-07-18 22:22:32 +02:00
parent 55bed3b4a1
commit 5916c5c074
3078 changed files with 331679 additions and 357255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

393
html/svelte.html
View File

@@ -17,6 +17,9 @@ converts them into efficient JavaScript</p>
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>
@@ -32,6 +35,7 @@ issue to start a discussion.</p>
<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>
@@ -41,33 +45,40 @@ issue to start a discussion.</p>
<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="#scaffold">Scaffold</a></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="#drag--drop">Drag &amp; 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 &amp; 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="#internationalisation">Internationalisation</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="#docs">Docs</a></li>
<li><a href="#test">Test</a></li>
<li><a href="#editors">Editors</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>
@@ -103,77 +114,24 @@ 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.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>
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?</li>
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.</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>
Scale?</a> - Finding Svelte’s inflection point. <em>(pre-v5)</em></li>
</ul>
<h2 id="integrations">Integrations</h2>
<h3 id="preprocessing">Preprocessing</h3>
@@ -185,8 +143,8 @@ 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>
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>
@@ -194,14 +152,14 @@ href="https://github.com/ls-age/svelte-preprocess-less">svelte-preprocess-less</
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>
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>
@@ -216,53 +174,49 @@ Build native mobile apps with web technology and Svelte.</li>
<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>
<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://github.com/agnosticui/agnosticui">AgnosticUI</a> -
Accessible Svelte Component Primitives (that also work with React, Vue
3, and Angular).</li>
<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://github.com/bestguy/sveltestrap">Sveltestrap</a> -
Bootstrap 4 &amp; 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://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 &amp; 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/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>
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.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>
@@ -273,14 +227,37 @@ 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 &amp; 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/svelte-simple-datatables">svelte-simple-datatables</a>
- A Datatable component for Svelte</li>
<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
@@ -290,6 +267,23 @@ 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
@@ -326,14 +320,17 @@ 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>
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 &amp; Components for Svelte, React, Vue and
more.</li>
<li><a
href="https://github.com/AnxiousDarkly/svelte-icons">svelte-icons</a> -
Icon components.</li>
@@ -347,6 +344,16 @@ href="https://github.com/aykutkardas/svelte-icomoon">svelte-icomoon</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>
@@ -360,6 +367,10 @@ 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>
@@ -372,18 +383,13 @@ href="https://github.com/beyonk-adventures/svelte-mapbox">svelte-mapbox</a>
<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>
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/beyonk-adventures/svelte-toggle">svelte-toggle</a>
- Basic toggle component with styling.</li>
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>
@@ -396,8 +402,18 @@ framework for mostly-reusable graphics with svelte</li>
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>
@@ -406,7 +422,7 @@ 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>
- Full featured resizeable views panels.</li>
<li><a
href="https://github.com/WoolDoughnut310/mathjax-svelte">mathjax-svelte</a>
- A Svelte component for MathJax.</li>
@@ -416,6 +432,13 @@ 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
@@ -428,11 +451,22 @@ href="https://github.com/vitejs/vite/tree/main/packages/create-vite#readme">crea
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>
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.</li>
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>
@@ -445,14 +479,18 @@ 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>
<h3 id="drag-drop">Drag &amp; 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://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://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
@@ -460,21 +498,51 @@ 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>
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://www.formsnap.dev/docs/introduction">Formsnap</a> -
High level Svelte components for forms, built on top of Superforms and
Zod.</li>
- 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 &amp; 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> - Svelte wrapper for
three.js</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>
@@ -498,7 +566,7 @@ 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>
<h3 id="internationalization">Internationalization</h3>
<ul>
<li><a
href="https://github.com/nubolab-ffwd/svelte-fluent">svelte-fluent</a> -
@@ -518,6 +586,13 @@ 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>
@@ -550,18 +625,28 @@ 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
(&lt; 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://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://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.</li>
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
@@ -578,21 +663,9 @@ href="https://github.com/sveltejs/prettier-plugin-svelte">prettier-plugin-svelte
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>
href="https://github.com/sveltejs/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
@@ -621,16 +694,6 @@ your components.</li>
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> -
@@ -638,8 +701,6 @@ 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>
@@ -653,3 +714,5 @@ Syntax highlighting and support for (Neo)Vim.</li>
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>