# 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

- Awesome Svelte
  - Contents
  - Resources
    - Official Resources
    - Community
    - Conferences
    - Podcasts
    - YouTube Channels
    - Tutorials
    - Studies
  - Integrations
    - Preprocessing
    - Mobile
  - State Libraries
  - UI Libraries
  - UI Components
    - Table
    - Notification
    - Grid
    - Icons
    - Calendar
    - Maps
    - Charts
    - Miscellaneous
  - Scaffold
  - Utilities
    - Animations
    - Drag & Drop
    - Forms
      - Form Components
    - HTTP Requests
    - Sound & Video
    - WebGL
    - PWA
    - Portal
    - Fonts
    - Internationalization
  - Routers
  - Frameworks
  - Dev Tools
    - Lint
    - Test
    - Editors
      - Visual Studio Code
      - Sublime Text
      - Vim
      - JetBrains

## Resources

### Official Resources

- Official Guide
- API Reference
- GitHub Repo
- Changelog

### Community

- Twitter
- Discord
- Reddit
- Japan Discord - Svelte 日本.

### Conferences

- Svelte Summit

### Podcasts

- Svelte Radio

### YouTube Channels

- Svelte Society
- Svelte Mastery
- Joy of Code

### Tutorials

- Getting Started with Svelte 5: A Guide for React Developers - Edistys
- Svelte 5 Basics - Complete Svelte 5 Course for Beginners - Syntax (YouTube)

### Studies

Studies and research on the Svelte framework.

- SvelteScaling - Does Svelte Scale? (pre-v5)
- Will it Scale? - Finding Svelte’s inflection point. (pre-v5)

## Integrations

### Preprocessing

- svelte-preprocess - A preprocessor for PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more.
- MDSveX - Preprocessor for MDX markdown.
- svelte-switch-case - Switch case syntax for Svelte.
- svelte-preprocess-less - Preprocessor for less.
- modular-css - Preprocessor support for modular-css.
- svelte-preprocess-sass - Preprocessor for sass.
- svelte-preprocess-markdown - Write Svelte components in markdown syntax.
- @nvl/sveltex - Svelte + Markdown + LaTeX.

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

- svelte-grid-responsive - Bootstrap-inspired responsive grid system.
- svelte-flex - A simple and reusable flexbox component for Svelte.

### Icons

- unplugin-icons - Access thousands of icons as components on-demand universally.
- svelte-fa - Tiny FontAwesome 5 and 6 component.
- svelte-awesome - Awesome SVG icon component, built with Font Awesome icons.
- steeze-ui/icons - Effortless Icon Packs & Components for Svelte, React, Vue and more.
- svelte-icons - Icon components.
- svelte-heroicons - Icons, crafted by the creators of Tailwind CSS.
- svelte-icomoon - It makes it very simple to use SVG icons in your Svelte projects.
- svelte-unicons - Unicons svg icons for Svelte based on @iconscout/unicons.
- lucide-svelte - Implementation of the lucide icon library for svelte applications.
- svelte-icons-pack - Based on https://github.com/react-icons/react-icons.
- svesome - A fontawesome v6 icons wrapper for svelte its awesome.
- moving icons - A collection of beautifully crafted, animated Lucide icons.

### Calendar

Display non-editable events in a calendar.

- svelte-fullcalendar - A component wrapper around FullCalendar.
- svelte-calendar - A lightweight datepicker with neat animations and a unique UX.
- date-picker-svelte - A date and time picker for Svelte with clean UX.
- @schedule-x/svelte - A material design event calendar library.

### Maps

- svelte-googlemaps - Google Maps component.
- svelte-mapbox - MapBox map and autocomplete components.
- leaflet-svelte - Svelte wrapper for Leaflet.
- esri-svelte - Web application that shows how to use the ArcGIS API for JavaScript with Svelte.
- svelte-maplibre - Svelte bindings for the MapLibre mapping library.

### 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

### Graphs

- svelte-flow - A customizable Svelte component for building node-based editors and interactive diagrams by the creators of React Flow

### Miscellaneous

- Svelte Tweakpane UI - UI elements from Tweakpane wrapped in a collection of idiomatic Svelte components.
- svelte-tree-viewer - A lightweight component to render tree views.
- svelte-copyright - A Svelte component to format and display a copyright notice.
- svelte-splitpanes - Full featured resizeable views panels.
- mathjax-svelte - A Svelte component for MathJax.
- svelte-stepper - A Svelte component for building animated step flows.
- css-3d-progress - A 3D Progress Bar component
- svelte-speedometer - Svelte component for showing speedometer like gauge using d3.
- embedz - Easy, dependency free embeds for Svelte and Vue.
- Edra - Best Rich Text Editor, made for Svelte Developers with Tiptap.

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

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

### Drag & Drop

- neodrag - One Draggable to rule them all 💍.

### Forms

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

#### Form Components

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

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

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

## Dev Tools

### Lint

Lint and format your code.

- prettier-plugin-svelte - Format your components using prettier.
- svelte-check - Check your code.
- eslint-plugin-svelte - An ESLint plugin for Svelte using AST.

### Test

- svelte-jester - A Jest transformer to compile your components before importing them into tests.
- @testing-library/svelte - Simple and complete Svelte DOM testing utilities that encourage good testing practices.
- jest-transform-svelte - Jest Transformer for Svelte components.

### Editors

Text editor plugins.

#### Visual Studio Code

- Svelte for VS Code - Provides syntax highlighting and rich intellisense for your components.
- Svelte 3 Snippets - Svelte 3 Snippets for VS Code.

#### Sublime Text

- Svelte - Syntax highlighting and support for Sublime Text.

#### Vim

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

svelte.md Github