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
  • Community
  • Conferences
  • Podcasts
  • YouTube Channels
  • Tutorials
  • Studies
• Integrations
  • Preprocessing
  • Mobile
• UI Libraries
• UI Components
  • Table
  • Notification
  • Grid
  • Icons
  • Calendar
  • Maps
  • Form
  • Charts
  • Miscellaneous
• Scaffold
  • Client
  • Universal
• Utilities
  • Animations
  • Form
  • WebGL
  • PWA
  • Portal
  • Fonts
  • Internationalisation
• Routers
• Frameworks
• Dev Tools
  • Lint
  • Docs
  • Test
  • Editors

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

Tutorials

• Getting Started with Svelte 3 - DigitalOcean.
• Develop a complete application with Svelte and TypeScript - MDN Web Docs.
• An Introduction to Actions - Svelte School.
• Svelte Tutorial for Beginners - The Net Ninja (YouTube).
• Sapper Tutorial (Crash Course) - The Net Ninja (YouTube).
• SvelteJS Series - tutorials and talks - SpinSpire (YouTube).
• Svelte Stores - @lihautan (YouTube).
• Svelte Actions - @lihautan (YouTube).
• Svelte 101 - @lihautan (YouTube).
• Learn Svelte by building a habit tracker app - RadDevon.
• Meet Svelte 3, a Powerful, Even Radical JavaScript Framework - SitePoint, by Chrome DevTools engineer @Jack_Franklin.
• Create your blog with SvelteKit - @zhuzilin (Github).
• Typescript + Svelte Cheatsheet - An overview of all TypeScript related topics for Svelte and SvelteKit - @ivanhofer (Github).
• Mutiple Paid Svelte/Sveltekit tutourials - LevelUpTutourials
• Mutiple Free Svelte Tutourials - Joy Of Code
• Mutiple Free Sveltekit Tutourials - Joy Of Code
• Setup Authentication with AuthJS and Sveltekit 2.0 - @bradcypert (YouTube)

Studies

Studies and research on the Svelte framework.

• SvelteScaling - Does Svelte Scale?
• Will it Scale? - Finding Svelte’s inflection point.
• JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.

Integrations

Preprocessing

• svelte-preprocess - A preprocessor for PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more.
• MDSveX - Preprocessor for MDX markdown.
• svelte-preprocess-markdown - Write Svelte components in markdown syntax.
• svelte-preprocess-less - Preprocessor for less.
• modular-css - Preprocessor support for modular-css.
• svelte-preprocess-postcss - Use PostCSS to preprocess your styles in Svelte components.
• svelte-preprocess-sass - Preprocessor for sass.
• svelte-switch-case - Switch case syntax for Svelte.

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

UI Components

Table

Tables and data grids.

• svelte-simple-datatables - A Datatable component for 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.

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

• svelte-fa - Tiny FontAwesome 5 component.
• svelte-simple-icons - Simple Icons component.
• svelte-awesome - Awesome SVG icon component, built with Font Awesome icons.
• 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.

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.

Maps

• svelte-googlemaps - Google Maps component.
• svelte-mapbox - MapBox map and autocomplete components.
• leaflet-svelte - Svelte wrapper for Leaflet.

Form

Lets the user create and edit data.

Checkbox

Switch / on/off toggle / checkbox.

• svelte-checkbox - A checkbox component (cool animation, customizable).
• svelte-toggle - Basic toggle component with styling.

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

• 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

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.
• component-template - A base for building shareable components.
• svelte-pwa-template - A starter template for PWAs based in the official Template.

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.

Form

• 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

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

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.

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.

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

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

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.