├── CONTRIBUTING.md ├── LICENSE ├── README.md └── awesome-svelte.svg /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribution Guide 2 | 3 | 1. Fork the repo. 4 | 2. Add your project to `README.md` in the most appropriate field. Make sure the description starts with an uppercase character and ends with a period. This is the format: `- [Project Name](Project URL) - A sentence that describes your project and what makes it different from others.` 5 | 3. Commit changes using format: `Add {project name}` 6 | 4. If you cannot think of an appropriate field, open an issue. 7 | 5. Describe in at least one sentence why you think the project is awesome. 8 | 6. Make a PR. 9 | 7. Maybe take a nap. 10 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Creative Commons Legal Code 2 | 3 | CC0 1.0 Universal 4 | 5 | CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE 6 | LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN 7 | ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS 8 | INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES 9 | REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS 10 | PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM 11 | THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED 12 | HEREUNDER. 13 | 14 | Statement of Purpose 15 | 16 | The laws of most jurisdictions throughout the world automatically confer 17 | exclusive Copyright and Related Rights (defined below) upon the creator 18 | and subsequent owner(s) (each and all, an "owner") of an original work of 19 | authorship and/or a database (each, a "Work"). 20 | 21 | Certain owners wish to permanently relinquish those rights to a Work for 22 | the purpose of contributing to a commons of creative, cultural and 23 | scientific works ("Commons") that the public can reliably and without fear 24 | of later claims of infringement build upon, modify, incorporate in other 25 | works, reuse and redistribute as freely as possible in any form whatsoever 26 | and for any purposes, including without limitation commercial purposes. 27 | These owners may contribute to the Commons to promote the ideal of a free 28 | culture and the further production of creative, cultural and scientific 29 | works, or to gain reputation or greater distribution for their Work in 30 | part through the use and efforts of others. 31 | 32 | For these and/or other purposes and motivations, and without any 33 | expectation of additional consideration or compensation, the person 34 | associating CC0 with a Work (the "Affirmer"), to the extent that he or she 35 | is an owner of Copyright and Related Rights in the Work, voluntarily 36 | elects to apply CC0 to the Work and publicly distribute the Work under its 37 | terms, with knowledge of his or her Copyright and Related Rights in the 38 | Work and the meaning and intended legal effect of CC0 on those rights. 39 | 40 | 1. Copyright and Related Rights. A Work made available under CC0 may be 41 | protected by copyright and related or neighboring rights ("Copyright and 42 | Related Rights"). Copyright and Related Rights include, but are not 43 | limited to, the following: 44 | 45 | i. the right to reproduce, adapt, distribute, perform, display, 46 | communicate, and translate a Work; 47 | ii. moral rights retained by the original author(s) and/or performer(s); 48 | iii. publicity and privacy rights pertaining to a person's image or 49 | likeness depicted in a Work; 50 | iv. rights protecting against unfair competition in regards to a Work, 51 | subject to the limitations in paragraph 4(a), below; 52 | v. rights protecting the extraction, dissemination, use and reuse of data 53 | in a Work; 54 | vi. database rights (such as those arising under Directive 96/9/EC of the 55 | European Parliament and of the Council of 11 March 1996 on the legal 56 | protection of databases, and under any national implementation 57 | thereof, including any amended or successor version of such 58 | directive); and 59 | vii. other similar, equivalent or corresponding rights throughout the 60 | world based on applicable law or treaty, and any national 61 | implementations thereof. 62 | 63 | 2. Waiver. To the greatest extent permitted by, but not in contravention 64 | of, applicable law, Affirmer hereby overtly, fully, permanently, 65 | irrevocably and unconditionally waives, abandons, and surrenders all of 66 | Affirmer's Copyright and Related Rights and associated claims and causes 67 | of action, whether now known or unknown (including existing as well as 68 | future claims and causes of action), in the Work (i) in all territories 69 | worldwide, (ii) for the maximum duration provided by applicable law or 70 | treaty (including future time extensions), (iii) in any current or future 71 | medium and for any number of copies, and (iv) for any purpose whatsoever, 72 | including without limitation commercial, advertising or promotional 73 | purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each 74 | member of the public at large and to the detriment of Affirmer's heirs and 75 | successors, fully intending that such Waiver shall not be subject to 76 | revocation, rescission, cancellation, termination, or any other legal or 77 | equitable action to disrupt the quiet enjoyment of the Work by the public 78 | as contemplated by Affirmer's express Statement of Purpose. 79 | 80 | 3. Public License Fallback. Should any part of the Waiver for any reason 81 | be judged legally invalid or ineffective under applicable law, then the 82 | Waiver shall be preserved to the maximum extent permitted taking into 83 | account Affirmer's express Statement of Purpose. In addition, to the 84 | extent the Waiver is so judged Affirmer hereby grants to each affected 85 | person a royalty-free, non transferable, non sublicensable, non exclusive, 86 | irrevocable and unconditional license to exercise Affirmer's Copyright and 87 | Related Rights in the Work (i) in all territories worldwide, (ii) for the 88 | maximum duration provided by applicable law or treaty (including future 89 | time extensions), (iii) in any current or future medium and for any number 90 | of copies, and (iv) for any purpose whatsoever, including without 91 | limitation commercial, advertising or promotional purposes (the 92 | "License"). The License shall be deemed effective as of the date CC0 was 93 | applied by Affirmer to the Work. Should any part of the License for any 94 | reason be judged legally invalid or ineffective under applicable law, such 95 | partial invalidity or ineffectiveness shall not invalidate the remainder 96 | of the License, and in such case Affirmer hereby affirms that he or she 97 | will not (i) exercise any of his or her remaining Copyright and Related 98 | Rights in the Work or (ii) assert any associated claims and causes of 99 | action with respect to the Work, in either case contrary to Affirmer's 100 | express Statement of Purpose. 101 | 102 | 4. Limitations and Disclaimers. 103 | 104 | a. No trademark or patent rights held by Affirmer are waived, abandoned, 105 | surrendered, licensed or otherwise affected by this document. 106 | b. Affirmer offers the Work as-is and makes no representations or 107 | warranties of any kind concerning the Work, express, implied, 108 | statutory or otherwise, including without limitation warranties of 109 | title, merchantability, fitness for a particular purpose, non 110 | infringement, or the absence of latent or other defects, accuracy, or 111 | the present or absence of errors, whether or not discoverable, all to 112 | the greatest extent permissible under applicable law. 113 | c. Affirmer disclaims responsibility for clearing rights of other persons 114 | that may apply to the Work or any use thereof, including without 115 | limitation any person's Copyright and Related Rights in the Work. 116 | Further, Affirmer disclaims responsibility for obtaining any necessary 117 | consents, permissions or other rights required for any use of the 118 | Work. 119 | d. Affirmer understands and acknowledges that Creative Commons is not a 120 | party to this document and has no duty or obligation with respect to 121 | this CC0 or use of the Work. 122 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 |
3 | awesome-svelte logo 4 |
5 |
6 |

7 | 8 | # Awesome Svelte [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) 9 | 10 | > ⚡ A curated list of awesome Svelte resources 11 | 12 | [Svelte](https://svelte.dev/) is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript 13 | 14 | Contributions welcome. Add links through pull requests or create an issue to start a discussion. 15 | 16 | ## Contents 17 | 18 | - [Awesome Svelte](#awesome-svelte-) 19 | - [Contents](#contents) 20 | - [Resources](#resources) 21 | - [Official Resources](#official-resources) 22 | - [Community](#community) 23 | - [Conferences](#conferences) 24 | - [Podcasts](#podcasts) 25 | - [YouTube Channels](#youtube-channels) 26 | - [Tutorials](#tutorials) 27 | - [Studies](#studies) 28 | - [Integrations](#integrations) 29 | - [Preprocessing](#preprocessing) 30 | - [Mobile](#mobile) 31 | - [State Libraries](#state-libraries) 32 | - [UI Libraries](#ui-libraries) 33 | - [UI Components](#ui-components) 34 | - [Table](#table) 35 | - [Notification](#notification) 36 | - [Grid](#grid) 37 | - [Icons](#icons) 38 | - [Calendar](#calendar) 39 | - [Maps](#maps) 40 | - [Charts](#charts) 41 | - [Miscellaneous](#miscellaneous) 42 | - [Scaffold](#scaffold) 43 | - [Utilities](#utilities) 44 | - [Animations](#animations) 45 | - [Drag \& Drop](#drag--drop) 46 | - [Forms](#forms) 47 | - [Form Components](#form-components) 48 | - [HTTP Requests](#http-requests) 49 | - [Sound \& Video](#sound--video) 50 | - [WebGL](#webgl) 51 | - [PWA](#pwa) 52 | - [Portal](#portal) 53 | - [Fonts](#fonts) 54 | - [Internationalization](#internationalization) 55 | - [Routers](#routers) 56 | - [Frameworks](#frameworks) 57 | - [Dev Tools](#dev-tools) 58 | - [Lint](#lint) 59 | - [Test](#test) 60 | - [Editors](#editors) 61 | - [Visual Studio Code](#visual-studio-code) 62 | - [Sublime Text](#sublime-text) 63 | - [Vim](#vim) 64 | - [JetBrains](#jetbrains) 65 | 66 | ## Resources 67 | 68 | ### Official Resources 69 | 70 | - [Official Guide](https://svelte.dev/tutorial) 71 | - [API Reference](https://svelte.dev/docs) 72 | - [GitHub Repo](https://github.com/sveltejs/svelte) 73 | - [Changelog](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md) 74 | 75 | ### Community 76 | 77 | - [Twitter](https://twitter.com/sveltejs) 78 | - [Discord](https://svelte.dev/chat) 79 | - [Reddit](https://www.reddit.com/r/sveltejs/) 80 | - [Japan Discord](https://discord.com/invite/YTXq3ZtBbx) - Svelte 日本. 81 | 82 | ### Conferences 83 | 84 | - [Svelte Summit](https://sveltesummit.com/) 85 | 86 | ### Podcasts 87 | 88 | - [Svelte Radio](https://www.svelteradio.com/) 89 | 90 | ### YouTube Channels 91 | 92 | - [Svelte Society](https://www.youtube.com/channel/UCZSr5B0l07JXK2FIeWA0-jw) 93 | - [Svelte Mastery](https://www.youtube.com/channel/UCg6SQd5jnWo5Y70rZD9SQFA) 94 | - [Joy of Code](https://www.youtube.com/@JoyofCodeDev) 95 | 96 | ### Tutorials 97 | 98 | - [Getting Started with Svelte 5: A Guide for React Developers](https://www.edistys.dev/blog/getting-started-with-svelte-5-a-guide-for-react-developers) - Edistys 99 | - [Svelte 5 Basics - Complete Svelte 5 Course for Beginners](https://www.youtube.com/watch?v=8DQailPy3q8) - Syntax (YouTube) 100 | 101 | ### Studies 102 | 103 | _Studies and research on the Svelte framework._ 104 | 105 | - [SvelteScaling](https://svelte-scaling.acmion.com/) - Does Svelte Scale? _(pre-v5)_ 106 | - [Will it Scale?](https://github.com/halfnelson/svelte-it-will-scale) - Finding Svelte's inflection point. _(pre-v5)_ 107 | 108 | ## Integrations 109 | 110 | ### Preprocessing 111 | 112 | - [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess) - A preprocessor for PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more. 113 | - [MDSveX](https://github.com/pngwn/MDsveX) - Preprocessor for MDX markdown. 114 | - [svelte-switch-case](https://github.com/l-portet/svelte-switch-case) - Switch case syntax for Svelte. 115 | - [svelte-preprocess-less](https://github.com/ls-age/svelte-preprocess-less) - Preprocessor for less. 116 | - [modular-css](https://github.com/tivac/modular-css/tree/main/packages/svelte) - Preprocessor support for modular-css. 117 | - [svelte-preprocess-sass](https://github.com/ls-age/svelte-preprocess-sass) - Preprocessor for sass. 118 | - [svelte-preprocess-markdown](https://github.com/AlexxNB/svelte-preprocess-markdown) - Write Svelte components in markdown syntax. 119 | - [@nvl/sveltex](https://github.com/nvlang/sveltex) - Svelte + Markdown + LaTeX. 120 | 121 | ### Mobile 122 | 123 | _UI frameworks for mobile._ 124 | 125 | - [Svelte Native](https://svelte-native.technology/) - Svelte controlling native components via Nativescript. 126 | - [Framework7](https://framework7.io/svelte/) - Full featured HTML framework for building iOS & Android apps. 127 | - [Capacitor](https://capacitorjs.com/solution/svelte) - Build native mobile apps with web technology and Svelte. 128 | 129 | ## State Libraries 130 | 131 | - [svelte-asyncable](https://github.com/sveltetools/svelte-asyncable) - The Svelte store contract with support for asynchronous values. 132 | - [exome](https://github.com/Marcisbee/exome) - Simple proxy based state manager for deeply nested states. 133 | - [tanstack-store](https://tanstack.com/store/latest/docs/framework/svelte/quick-start) - Framework agnostic type-safe store w/ reactive framework adapters. 134 | - 135 | 136 | ## UI Libraries 137 | 138 | - [lomer-ui](https://ui.lomer.dev) - A dead-simple CLI tool to instantly kickstart your components. 139 | - [shadcn-svelte](https://www.shadcn-svelte.com/) - Beautifully designed components that you can copy and paste into your apps. 140 | - [SvelteUI](https://svelteui.dev/) - all inclusive Svelte library - Components, Actions, Utilities, Animations. 141 | - [Flowbite Svelte](https://flowbite-svelte.com/) - Open-source Svelte UI components built with Tailwind CSS and Flowbite. 142 | - [Skeleton](https://www.skeleton.dev/docs/get-started) - Skeleton uses Tailwind utility classes and design system to easily create theme-able user interfaces. 143 | - [Sveltestrap](https://github.com/sveltestrap/sveltestrap) - Bootstrap 4 & 5 components. 144 | - [carbon-components-svelte](https://github.com/IBM/carbon-components-svelte) - Svelte implementation of the IBM Carbon Design System. 145 | - [Svelte Material UI](https://github.com/hperrin/svelte-material-ui) - Material UI Components. 146 | - [Melt UI](https://github.com/melt-ui/melt-ui) - A collection of accessible, reusable, and composable headless component builders and utilities. 147 | - [attractions](https://github.com/illright/attractions) - A pretty cool and modern UI kit. _(pre-v5)_ 148 | - [ionic-svelte](https://github.com/Tommertom/svelte-ionic-app) - Svelte integration with Ionic's UI for mobile app development, including many starters. 149 | - [YeSvelte](https://www.yesvelte.com/) - YeSvelte is flexible Svelte UI component library built on top of Bootstrap css. 150 | - [Svelte UX](https://github.com/techniq/svelte-ux) - Large collection of components, actions, stores, and utilities to build highly interactive applications 151 | - [STDF](https://stdf.design) - Mobile web component library based on Svelte and Tailwind. 152 | - [M3 Svelte](https://github.com/KTibow/m3-svelte) - Robust component library implementing Material Design 3 153 | - [AgnosUI](https://amadeusitgroup.github.io/AgnosUI/latest/) - Highly configurable headless framework agnostic component library 154 | - [daisyUI](https://daisyui.com/) - The most popular component library for Tailwind CSS - `daisyUI` adds component class names to Tailwind CSS so you can make beautiful websites faster than ever. 155 | - [Smelte](https://github.com/matyunya/smelte) - UI framework with material components built with Tailwind CSS. _(pre-v5)_ 156 | - [SVAR Core for Svelte](https://github.com/svar-widgets/core) - A collection of 20+ Svelte UI components for building fast-performing, interactive and responsive web apps. 157 | - [AgnosticUI](https://github.com/agnosticui/agnosticui) - Accessible Svelte Component Primitives (that also work with React, Vue 3, and Angular). 158 | - [Svelte Animations](https://animation-svelte.vercel.app) - Consist of Svelte Magic UI, Svelte Aceternity UI, Svelte Luxe Components over 200+ Free Animation Components & 2 Templates 159 | - [Svelte Marketing Blocks](https://sv-blocks.vercel.app) - A powerful library of 100+ marketing and UI blocks built using Shadcn Svelte, Tailwind CSS v4, and Svelte 5. 160 | ## UI Components 161 | 162 | ### Table 163 | 164 | _Tables and data grids._ 165 | 166 | - [@vincjo/datatables](https://github.com/vincjo/datatables) - A toolkit for creating datatable components with Svelte. 167 | - [svelte-table](https://github.com/dasDaniel/svelte-table) - A table implementation that allows sorting and filtering. 168 | - [svelte-generic-crud-table](https://github.com/ivosdc/svelte-generic-crud-table) - Agnostic web-component for object-arrays with CRUD functionality. Sort and resize columns. Multiple tables per page. 169 | - [svelte-generic-table-pager](https://github.com/ivosdc/svelte-generic-table-pager) - Svelte-generic-crud-table with paginator. 170 | - [powertable](https://github.com/muonw/powertable) - 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. 171 | - [svelte-pivottable](https://github.com/jjagielka/svelte-pivottable) - Svelte-based pivot table library with drag'n'drop functionality. 172 | - [svelte-datagrid](https://github.com/revolist/svelte-datagrid) - Powerful data grid library based on [revogrid](https://rv-grid.com) with best features from Excel. 173 | - [@wjfe/dataview](https://github.com/WJSoftware/wjfe-dataview) - 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. 174 | 175 | ### Notification 176 | 177 | _Toaster / snackbar - Notify the user with a modeless temporary little popup._ 178 | 179 | - [svelte-notifications](https://github.com/beyonk-adventures/svelte-notifications) - Toast notifications component that can be used in any JS application. 180 | - [svelte-favicon-badge](https://github.com/kevmodrome/svelte-favicon-badge) - A custom component that adds a favicon and a badge that you can use to show for example number of unread messages, etc. 181 | - [@zerodevx/svelte-toast](https://github.com/zerodevx/svelte-toast) - Simple elegant toast notifications. 182 | - [svelte-french-toast](https://github.com/kbrgl/svelte-french-toast) - Buttery smooth toast notifications for Svelte, inspired by React Hot Toast. Lightweight, customizable, and beautiful by default. 183 | - [svelte-sonner](https://github.com/wobsoriano/svelte-sonner) - An opinionated toast component for Svelte. 184 | 185 | ### Grid 186 | 187 | - [svelte-grid-responsive](https://github.com/andrelmlins/svelte-grid-responsive) - Bootstrap-inspired responsive grid system. 188 | - [svelte-flex](https://github.com/himynameisdave/svelte-flex) - A simple and reusable flexbox component for Svelte. 189 | 190 | ### Icons 191 | 192 | - [unplugin-icons](https://github.com/unplugin/unplugin-icons) - Access thousands of icons as components on-demand universally. 193 | - [svelte-fa](https://github.com/Cweili/svelte-fa) - Tiny FontAwesome 5 and 6 component. 194 | - [svelte-awesome](https://github.com/RobBrazier/svelte-awesome) - Awesome SVG icon component, built with Font Awesome icons. 195 | - [steeze-ui/icons](https://github.com/steeze-ui/icons) - Effortless Icon Packs & Components for Svelte, React, Vue and more. 196 | - [svelte-icons](https://github.com/AnxiousDarkly/svelte-icons) - Icon components. 197 | - [svelte-heroicons](https://github.com/krowten/svelte-heroicons) - Icons, crafted by the creators of Tailwind CSS. 198 | - [svelte-icomoon](https://github.com/aykutkardas/svelte-icomoon) - It makes it very simple to use SVG icons in your Svelte projects. 199 | - [svelte-unicons](https://github.com/devShamim/svelte-unicons) - Unicons svg icons for Svelte based on @iconscout/unicons. 200 | - [lucide-svelte](https://github.com/lucide-icons/lucide) - Implementation of the lucide icon library for svelte applications. 201 | - [svelte-icons-pack](https://github.com/leshak/svelte-icons-pack) - Based on . 202 | - [svesome](https://github.com/pouchlabs/svesome) - A fontawesome v6 icons wrapper for svelte its awesome. 203 | 204 | ### Calendar 205 | 206 | _Display non-editable events in a calendar._ 207 | 208 | - [svelte-fullcalendar](https://github.com/YogliB/svelte-fullcalendar) - A component wrapper around FullCalendar. 209 | - [svelte-calendar](https://github.com/6eDesign/svelte-calendar) - A lightweight datepicker with neat animations and a unique UX. 210 | - [date-picker-svelte](https://github.com/probablykasper/date-picker-svelte) - A date and time picker for Svelte with clean UX. 211 | - [@schedule-x/svelte](https://github.com/schedule-x/schedule-x) - A material design event calendar library. 212 | 213 | ### Maps 214 | 215 | - [svelte-googlemaps](https://github.com/beyonk-adventures/svelte-googlemaps) - Google Maps component. 216 | - [svelte-mapbox](https://github.com/beyonk-adventures/svelte-mapbox) - MapBox map and autocomplete components. 217 | - [leaflet-svelte](https://github.com/anoram/leaflet-svelte) - Svelte wrapper for Leaflet. 218 | - [esri-svelte](https://github.com/gavinr-maps/esri-svelte-example) - Web application that shows how to use the ArcGIS API for JavaScript with Svelte. 219 | - [svelte-maplibre](https://github.com/dimfeld/svelte-maplibre) - Svelte bindings for the MapLibre mapping library. 220 | 221 | ### Charts 222 | 223 | - [svelte-frappe-charts](https://github.com/himynameisdave/svelte-frappe-charts) - Svelte bindings for frappe-charts. 224 | - [Layer Cake](https://github.com/mhkeller/layercake) - A framework for mostly-reusable graphics with svelte 225 | - [LayerChart](https://github.com/techniq/layerchart) - Large collection of composable Svelte components to build a wide range of visualizations, built upon Layer Cake 226 | 227 | ### Graphs 228 | 229 | - [svelte-flow](https://svelteflow.dev) - A customizable Svelte component for building node-based editors and interactive diagrams by the creators of React Flow 230 | 231 | ### Miscellaneous 232 | 233 | - [Svelte Tweakpane UI](https://kitschpatrol.com/svelte-tweakpane-ui) - UI elements from [Tweakpane](https://tweakpane.github.io/docs/) wrapped in a collection of idiomatic Svelte components. 234 | - [svelte-tree-viewer](https://github.com/kpulkit29/svelte-tree-viewer) - A lightweight component to render tree views. 235 | - [svelte-copyright](https://github.com/himynameisdave/svelte-copyright) - A Svelte component to format and display a copyright notice. 236 | - [svelte-splitpanes](https://github.com/orefalo/svelte-splitpanes) - Full featured resizeable views panels. 237 | - [mathjax-svelte](https://github.com/WoolDoughnut310/mathjax-svelte) - A Svelte component for MathJax. 238 | - [svelte-stepper](https://github.com/efstajas/svelte-stepper) - A Svelte component for building animated step flows. 239 | - [css-3d-progress](https://github.com/rofixro/css-3d-progress) - A 3D Progress Bar component 240 | - [svelte-speedometer](https://github.com/palerdot/svelte-speedometer) - Svelte component for showing speedometer like gauge using d3. 241 | - [embedz](https://github.com/embedz/embedz) - Easy, dependency free embeds for Svelte and Vue. 242 | 243 | ## Scaffold 244 | 245 | _Templates / boilerplate / starter kits / stack ensemble / Yeoman generator._ 246 | 247 | - [create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite#readme) - Generates scaffold for a vite + svelte app. 248 | - [create-svelte](https://github.com/sveltejs/kit/tree/master/packages/create-svelte#readme) - A CLI for creating a new SvelteKit project. 249 | - [saasstarter](https://github.com/CriticalMoments/CMSaasStarter) - A open source, fast, and free to host Svelte SaaS template. 250 | - [svelte-pwa-template](https://github.com/tretapey/svelte-pwa) - A starter template for PWAs based in the official Template. _(pre-v5)_ 251 | - [vite-svelte-docker-template](https://github.com/bavragor/vite-svelte-docker-template) - Template for Svelte + Docker + Vite + Vitest. 252 | - [svelte-docs-starter](https://github.com/code-gio/svelte-docs-starter) - A modern documentation template built with Svelte 5, MDSvex, and Tailwind CSS. 253 | - [template-svelte](https://github.com/phaserjs/template-svelte) - An official quickstart template with Phaser. 254 | 255 | ## Utilities 256 | 257 | ### Animations 258 | 259 | - [AutoAnimate](https://auto-animate.formkit.com/) - A zero-config, drop-in animation utility that adds smooth transitions to your Svelte app. 260 | - [svelte-typewriter](https://github.com/henriquehbr/svelte-typewriter) - A simple and reusable typewriter effect for your Svelte applications. 261 | 262 | ### Drag & Drop 263 | 264 | - [neodrag](https://github.com/PuruVJ/neodrag) - One Draggable to rule them all 💍. 265 | 266 | ### Forms 267 | 268 | - [Superforms](https://superforms.rocks) - SvelteKit library for handling server and client validation, and client-side display of forms. 269 | - [Formsnap](https://www.formsnap.dev/) - High level Svelte components for forms, built on top of Superforms and Zod. 270 | - [felte](https://felte.dev/) - Extensible form library, with built-in Yup, Zod, Vest, and Superstruct validation. 271 | - [vest](https://github.com/ealush/vest) - 🦺 Declarative form validation framework inspired by unit testing. 272 | - [svelte-formly](https://github.com/arabdevelop/svelte-formly) - A good solution to generate and control a dynamic forms using core and custom rules with customize styles. _(pre-v5)_ 273 | - [svelte-form-builder](https://github.com/pragmatic-engineering/svelte-form-builder-community) - A No-code Drag n Drop Form Builder built for Svelte. 274 | - [Svelte Form Builder](https://svelte-form-builder.vercel.app) - Create forms with Shadcn Svelte, Superforms and ZOD | Valibot Schema within minutes. 275 | 276 | #### Form Components 277 | 278 | _Individual form components._ 279 | 280 | - [svelte-checkbox](https://github.com/HosseinShabani/svelte-checkbox) - A checkbox component (cool animation, customizable). _(pre-v5)_ 281 | - [svelte-toggle](https://github.com/beyonk-adventures/svelte-toggle) - Basic toggle component with styling. _(pre-v5)_ 282 | 283 | ### HTTP Requests 284 | 285 | - [sswr](https://github.com/ConsoleTVs/sswr) - Svelte stale while revalidate (SWR) data fetching strategy. 286 | - [svelte-query](https://sveltequery.vercel.app/) - Fetch, cache and update data in your Svelte applications all without touching any "global state". 287 | - [tanstack-svelte-query](https://tanstack.com/query/latest/docs/svelte/overview) - Framework agnostic type-safe query and mutation library for Svelte. 288 | 289 | ### Sound & Video 290 | 291 | - [svelte-sound](https://github.com/Rajaniraiyn/svelte-sound) - Svelte Actions to play interaction sounds on target DOM events. 292 | 293 | ### WebGL 294 | 295 | - [svelthree](https://github.com/vatro/svelthree) - Component library for declarative construction of reactive and reusable three.js scene graphs. 296 | - [threlte](https://threlte.xyz) - Threlte is a renderer and component library for using Three.js in a declarative and state-driven way in Svelte apps. 297 | 298 | ### PWA 299 | 300 | - [SvelteKit-Adapter-Versioned-Worker](https://github.com/hedgehog125/SvelteKit-Adapter-Versioned-Worker) - An easy-to-use service worker build plugin where you don't need to worry about cache durations. 301 | 302 | ### Portal 303 | 304 | - [svelte-portal](https://github.com/romkor/svelte-portal) - Component for rendering outside the DOM of parent component. 305 | - [svelte-teleport](https://github.com/nasso/svelte-teleport) - A component to teleport elements across the DOM. 306 | 307 | ### Fonts 308 | 309 | - [svelte-web-fonts/google](https://github.com/svelte-web-fonts/google) - Tiny component for easily loading Fonts via the Google Fonts API including autocompletion. 310 | 311 | ### Internationalization 312 | 313 | - [svelte-fluent](https://github.com/nubolab-ffwd/svelte-fluent) - Components for easy integration of [Fluent](https://projectfluent.org/) localization. 314 | - [svelte-i18n](https://github.com/kaisermann/svelte-i18n) - Internationalization library for Svelte. 315 | - [VoerkaI18n](https://zhangfisher.github.io/voerka-i18n/) - Internationalization solution for `Javascript/Typescript/Vue/React/Solidjs/SvelteJs/ReactNative` 316 | - [sveltekit-i18n](https://github.com/jarda-svoboda/sveltekit-i18n) - For integrating [i18n](https://www.npmjs.com/package/i18n) style localization in SvelteKit. 317 | - [@tolgee/svelte](https://github.com/tolgee/tolgee-js/tree/main/packages/svelte) - Web-based localization tool enabling users to translate directly in the Svelte app they develop. 318 | - [@i18n-pro/svelte](https://github.com/i18n-pro/svelte) - Lightweight, simple, flexible, automatic translation internationalization tool for Svelte. 319 | - [ParaglideJS](https://inlang.com/m/dxnzrydw/library-inlang-paraglideJsAdapterSvelteKit) - Tiny, typesafe i18n library with translated links out of the box. 320 | 321 | ## Routers 322 | 323 | _For Single Page Applications (SPAs) and more._ 324 | 325 | - [svelte-router-spa](https://github.com/jorgegorka/svelte-router) - Router adds routing to your Single Page Applications (SPA). Includes localisation, guards and nested layouts. 326 | - [svelte-routing](https://github.com/EmilTholin/svelte-routing) - A declarative Svelte routing library with SSR support. 327 | - [tinro](https://github.com/AlexxNB/tinro) - A tiny, dependency free and highly declarative router. 328 | - [svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router) - Optimized for Single Page Applications (SPA) with hash based routing and support for parameters. 329 | - [svelte-client-router](https://github.com/arthurgermano/svelte-client-router) - Svelte Client Router is everything you need and think when routing SPA's. 330 | - [@danielsharkov/svelte-router](https://github.com/DanielSharkov/svelte-router) - A simple & easy to use SPA router, developed with page transitions in mind. 331 | - [@shaun/svelterouter](https://github.com/shaunlee/svelterouter) - Another vue-router inspired Svelte router. 332 | - [Elegua](https://github.com/howesteve/elegua) - Small (< 180LoC), fast, easy, full featured SPA router 333 | - [svelte5-router](https://github.com/mateothegreat/svelte5-router) - First Svelte 5 SPA router with nesting, hooks, and more.. Use components, snippets, or both! 334 | - [@wjfe/n-savant](https://github.com/WJSoftware/wjfe-n-savant) - Fast, reactive router with always-on path and hash routing, and the router that invented multi-hash routing. 335 | 336 | ## Frameworks 337 | 338 | - [SvelteKit](https://svelte.dev/docs/kit/introduction) - The fastest way to build Svelte apps. 339 | - [Routify](https://routify.dev/) - Routes for Svelte, automated by your file structure. 340 | - [Elder.js](https://github.com/elderjs/elderjs) - Opinionated static site generator and web framework for Svelte built with SEO in mind. _(pre-v5)_ 341 | - [JungleJS](https://www.junglejs.org/) - The Jamstack framework for Svelte with GraphQL. _(pre-v5)_ 342 | - [svelte-document](https://github.com/mblouka/svelte-document) - Create documents (PDFs), resumes, or presentations entirely in Svelte. 343 | 344 | ## Dev Tools 345 | 346 | ### Lint 347 | 348 | _Lint and format your code._ 349 | 350 | - [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte) - Format your components using prettier. 351 | - [svelte-check](https://www.npmjs.com/package/svelte-check) - Check your code. 352 | - [eslint-plugin-svelte](https://github.com/sveltejs/eslint-plugin-svelte) - An ESLint plugin for Svelte using AST. 353 | 354 | ### Test 355 | 356 | - [svelte-jester](https://github.com/mihar-22/svelte-jester) - A Jest transformer to compile your components before importing them into tests. 357 | - [@testing-library/svelte](https://github.com/testing-library/svelte-testing-library) - Simple and complete Svelte DOM testing utilities that encourage good testing practices. 358 | - [jest-transform-svelte](https://github.com/rspieker/jest-transform-svelte) - Jest Transformer for Svelte components. 359 | 360 | ### Editors 361 | 362 | _Text editor plugins._ 363 | 364 | #### Visual Studio Code 365 | 366 | - [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) - Provides syntax highlighting and rich intellisense for your components. 367 | - [Svelte 3 Snippets](https://marketplace.visualstudio.com/items?itemName=fivethree.vscode-svelte-snippets) - Svelte 3 Snippets for VS Code. 368 | 369 | #### Sublime Text 370 | 371 | - [Svelte](https://packagecontrol.io/packages/Svelte) - Syntax highlighting and support for Sublime Text. 372 | 373 | #### Vim 374 | 375 | - [vim-svelte-plugin](https://github.com/leafOfTree/vim-svelte-plugin) - Syntax highlighting and support for Vim. 376 | - [coc-svelte](https://github.com/coc-extensions/coc-svelte) - Syntax highlighting and support for (Neo)Vim. 377 | 378 | #### JetBrains 379 | 380 | - [Svelte](https://plugins.jetbrains.com/plugin/12375-svelte) - Syntax highlighting and support for JetBrains. 381 | -------------------------------------------------------------------------------- /awesome-svelte.svg: -------------------------------------------------------------------------------- 1 | Asset 2 --------------------------------------------------------------------------------