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-asyncable - The Svelte store contract with support for asynchronous values.
exome - Simple proxy based state manager for deeply nested states.
tanstack-store - Framework agnostic type-safe store w/ reactive framework adapters.
UI Libraries
- lomer-ui - A dead-simple CLI tool to instantly kickstart your components.
- shadcn-svelte - Beautifully designed components that you can copy and paste into your apps.
- SvelteUI - all inclusive Svelte library - Components, Actions, Utilities, Animations.
- Flowbite Svelte - Open-source Svelte UI components built with Tailwind CSS and Flowbite.
- Skeleton - Skeleton uses Tailwind utility classes and design system to easily create theme-able user interfaces.
- Sveltestrap - Bootstrap 4 & 5 components.
- carbon-components-svelte - Svelte implementation of the IBM Carbon Design System.
- Svelte Material UI - Material UI Components.
- Melt UI - A collection of accessible, reusable, and composable headless component builders and utilities.
- attractions - A pretty cool and modern UI kit. (pre-v5)
- ionic-svelte - Svelte integration with Ionic's UI for mobile app development, including many starters.
- YeSvelte - YeSvelte is flexible Svelte UI component library built on top of Bootstrap css.
- 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.
- Smelte - UI framework with material components built with Tailwind CSS. (pre-v5)
- SVAR Core for Svelte - A collection of 20+ Svelte UI components for building fast-performing, interactive and responsive web apps.
- AgnosticUI - Accessible Svelte Component Primitives (that also work with React, Vue 3, and Angular).
- Svelte Animations - Consist of Svelte Magic UI, Svelte Aceternity UI, Svelte Luxe Components over 200+ Free Animation Components & 2 Templates
- Svelte Marketing Blocks - A powerful library of 100+ marketing and UI blocks built using Shadcn Svelte, Tailwind CSS v4, and Svelte 5.
- Quaff - An extensive UI framework featuring modern and elegant components following Material Design 3 principles.
UI Components
Table
Tables and data grids.
- @vincjo/datatables - A toolkit for creating datatable components with Svelte.
- svelte-table - A table implementation that allows sorting and filtering.
- 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 - Svelte-generic-crud-table with paginator.
- 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.
- svelte-pivottable - Svelte-based pivot table library with drag'n'drop functionality.
- SVAR DataGrid - A Svelte datagrid with in-cell editing, sorting, context menu, collapsible and frozen columns, tree data view, paging and virtual scrolling.
- svelte-datagrid - Powerful data grid library based on revogrid with best features from Excel.
- @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.
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
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
- SVAR Gantt Chart - An interactive, customizable Gantt chart component written in Svelte
Graphs
- svelte-flow - A customizable Svelte component for building node-based editors and interactive diagrams by the creators of React Flow
Miscellaneous
Scaffold
Templates / boilerplate / starter kits / stack ensemble / Yeoman generator.
- create-vite - Generates scaffold for a vite + svelte app.
- create-svelte - A CLI for creating a new SvelteKit project.
- saasstarter - A open source, fast, and free to host Svelte SaaS template.
- svelte-pwa-template - A starter template for PWAs based in the official Template. (pre-v5)
- vite-svelte-docker-template - Template for Svelte + Docker + Vite + Vitest.
- svelte-docs-starter - A modern documentation template built with Svelte 5, MDSvex, and Tailwind CSS.
- template-svelte - An official quickstart template with Phaser.
- generic-app-template - A open-source modern full-stack web application template built with SvelteKit + shadcn-svelte. Supports i18n, theming, cookie managment, SEO management, static content with mdsvex, a shell component and more.
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.
- moving-icons - beautifully crafted, moving icons. for svelte. 🧡
Drag & Drop
- Superforms - SvelteKit library for handling server and client validation, and client-side display of forms.
- Formsnap - High level Svelte components for forms, built on top of Superforms and Zod.
- 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. (pre-v5)
- svelte-form-builder - A No-code Drag n Drop Form Builder built for Svelte.
- Svelte Form Builder - Create forms with Shadcn Svelte, Superforms and ZOD | Valibot Schema within minutes.
Individual form components.
- svelte-checkbox - A checkbox component (cool animation, customizable). (pre-v5)
- svelte-toggle - Basic toggle component with styling. (pre-v5)
HTTP Requests
- sswr - Svelte stale while revalidate (SWR) data fetching strategy.
- svelte-query - Fetch, cache and update data in your Svelte applications all without touching any "global state".
- tanstack-svelte-query - Framework agnostic type-safe query and mutation library for Svelte.
Sound & Video
- svelte-sound - Svelte Actions to play interaction sounds on target DOM events.
WebGL
- svelthree - Component library for declarative construction of reactive and reusable three.js scene graphs.
- threlte - Threlte is a renderer and component library for using Three.js in a declarative and state-driven way in Svelte apps.
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.
Internationalization
- 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.
- @i18n-pro/svelte - Lightweight, simple, flexible, automatic translation internationalization tool for Svelte.
- ParaglideJS - Tiny, typesafe i18n library with translated links out of the box.
- wuchale - Internationalization library that lets you just write your code, no function calls or other ceremonies needed.
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
- svelte5-router - First Svelte 5 SPA router with nesting, hooks, and more.. Use components, snippets, or both!
- @wjfe/n-savant - Fast, reactive router with always-on path and hash routing, and the router that invented multi-hash routing.
- sv-router - Type-safe SPA router with file-based or code-based routing.
Frameworks
- SvelteKit - The fastest way to build Svelte apps.
- Routify - Routes for Svelte, automated by your file structure.
- Elder.js - Opinionated static site generator and web framework for Svelte built with SEO in mind. (pre-v5)
- JungleJS - The Jamstack framework for Svelte with GraphQL. (pre-v5)
- svelte-document - Create documents (PDFs), resumes, or presentations entirely in Svelte.
Adapters
- JesterKit EXE - An adapter to distribute your SvelteKit web app as a single executable binary with zero runtime dependencies. Unlike static builds, it preserves all Kit features like SSR, API endpoints, server hooks, etc.
Lint
Lint and format your code.
Test
Editors
Text editor plugins.
Visual Studio Code
Sublime Text
- Svelte - Syntax highlighting and support for Sublime Text.
Vim
JetBrains
- Svelte - Syntax highlighting and support for JetBrains.