Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/TheComputerM/awesome-svelte

⚡ A curated list of awesome Svelte resources
https://github.com/TheComputerM/awesome-svelte

List: awesome-svelte

awesome awesome-list sapper svelte sveltejs

Last synced: 4 months ago
JSON representation

⚡ A curated list of awesome Svelte resources

Awesome Lists containing this project

README 

        


  


  awesome-svelte logo

  


  





# Awesome Svelte [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)



> ⚡ A curated list of awesome Svelte resources



[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



Contributions welcome. Add links through pull requests or create an issue to start a discussion.



## Contents



- [Resources](#resources)

  - [Official Resources](#official-resources)

  - [Community](#community)

  - [Conferences](#conferences)

  - [Podcasts](#podcasts)

  - [YouTube Channels](#youtube-channels)

  - [Tutorials](#tutorials)

  - [Studies](#studies)

- [Integrations](#integrations)

  - [Preprocessing](#preprocessing)

  - [Mobile](#mobile)

- [UI Libraries](#ui-libraries)

- [UI Components](#ui-components)

  - [Table](#table)

  - [Notification](#notification)

  - [Grid](#grid)

  - [Icons](#icons)

  - [Calendar](#calendar)

  - [Maps](#maps)

  - [Form](#form)

  - [Charts](#charts)

  - [Miscellaneous](#miscellaneous)

- [Scaffold](#scaffold)

  - [Client](#client)

  - [Universal](#universal)

- [Utilities](#utilities)

  - [Animations](#animations)

  - [Form](#form-1)

  - [WebGL](#webgl)

  - [PWA](#pwa)

  - [Portal](#portal)

  - [Fonts](#fonts)

  - [Internationalisation](#internationalisation)

- [Routers](#routers)

- [Frameworks](#frameworks)

- [Dev Tools](#dev-tools)

  - [Lint](#lint)

  - [Docs](#docs)

  - [Test](#test)

  - [Editors](#editors)



## Resources



### Official Resources



- [Official Guide](https://svelte.dev/tutorial)

- [API Reference](https://svelte.dev/docs)

- [GitHub Repo](https://github.com/sveltejs/svelte)

- [Changelog](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md)



### Community



- [Twitter](https://twitter.com/sveltejs)

- [Discord](https://svelte.dev/chat)

- [Reddit](https://www.reddit.com/r/sveltejs/)

- [Japan Discord](https://discord.com/invite/YTXq3ZtBbx) - Svelte 日本.



### Conferences



- [Svelte Summit](https://sveltesummit.com/)



### Podcasts



- [Svelte Radio](https://www.svelteradio.com/)



### YouTube Channels



- [Svelte Society](https://www.youtube.com/channel/UCZSr5B0l07JXK2FIeWA0-jw)

- [Svelte Mastery](https://www.youtube.com/channel/UCg6SQd5jnWo5Y70rZD9SQFA)



### Tutorials



- [Getting Started with Svelte 3](https://www.digitalocean.com/community/tutorials/getting-started-with-svelte-3) - DigitalOcean.

- [Develop a complete application with Svelte and TypeScript](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started) - MDN Web Docs.

- [An Introduction to Actions](https://svelte.school/tutorials/introduction-to-actions) - Svelte School.

- [Svelte Tutorial for Beginners](https://www.youtube.com/playlist?list=PL4cUxeGkcC9hlbrVO_2QFVqVPhlZmz7tO) - The Net Ninja (YouTube).

- [Sapper Tutorial (Crash Course)](https://www.youtube.com/playlist?list=PL4cUxeGkcC9gdr4Qhx83gBBcID-KMe-PQ) - The Net Ninja (YouTube).

- [SvelteJS Series - tutorials and talks](https://www.youtube.com/playlist?list=PLKUl5gVuvLjh7l0SDn-BoZtMgN3TDMNPd) - SpinSpire (YouTube).

- [Svelte Stores](https://www.youtube.com/playlist?list=PLoKaNN3BjQX3fG-XOSwsPHtnV8FUY6lgK) - @lihautan (YouTube).

- [Svelte Actions](https://www.youtube.com/playlist?list=PLoKaNN3BjQX3Gl14MBygFf8buPIw9pAeK) - @lihautan (YouTube).

- [Svelte 101](https://www.youtube.com/hashtag/svelte101) - @lihautan (YouTube).

- [Learn Svelte by building a habit tracker app](https://raddevon.com/articles/learn-svelte-by-building-a-habit-tracker-app/) - RadDevon.

- [Meet Svelte 3, a Powerful, Even Radical JavaScript Framework](https://www.sitepoint.com/svelte-javascript-framework-introduction/) - SitePoint, by Chrome DevTools engineer @Jack_Franklin.

- [Create your blog with SvelteKit](https://svelteland.github.io/svelte-kit-blog-demo/) - @zhuzilin (Github).

- [Typescript + Svelte Cheatsheet](https://github.com/ivanhofer/sveltekit-typescript-showcase) - An overview of all TypeScript related topics for Svelte and SvelteKit - @ivanhofer (Github).

- [Mutiple Paid Svelte/Sveltekit tutourials - LevelUpTutourials](https://levelup.video/library?tags=svelte#library-grid)

- [Mutiple Free Svelte Tutourials - Joy Of Code](https://joyofcode.xyz/categories/svelte)

- [Mutiple Free Sveltekit Tutourials - Joy Of Code](https://joyofcode.xyz/categories/sveltekit)

- [Setup Authentication with AuthJS and Sveltekit 2.0](https://www.youtube.com/watch?v=ridRgYSJ0ds) - @bradcypert (YouTube)



### Studies



_Studies and research on the Svelte framework._



- [SvelteScaling](https://svelte-scaling.acmion.com/) - Does Svelte Scale?

- [Will it Scale?](https://github.com/halfnelson/svelte-it-will-scale) - Finding Svelte's inflection point.

- [JavaScript Frameworks Performance Comparison](https://medium.com/javascript-in-plain-english/javascript-frameworks-performance-comparison-2020-cd881ac21fce) - Performance of Svelte and other top javascript frameworks.



## Integrations



### Preprocessing



- [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess) - A preprocessor for PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more.

- [MDSveX](https://github.com/pngwn/MDsveX) - Preprocessor for MDX markdown.

- [svelte-preprocess-markdown](https://github.com/AlexxNB/svelte-preprocess-markdown) - Write Svelte components in markdown syntax.

- [svelte-preprocess-less](https://github.com/ls-age/svelte-preprocess-less) - Preprocessor for less.

- [modular-css](https://github.com/tivac/modular-css/tree/main/packages/svelte) - Preprocessor support for modular-css.

- [svelte-preprocess-postcss](https://github.com/TehShrike/svelte-preprocess-postcss) - Use PostCSS to preprocess your styles in Svelte components.

- [svelte-preprocess-sass](https://github.com/ls-age/svelte-preprocess-sass) - Preprocessor for sass.

- [svelte-switch-case](https://github.com/l-portet/svelte-switch-case) - Switch case syntax for Svelte.



### Mobile



_UI frameworks for mobile._



- [Svelte Native](https://svelte-native.technology/) - Svelte controlling native components via Nativescript.

- [Framework7](https://framework7.io/svelte/) - Full featured HTML framework for building iOS & Android apps.

- [Capacitor](https://capacitorjs.com/solution/svelte) - Build native mobile apps with web technology and Svelte.



## State Libraries



- [Svelte-Domain](https://github.com/thegenius/svelte-domain) - The state management for svelte.

- [svelte-asyncable](https://github.com/sveltetools/svelte-asyncable) - The Svelte store contract with support for asynchronous values.

- [exome](https://github.com/Marcisbee/exome) - Simple proxy based state manager for deeply nested states.



## UI Libraries



- [AgnosticUI](https://github.com/agnosticui/agnosticui) - Accessible Svelte Component Primitives (that also work with React, Vue 3, and Angular).

- [Flowbite Svelte](https://flowbite-svelte.com/) - Open-source Svelte UI components built with Tailwind CSS and Flowbite.

- [Sveltestrap](https://github.com/bestguy/sveltestrap) - Bootstrap 4 & 5 components.

- [Smelte](https://github.com/matyunya/smelte) - UI framework with material components built with Tailwind CSS.

- [Svelte Material UI](https://github.com/hperrin/svelte-material-ui) - Material UI Components.

- [carbon-components-svelte](https://github.com/IBM/carbon-components-svelte) - Svelte implementation of the IBM Carbon Design System.

- [Melt UI](https://github.com/melt-ui/melt-ui) - A collection of accessible, reusable, and composable headless component builders and utilities.

- [Radix Svelte](https://github.com/radix-svelte/radix-svelte) - An unofficial community-led Svelte port of Radix UI Primitives

- [attractions](https://github.com/illright/attractions) - A pretty cool and modern UI kit

- [svelte-chota](https://github.com/AlexxNB/svelte-chota) - Component library built with Chota, a super light-weight CSS framework

- [ionic-svelte](https://github.com/Tommertom/svelte-ionic-app) - Svelte integration with Ionic's UI for mobile app development, including many starters.

- [Svelte UI](https://www.svelteui.org/) - SvelteUI is an all inclusive Svelte library.

- [YeSvelte](https://www.yesvelte.com/) - YeSvelte is flexible Svelte UI component library built on top of Bootstrap css.

- [Skeleton](https://www.skeleton.dev/docs/get-started) - Skeleton uses Tailwind utility classes and design system to easily create theme-able user interfaces.

- [Svelte UX](https://github.com/techniq/svelte-ux) - Large collection of components, actions, stores, and utilities to build highly interactive applications

- [STDF](https://stdf.design) - Mobile web component library based on Svelte and Tailwind.

- [M3 Svelte](https://github.com/KTibow/m3-svelte) - Robust component library implementing Material Design 3

- [AgnosUI](https://amadeusitgroup.github.io/AgnosUI/latest/) - Highly configurable headless framework agnostic component library

- [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.

- [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.



## UI Components



### Table



_Tables and data grids._



- [svelte-simple-datatables](https://github.com/vincjo/svelte-simple-datatables) - A Datatable component for Svelte

- [svelte-table](https://github.com/dasDaniel/svelte-table) - A table implementation that allows sorting and filtering.

- [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.

- [svelte-generic-table-pager](https://github.com/ivosdc/svelte-generic-table-pager) - Svelte-generic-crud-table with paginator.



### Notification



_Toaster / snackbar - Notify the user with a modeless temporary little popup._



- [svelte-notifications](https://github.com/beyonk-adventures/svelte-notifications) - Toast notifications component that can be used in any JS application.

- [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.

- [@zerodevx/svelte-toast](https://github.com/zerodevx/svelte-toast) - Simple elegant toast notifications.

- [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.

- [svelte-sonner](https://github.com/wobsoriano/svelte-sonner) - An opinionated toast component for Svelte.



### Grid



- [svelte-grid-responsive](https://github.com/andrelmlins/svelte-grid-responsive) - Bootstrap-inspired responsive grid system.

- [svelte-flex](https://github.com/himynameisdave/svelte-flex) - A simple and reusable flexbox component for Svelte.



### Icons



- [svelte-fa](https://github.com/Cweili/svelte-fa) - Tiny FontAwesome 5 component.

- [svelte-simple-icons](https://github.com/beyonk-adventures/svelte-simple-icons) - Simple Icons component.

- [svelte-awesome](https://github.com/RobBrazier/svelte-awesome) - Awesome SVG icon component, built with Font Awesome icons.

- [svelte-icons](https://github.com/AnxiousDarkly/svelte-icons) - Icon components.

- [svelte-heroicons](https://github.com/krowten/svelte-heroicons) - Icons, crafted by the creators of Tailwind CSS.

- [svelte-icomoon](https://github.com/aykutkardas/svelte-icomoon) - It makes it very simple to use SVG icons in your Svelte projects.

- [svelte-unicons](https://github.com/devShamim/svelte-unicons) - Unicons svg icons for Svelte based on @iconscout/unicons.



### Calendar



_Display non-editable events in a calendar._



- [svelte-fullcalendar](https://github.com/YogliB/svelte-fullcalendar) - A component wrapper around FullCalendar.

- [svelte-calendar](https://github.com/6eDesign/svelte-calendar) - A lightweight datepicker with neat animations and a unique UX.

- [date-picker-svelte](https://github.com/probablykasper/date-picker-svelte) - A date and time picker for Svelte with clean UX.



### Maps



- [svelte-googlemaps](https://github.com/beyonk-adventures/svelte-googlemaps) - Google Maps component.

- [svelte-mapbox](https://github.com/beyonk-adventures/svelte-mapbox) - MapBox map and autocomplete components.

- [leaflet-svelte](https://github.com/anoram/leaflet-svelte) - Svelte wrapper for Leaflet.

- [esri-svelte](https://github.com/gavinr-maps/esri-svelte-example) - Web application that shows how to use the ArcGIS API for JavaScript with Svelte



### Form



_Lets the user create and edit data._



#### Checkbox



_Switch / on/off toggle / checkbox._



- [svelte-checkbox](https://github.com/HosseinShabani/svelte-checkbox) - A checkbox component (cool animation, customizable).

- [svelte-toggle](https://github.com/beyonk-adventures/svelte-toggle) - Basic toggle component with styling.



### Charts



- [svelte-frappe-charts](https://github.com/himynameisdave/svelte-frappe-charts) - Svelte bindings for frappe-charts.

- [Layer Cake](https://github.com/mhkeller/layercake) - A framework for mostly-reusable graphics with svelte

- [LayerChart](https://github.com/techniq/layerchart) - Large collection of composable Svelte components to build a wide range of visualizations, built upon Layer Cake



### Miscellaneous



- [svelte-tree-viewer](https://github.com/kpulkit29/svelte-tree-viewer) - A lightweight component to render tree views.

- [svelte-copyright](https://github.com/himynameisdave/svelte-copyright) - A Svelte component to format and display a copyright notice.

- [svelte-splitpanes](https://github.com/orefalo/svelte-splitpanes) - Full featured resizeable views panels

- [mathjax-svelte](https://github.com/WoolDoughnut310/mathjax-svelte) - A Svelte component for MathJax.

- [svelte-stepper](https://github.com/efstajas/svelte-stepper) - A Svelte component for building animated step flows.

- [css-3d-progress](https://github.com/rofixro/css-3d-progress) - A 3D Progress Bar component



## Scaffold



_Templates / boilerplate / starter kits / stack ensemble / Yeoman generator._



- [create-vite](https://github.com/vitejs/vite/tree/main/packages/create-vite#readme) - Generates scaffold for a vite + svelte app.

- [create-svelte](https://github.com/sveltejs/kit/tree/master/packages/create-svelte#readme) - A CLI for creating a new SvelteKit project.

- [component-template](https://github.com/sveltejs/component-template) - A base for building shareable components.

- [svelte-pwa-template](https://github.com/tretapey/svelte-pwa) - A starter template for PWAs based in the official Template.



## Utilities



### Animations



- [AutoAnimate](https://auto-animate.formkit.com/) - A zero-config, drop-in animation utility that adds smooth transitions to your Svelte app.

- [svelte-typewriter](https://github.com/henriquehbr/svelte-typewriter) - A simple and reusable typewriter effect for your Svelte applications.



### Form



- [svelte-forms-lib](https://github.com/tjinauyeung/svelte-forms-lib) - A lightweight library for managing forms.

- [Superforms](https://superforms.rocks) - SvelteKit library for handling server and client validation, and client-side display of forms.

- [felte](https://felte.dev/) - Extensible form library, with built-in Yup, Zod, Vest, and Superstruct validation.

- [vest](https://github.com/ealush/vest) - 🦺 Declarative form validation framework inspired by unit testing.

- [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.

- [svelte-form-builder](https://github.com/pragmatic-engineering/svelte-form-builder-community) - A No-code Drag n Drop Form Builder built for Svelte

- [Formsnap](https://www.formsnap.dev/docs/introduction) - High level Svelte components for forms, built on top of Superforms and Zod.



### WebGL



- [svelthree](https://github.com/vatro/svelthree) - Component library for declarative construction of reactive and reusable three.js scene graphs.

- [threlte](https://threlte.xyz) - Svelte wrapper for three.js



### PWA



- [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.



### Portal



- [svelte-portal](https://github.com/romkor/svelte-portal) - Component for rendering outside the DOM of parent component.

- [svelte-teleport](https://github.com/nasso/svelte-teleport) - A component to teleport elements across the DOM.



### Fonts



- [svelte-web-fonts/google](https://github.com/svelte-web-fonts/google) - Tiny component for easily loading Fonts via the Google Fonts API including autocompletion.



### Internationalisation



- [svelte-fluent](https://github.com/nubolab-ffwd/svelte-fluent) - Components for easy integration of [Fluent](https://projectfluent.org/) localization.

- [svelte-i18n](https://github.com/kaisermann/svelte-i18n) - Internationalization library for Svelte.

- [VoerkaI18n](https://zhangfisher.github.io/voerka-i18n/) - Internationalization solution for `Javascript/Typescript/Vue/React/Solidjs/SvelteJs/ReactNative`

- [sveltekit-i18n](https://github.com/jarda-svoboda/sveltekit-i18n) - For integrating [i18n](https://www.npmjs.com/package/i18n) style localization in SvelteKit.

- [@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.



## Routers



_For Single Page Applications (SPAs) and more._



- [svelte-router-spa](https://github.com/jorgegorka/svelte-router) - Router adds routing to your Single Page Applications (SPA). Includes localisation, guards and nested layouts.

- [svelte-routing](https://github.com/EmilTholin/svelte-routing) - A declarative Svelte routing library with SSR support.

- [tinro](https://github.com/AlexxNB/tinro) - A tiny, dependency free and highly declarative router.

- [svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router) - Optimized for Single Page Applications (SPA) with hash based routing and support for parameters.

- [svelte-client-router](https://github.com/arthurgermano/svelte-client-router) - Svelte Client Router is everything you need and think when routing SPA's.

- [@danielsharkov/svelte-router](https://github.com/DanielSharkov/svelte-router) - A simple & easy to use SPA router, developed with page transitions in mind.

- [@shaun/svelterouter](https://github.com/shaunlee/svelterouter) - Another vue-router inspired Svelte router.

- [Elegua](https://github.com/howesteve/elegua) - Small (< 180LoC), fast, easy, full featured SPA router



## Frameworks



- [SvelteKit](https://kit.svelte.dev/) - The fastest way to build Svelte apps.

- [Elder.js](https://elderguide.com/tech/elderjs/) - Opinionated static site generator and web framework for Svelte built with SEO in mind.

- [Routify](https://routify.dev/) - Routes for Svelte, automated by your file structure.

- [JungleJS](https://www.junglejs.org/) - The Jamstack framework for Svelte with GraphQL.

- [svelte-document](https://github.com/mblouka/svelte-document) - Create documents (PDFs), resumes, or presentations entirely in Svelte.



## Dev Tools



### Lint



_Lint and format your code._



- [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte) - Format your components using prettier.

- [svelte-check](https://www.npmjs.com/package/svelte-check) - Check your code.

- [eslint-plugin-svelte](https://github.com/ota-meshi/eslint-plugin-svelte) - An ESLint plugin for Svelte using AST.



### Docs



_Create documentation._



- [svelte-docs](https://github.com/AlexxNB/svelte-docs) - A rapid way to write documentation for your Svelte components.

- [sveltedoc-parser](https://github.com/alexprey/sveltedoc-parser) - Generate a JSON documentation for your component.

- [svelte-docster](https://github.com/TheComputerM/svelte-docster) - Generate metadata about your Svelte files from jsdoc.



### Test



- [svelte-jester](https://github.com/mihar-22/svelte-jester) - A Jest transformer to compile your components before importing them into tests.

- [@testing-library/svelte](https://github.com/testing-library/svelte-testing-library) - Simple and complete Svelte DOM testing utilities that encourage good testing practices.

- [jest-transform-svelte](https://github.com/rspieker/jest-transform-svelte) - Jest Transformer for Svelte components.



### Editors



_Text editor plugins._



#### Visual Studio Code



- [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) - Provides syntax highlighting and rich intellisense for your components.

- [Svelte 3 Snippets](https://marketplace.visualstudio.com/items?itemName=fivethree.vscode-svelte-snippets) - Svelte 3 Snippets for VS Code.



#### Atom



- [ide-svelte](https://atom.io/packages/ide-svelte) - Provides syntax highlighting and rich intellisense for your components.

- [language-svelte](https://atom.io/packages/language-svelte) - Provides syntax highlighting for components, directives and other Svelte specific syntax in Atom.



#### Sublime Text



- [Svelte](https://packagecontrol.io/packages/Svelte) - Syntax highlighting and support for Sublime Text.



#### Vim



- [vim-svelte](https://github.com/evanleck/vim-svelte) - Vim syntax highlighting and indentation for Svelte 3 components.

- [vim-svelte-plugin](https://github.com/leafOfTree/vim-svelte-plugin) - Syntax highlighting and support for Vim.

- [coc-svelte](https://github.com/coc-extensions/coc-svelte) - Syntax highlighting and support for (Neo)Vim.



#### JetBrains



- [Svelte](https://plugins.jetbrains.com/plugin/12375-svelte) - Syntax highlighting and support for JetBrains.