Awesome Svelte
⚡ A curated list of awesome Svelte resources
Svelte 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
Official Resources
Conferences
Podcasts
YouTube Channels
Tutorials
Studies
Studies and research on the Svelte framework.
Integrations
Preprocessing
Mobile
UI frameworks for mobile.
- Svelte Native - Svelte controlling native components via Nativescript.
- Framework7 - Full featured HTML framework for building iOS & Android apps.
- Capacitor - Build native mobile apps with web technology and Svelte.
State Libraries
- Svelte-Domain - The state management for svelte.
- svelte-asyncable - The Svelte store contract with support for asynchronous values.
- exome - Simple proxy based state manager for deeply nested states.
UI Libraries
- AgnosticUI - Accessible Svelte Component Primitives (that also work with React, Vue 3, and Angular).
- Flowbite Svelte - Open-source Svelte UI components built with Tailwind CSS and Flowbite.
- Sveltestrap - Bootstrap 4 & 5 components.
- Smelte - UI framework with material components built with Tailwind CSS.
- Svelte Material UI - Material UI Components.
- carbon-components-svelte - Svelte implementation of the IBM Carbon Design System.
- Melt UI - A collection of accessible, reusable, and composable headless component builders and utilities.
- Radix Svelte - An unofficial community-led Svelte port of Radix UI Primitives
- attractions - A pretty cool and modern UI kit
- svelte-chota - Component library built with Chota, a super light-weight CSS framework
- ionic-svelte - Svelte integration with Ionic's UI for mobile app development, including many starters.
- Svelte UI - SvelteUI is an all inclusive Svelte library.
- YeSvelte - YeSvelte is flexible Svelte UI component library built on top of Bootstrap css.
- Skeleton - Skeleton uses Tailwind utility classes and design system to easily create theme-able user interfaces.
- Svelte UX - Large collection of components, actions, stores, and utilities to build highly interactive applications
- STDF - Mobile web component library based on Svelte and Tailwind.
- M3 Svelte - Robust component library implementing Material Design 3
- AgnosUI - Highly configurable headless framework agnostic component library
- daisyUI - 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 - A collection of 20+ Svelte UI components for building fast-performing, interactive and responsive web apps.
UI Components
Table
Tables and data grids.
Notification
Toaster / snackbar - Notify the user with a modeless temporary little popup.
- svelte-notifications - Toast notifications component that can be used in any JS application.
- 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 - Simple elegant toast notifications.
- svelte-french-toast - Buttery smooth toast notifications for Svelte, inspired by React Hot Toast. Lightweight, customizable, and beautiful by default.
- svelte-sonner - An opinionated toast component for Svelte.
Grid
Icons
Calendar
Display non-editable events in a calendar.
Maps
Lets the user create and edit data.
Checkbox
Switch / on/off toggle / checkbox.
Charts
- svelte-frappe-charts - Svelte bindings for frappe-charts.
- Layer Cake - A framework for mostly-reusable graphics with svelte
- LayerChart - Large collection of composable Svelte components to build a wide range of visualizations, built upon Layer Cake
Miscellaneous
Scaffold
Templates / boilerplate / starter kits / stack ensemble / Yeoman generator.
Utilities
Animations
- AutoAnimate - A zero-config, drop-in animation utility that adds smooth transitions to your Svelte app.
- svelte-typewriter - A simple and reusable typewriter effect for your Svelte applications.
- svelte-forms-lib - A lightweight library for managing forms.
- Superforms - SvelteKit library for handling server and client validation, and client-side display of forms.
- felte - Extensible form library, with built-in Yup, Zod, Vest, and Superstruct validation.
- vest - 🦺 Declarative form validation framework inspired by unit testing.
- svelte-formly - A good solution to generate and control a dynamic forms using core and custom rules with customize styles.
- svelte-form-builder - A No-code Drag n Drop Form Builder built for Svelte
- Formsnap - High level Svelte components for forms, built on top of Superforms and Zod.
WebGL
- svelthree - Component library for declarative construction of reactive and reusable three.js scene graphs.
- threlte - Svelte wrapper for three.js
PWA
Portal
- svelte-portal - Component for rendering outside the DOM of parent component.
- svelte-teleport - A component to teleport elements across the DOM.
Fonts
- svelte-web-fonts/google - Tiny component for easily loading Fonts via the Google Fonts API including autocompletion.
Internationalisation
- svelte-fluent - Components for easy integration of Fluent localization.
- svelte-i18n - Internationalization library for Svelte.
- VoerkaI18n - Internationalization solution for
Javascript/Typescript/Vue/React/Solidjs/SvelteJs/ReactNative
- sveltekit-i18n - For integrating i18n style localization in SvelteKit.
- @tolgee/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 - Router adds routing to your Single Page Applications (SPA). Includes localisation, guards and nested layouts.
- svelte-routing - A declarative Svelte routing library with SSR support.
- tinro - A tiny, dependency free and highly declarative router.
- svelte-spa-router - Optimized for Single Page Applications (SPA) with hash based routing and support for parameters.
- svelte-client-router - Svelte Client Router is everything you need and think when routing SPA's.
- @danielsharkov/svelte-router - A simple & easy to use SPA router, developed with page transitions in mind.
- @shaun/svelterouter - Another vue-router inspired Svelte router.
- Elegua - Small (< 180LoC), fast, easy, full featured SPA router
Frameworks
- SvelteKit - The fastest way to build Svelte apps.
- Elder.js - Opinionated static site generator and web framework for Svelte built with SEO in mind.
- Routify - Routes for Svelte, automated by your file structure.
- JungleJS - The Jamstack framework for Svelte with GraphQL.
- svelte-document - Create documents (PDFs), resumes, or presentations entirely in Svelte.
Lint
Lint and format your code.
Docs
Create documentation.
- svelte-docs - A rapid way to write documentation for your Svelte components.
- sveltedoc-parser - Generate a JSON documentation for your component.
- svelte-docster - Generate metadata about your Svelte files from jsdoc.
Test
Editors
Text editor plugins.
Visual Studio Code
Atom
- ide-svelte - Provides syntax highlighting and rich intellisense for your components.
- language-svelte - Provides syntax highlighting for components, directives and other Svelte specific syntax in Atom.
Sublime Text
- Svelte - Syntax highlighting and support for Sublime Text.
Vim
- vim-svelte - Vim syntax highlighting and indentation for Svelte 3 components.
- vim-svelte-plugin - Syntax highlighting and support for Vim.
- coc-svelte - Syntax highlighting and support for (Neo)Vim.
JetBrains
- Svelte - Syntax highlighting and support for JetBrains.