Awesome Svelte Overview

⚡ A curated list of awesome Svelte resources

🏠 Home · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 TheComputerM/awesome-svelte · ⭐ 1.6K · 🏷️ Front-End Development

[ Daily / Weekly / Overview ]

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 (⭐80k)
• Changelog (⭐80k)

Community

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

Conferences

• Svelte Summit

Podcasts

• Svelte Radio

YouTube Channels

• Svelte Society
• Svelte Mastery

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? (⭐174) - Finding Svelte's inflection point. (pre-v5)

Integrations

Preprocessing

• svelte-preprocess (⭐1.8k) - A preprocessor for PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more.
• MDSveX (⭐2.5k) - Preprocessor for MDX markdown.
• svelte-switch-case (⭐151) - Switch case syntax for Svelte.
• svelte-preprocess-less (⭐13) - Preprocessor for less.
• modular-css (⭐288) - Preprocessor support for modular-css.
• svelte-preprocess-sass (⭐90) - Preprocessor for sass.
• svelte-preprocess-markdown (⭐138) - Write Svelte components in markdown syntax.

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 (⭐169) - The Svelte store contract with support for asynchronous values.
• exome (⭐241) - Simple proxy based state manager for deeply nested states.
• tanstack-store - Framework agnostic type-safe store w/ reactive framework adapters.

UI Libraries

• 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 (⭐155) - Bootstrap 4 & 5 components.
• carbon-components-svelte (⭐2.7k) - Svelte implementation of the IBM Carbon Design System.
• Svelte Material UI (⭐3.3k) - Material UI Components.
• Melt UI (⭐3.8k) - A collection of accessible, reusable, and composable headless component builders and utilities.
• attractions (⭐1k) - A pretty cool and modern UI kit. (pre-v5)
• ionic-svelte (⭐778) - 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 (⭐852) - 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 (⭐275) - 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 (⭐1.5k) - UI framework with material components built with Tailwind CSS. (pre-v5)
• SVAR Core for Svelte (⭐65) - A collection of 20+ Svelte UI components for building fast-performing, interactive and responsive web apps.
• AgnosticUI (⭐725) - Accessible Svelte Component Primitives (that also work with React, Vue 3, and Angular).

UI Components

Table

Tables and data grids.

• @vincjo/datatables (⭐480) - A toolkit for creating datatable components with Svelte.
• svelte-table (⭐537) - A table implementation that allows sorting and filtering.
• svelte-generic-crud-table (⭐67) - Agnostic web-component for object-arrays with CRUD functionality. Sort and resize columns. Multiple tables per page.
• svelte-generic-table-pager (⭐4) - Svelte-generic-crud-table with paginator.
• powertable (⭐220) - 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 (⭐22) - Svelte-based pivot table library with drag'n'drop functionality.

Notification

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

• svelte-notifications (⭐313) - Toast notifications component that can be used in any JS application.
• svelte-favicon-badge (⭐101) - 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 (⭐842) - Simple elegant toast notifications.
• svelte-french-toast (⭐897) - Buttery smooth toast notifications for Svelte, inspired by React Hot Toast. Lightweight, customizable, and beautiful by default.
• svelte-sonner (⭐752) - An opinionated toast component for Svelte.

Grid

• svelte-grid-responsive (⭐54) - Bootstrap-inspired responsive grid system.
• svelte-flex (⭐78) - A simple and reusable flexbox component for Svelte.

Icons

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

Calendar

Display non-editable events in a calendar.

• svelte-fullcalendar (⭐197) - A component wrapper around FullCalendar.
• svelte-calendar (⭐544) - A lightweight datepicker with neat animations and a unique UX.
• date-picker-svelte (⭐321) - A date and time picker for Svelte with clean UX.
• @schedule-x/svelte (⭐1.4k) - A material design event calendar library.

Maps

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

Charts

• svelte-frappe-charts (⭐310) - Svelte bindings for frappe-charts.
• Layer Cake (⭐1.5k) - A framework for mostly-reusable graphics with svelte
• LayerChart (⭐693) - Large collection of composable Svelte components to build a wide range of visualizations, built upon Layer Cake

Miscellaneous

• Svelte Tweakpane UI - UI elements from Tweakpane wrapped in a collection of idiomatic Svelte components.
• svelte-tree-viewer (⭐16) - A lightweight component to render tree views.
• svelte-copyright (⭐16) - A Svelte component to format and display a copyright notice.
• svelte-splitpanes (⭐398) - Full featured resizeable views panels.
• mathjax-svelte (⭐0) - A Svelte component for MathJax.
• svelte-stepper (⭐147) - A Svelte component for building animated step flows.
• css-3d-progress (⭐2) - A 3D Progress Bar component
• svelte-speedometer (⭐17) - Svelte component for showing speedometer like gauge using d3.

Scaffold

Templates / boilerplate / starter kits / stack ensemble / Yeoman generator.

• create-vite (⭐70k) - Generates scaffold for a vite + svelte app.
• create-svelte (⭐19k) - A CLI for creating a new SvelteKit project.
• saasstarter (⭐1.5k) - A open source, fast, and free to host Svelte SaaS template.
• svelte-pwa-template (⭐221) - A starter template for PWAs based in the official Template. (pre-v5)
• vite-svelte-docker-template (⭐1) - Template for Svelte + Docker + Vite + Vitest.
• svelte-docs-starter (⭐12) - A modern documentation template built with Svelte 5, MDSvex, and Tailwind CSS.

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 (⭐1.7k) - 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 (⭐2.6k) - 🦺 Declarative form validation framework inspired by unit testing.
• svelte-formly (⭐254) - A good solution to generate and control a dynamic forms using core and custom rules with customize styles. (pre-v5)
• svelte-form-builder (⭐70) - A No-code Drag n Drop Form Builder built for Svelte

Form Components

Individual form components.

• svelte-checkbox (⭐78) - A checkbox component (cool animation, customizable). (pre-v5)
• svelte-toggle (⭐22) - Basic toggle component with styling. (pre-v5)

HTTP Requests

• sswr (⭐244) - 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".

Sound & Video

• svelte-sound (⭐48) - Svelte Actions to play interaction sounds on target DOM events.

WebGL

• svelthree (⭐485) - 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 (⭐12) - An easy-to-use service worker build plugin where you don't need to worry about cache durations.

Portal

• svelte-portal (⭐445) - Component for rendering outside the DOM of parent component.
• svelte-teleport (⭐25) - A component to teleport elements across the DOM.

Fonts

• svelte-web-fonts/google (⭐16) - Tiny component for easily loading Fonts via the Google Fonts API including autocompletion.

Internationalization

• svelte-fluent (⭐96) - Components for easy integration of Fluent localization.
• svelte-i18n (⭐1.3k) - Internationalization library for Svelte.
• VoerkaI18n - Internationalization solution for Javascript/Typescript/Vue/React/Solidjs/SvelteJs/ReactNative
• sveltekit-i18n (⭐513) - For integrating i18n style localization in SvelteKit.
• @tolgee/svelte (⭐234) - Web-based localization tool enabling users to translate directly in the Svelte app they develop.
• @i18n-pro/svelte (⭐8) - 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 (⭐529) - Router adds routing to your Single Page Applications (SPA). Includes localisation, guards and nested layouts.
• svelte-routing (⭐2k) - A declarative Svelte routing library with SSR support.
• tinro (⭐678) - A tiny, dependency free and highly declarative router.
• svelte-spa-router (⭐1.6k) - Optimized for Single Page Applications (SPA) with hash based routing and support for parameters.
• svelte-client-router (⭐17) - Svelte Client Router is everything you need and think when routing SPA's.
• @danielsharkov/svelte-router (⭐13) - A simple & easy to use SPA router, developed with page transitions in mind.
• @shaun/svelterouter (⭐3) - Another vue-router inspired Svelte router.
• Elegua (⭐80) - Small (< 180LoC), fast, easy, full featured SPA router
• svelte5-router (⭐79) - First Svelte 5 SPA router with nesting, hooks, and more.. Use components, snippets, or both!

Frameworks

• SvelteKit - The fastest way to build Svelte apps.
• Routify - Routes for Svelte, automated by your file structure.
• Elder.js (⭐2.1k) - 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 (⭐9) - Create documents (PDFs), resumes, or presentations entirely in Svelte.

Dev Tools

Lint

Lint and format your code.

• prettier-plugin-svelte (⭐751) - Format your components using prettier.
• svelte-check - Check your code.
• eslint-plugin-svelte (⭐312) - An ESLint plugin for Svelte using AST.

Test

• svelte-jester (⭐128) - A Jest transformer to compile your components before importing them into tests.
• @testing-library/svelte (⭐624) - Simple and complete Svelte DOM testing utilities that encourage good testing practices.
• jest-transform-svelte (⭐35) - 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 (⭐139) - Syntax highlighting and support for Vim.
• coc-svelte (⭐179) - Syntax highlighting and support for (Neo)Vim.

JetBrains

• Svelte - Syntax highlighting and support for JetBrains.