awesome-svelte

⚡ A curated list of awesome Svelte resources
https://github.com/TheComputerM/awesome-svelte

Last synced: 6 days ago
JSON representation

Resources
- Studies
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - SvelteScaling - Does Svelte Scale? _(pre-v5)_
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - Will it Scale? - Finding Svelte's inflection point. _(pre-v5)_
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
  - JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.
- Official Resources
- Community
  - Twitter
  - Discord
  - Reddit
  - Japan Discord - Svelte 日本.
  - Twitter
- Conferences
  - Svelte Summit
- Podcasts
  - Svelte Radio
- YouTube Channels
- Tutorials
  - Getting Started with Svelte 3 - DigitalOcean.
  - Building My First Svelte App - Scotch.io.
  - 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.
  - Mutiple Paid Svelte/Sveltekit tutourials - LevelUpTutourials
  - Mutiple Free Svelte Tutourials - Joy Of Code
  - Mutiple Free Sveltekit Tutourials - Joy Of Code
  - Create your blog with SvelteKit - @zhuzilin (Github).
  - Typescript + Svelte Cheatsheet - An overview of all TypeScript related topics for Svelte and SvelteKit - @ivanhofer (Github).
  - Setup Authentication with AuthJS and Sveltekit 2.0 - @bradcypert (YouTube)
  - Getting Started with Svelte 5: A Guide for React Developers - Edistys
  - Svelte 5 Basics - Complete Svelte 5 Course for Beginners - Syntax (YouTube)
Scaffold
- Miscellaneous
  - create-vite - Generates scaffold for a vite + svelte app.
  - create-svelte - A CLI for creating a new SvelteKit project.
  - 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.
  - component-template - A base for building shareable components.
  - svelte-pwa-template - A starter template for PWAs based in the official Template. _(pre-v5)_
  - svelte-docs-starter - A modern documentation template built with Svelte 5, MDSvex, and Tailwind CSS.
  - saasstarter - A open source, fast, and free to host Svelte SaaS template.
  - template-svelte - An official quickstart template with Phaser.
  - create-svelte - A CLI for creating a new SvelteKit project.
UI Components
- Table
  - svelte-datagrid - Powerful data grid library based on [revogrid](https://rv-grid.com) 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.
  - SVAR DataGrid - A Svelte datagrid with in-cell editing, sorting, context menu, collapsible and frozen columns, tree data view, paging and virtual scrolling.
  - 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.
  - @vincjo/datatables - A toolkit for creating datatable components with Svelte.
  - svelte-pivottable - Svelte-based pivot table library with drag'n'drop functionality.
  - 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.
- Icons
  - svelte-simple-icons - Simple Icons component.
  - svelte-icons - Icon components.
  - svelte-awesome - Awesome SVG icon component, built with Font Awesome icons.
  - 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.
  - svelte-fa - Tiny FontAwesome 5 and 6 component.
  - svelte-icons-pack - Based on <https://github.com/react-icons/react-icons>.
  - lucide-svelte - Implementation of the lucide icon library for svelte applications.
  - unplugin-icons - Access thousands of icons as components on-demand universally.
  - steeze-ui/icons - Effortless Icon Packs & Components for Svelte, React, Vue and more.
  - svesome - A fontawesome v6 icons wrapper for svelte its awesome.
- Maps
  - svelte-googlemaps - Google Maps component.
  - svelte-mapbox - MapBox map and autocomplete components.
  - esri-svelte - Web application that shows how to use the ArcGIS API for JavaScript with Svelte.
  - leaflet-svelte - Svelte wrapper for Leaflet.
  - svelte-maplibre - Svelte bindings for the MapLibre mapping library.
  - svelte-mapbox - MapBox map and autocomplete components.
- Notification
  - 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.
- Charts
  - SVAR Gantt Chart - An interactive, customizable Gantt chart component written in Svelte
  - 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
  - number-flow - A component to transition, format, and localize numbers.
  - svelte-splitpanes - Full featured resizeable views panels.
  - svelte-tree-viewer - A lightweight component to render tree views.
  - svelte-copyright - A Svelte component to format and display a copyright notice.
  - 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 Tweakpane UI - UI elements from [Tweakpane](https://tweakpane.github.io/docs/) wrapped in a collection of idiomatic Svelte components.
  - svelte-speedometer - Svelte component for showing speedometer like gauge using d3.
  - Edra - Best Rich Text Editor, made for Svelte Developers with Tiptap.
  - embedz - Easy, dependency free embeds for Svelte and Vue.
  - svelte-streamdown - Port of [streamdown](https://streamdown.ai/). An all in one markdown renderer optimized for streaming with built in styles, math, mermaid, code highlighting support and more.
- Grid
  - svelte-grid-responsive - Bootstrap-inspired responsive grid system.
  - svelte-flex - A simple and reusable flexbox component for Svelte.
- 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.
- Graphs
  - svelte-flow - A customizable Svelte component for building node-based editors and interactive diagrams by the creators of React Flow
Routers
- Internationalization
  - @wjfe/n-savant - Fast, reactive router with always-on path and hash routing, and the router that invented multi-hash routing.
  - @danielsharkov/svelte-router - A simple & easy to use SPA router, developed with page transitions in mind.
  - 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.
  - Elegua - Small (< 180LoC), fast, easy, full featured SPA router
  - sv-router - Type-safe SPA router with file-based or code-based routing.
  - svelte5-router - First Svelte 5 SPA router with nesting, hooks, and more.. Use components, snippets, or both!
- Internationalisation
  - @shaun/svelterouter - Another vue-router inspired Svelte router.
Utilities
- Forms
  - felte - Extensible form library, with built-in Yup, Zod, Vest, and Superstruct validation.
  - svelte-checkbox - A checkbox component (cool animation, customizable). _(pre-v5)_
  - vest - 🦺 Declarative form validation framework inspired by unit testing.
  - Formsnap - High level Svelte components for forms, built on top of Superforms and Zod.
  - 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
  - svelte-formly - A good solution to generate and control a dynamic forms using core and custom rules with customize styles.
  - Superforms - SvelteKit library for handling server and client validation, and client-side display of forms.
  - svelte-forms-lib - A lightweight library for managing forms.
  - Formsnap - High level Svelte components for forms, built on top of Superforms and Zod.
- WebGL
  - threlte - Svelte wrapper for three.js
  - svelthree - Component library for declarative construction of reactive and reusable three.js scene graphs.
- 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. 🧡
- 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
  - sveltekit-i18n - For integrating [i18n](https://www.npmjs.com/package/i18n) style localization in SvelteKit.
- Internationalization
  - VoerkaI18n - Internationalization solution for `Javascript/Typescript/Vue/React/Solidjs/SvelteJs/ReactNative`
  - @i18n-pro/svelte - Lightweight, simple, flexible, automatic translation internationalization tool for Svelte.
  - ParaglideJS - Tiny, typesafe i18n library with translated links out of the box.
  - svelte-fluent - Components for easy integration of [Fluent](https://projectfluent.org/) localization.
  - svelte-i18n - Internationalization library for Svelte.
  - @tolgee/svelte - Web-based localization tool enabling users to translate directly in the Svelte app they develop.
  - ParaglideJS - Tiny, typesafe i18n library with translated links out of the box.
- Drag & Drop
  - neodrag - One Draggable to rule them all 💍.
- 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.
Integrations
- Preprocessing
  - modular-css - Preprocessor support for modular-css.
  - 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.
  - 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.
  - @nvl/sveltex - Svelte + Markdown + LaTeX.
- 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.
  - Svelte Native - Svelte controlling native components via Nativescript.
UI Libraries
- Mobile
  - Flowbite Svelte - Open-source Svelte UI components built with Tailwind CSS and Flowbite.
  - carbon-components-svelte - Svelte implementation of the IBM Carbon Design System.
  - Svelte UI - SvelteUI is an all inclusive Svelte library.
  - YeSvelte - YeSvelte is flexible Svelte UI component library built on top of Bootstrap css.
  - STDF - Mobile web component library based on Svelte and Tailwind.
  - attractions - A pretty cool and modern UI kit. _(pre-v5)_
  - Smelte - UI framework with material components built with Tailwind CSS. _(pre-v5)_
  - AgnosticUI - Accessible Svelte Component Primitives (that also work with React, Vue 3, and Angular).
  - Sveltestrap - Bootstrap 4 & 5 components.
  - Svelte Material UI - Material UI Components.
  - 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
  - ionic-svelte - Svelte integration with Ionic's UI for mobile app development, including many starters.
  - Svelte UX - Large collection of components, actions, stores, and utilities to build highly interactive applications
  - M3 Svelte - Robust component library implementing Material Design 3
  - SVAR Core for Svelte - A collection of 20+ Svelte UI components for building fast-performing, interactive and responsive web apps.
  - 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.
  - shadcn-svelte - Beautifully designed components that you can copy and paste into your apps.
  - SvelteUI - all inclusive Svelte library - Components, Actions, Utilities, Animations.
  - Sveltestrap - Bootstrap 4 & 5 components.
  - svelte-chota - Component library built with Chota, a super light-weight CSS framework
  - AgnosUI - Highly configurable headless framework agnostic component library
  - lomer-ui - A dead-simple CLI tool to instantly kickstart your components.
  - Quaff - An extensive UI framework featuring modern and elegant components following Material Design 3 principles.
  - lomer-ui - A dead-simple CLI tool to instantly kickstart your components.
  - 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.
  - carbon-components-svelte - Svelte implementation of the IBM Carbon Design System.
  - retroui-svelte - A retro-styled component library for Svelte built on top of shadcn-svelte, offering 40+ customizable UI components for funky and playful interfaces.
Frameworks
- Internationalization
  - 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)_
  - SvelteKit - The fastest way to build Svelte apps.
  - JungleJS - The Jamstack framework for Svelte with GraphQL. _(pre-v5)_
- Internationalisation
  - Elder.js - Opinionated static site generator and web framework for Svelte built with SEO in mind.
  - svelte-document - Create documents (PDFs), resumes, or presentations entirely in Svelte.
Dev Tools
- Lint
  - svelte-check - Check your code.
  - eslint-plugin-svelte - An ESLint plugin for Svelte using AST.
  - prettier-plugin-svelte - Format your components using prettier.
  - eslint-plugin-svelte - An ESLint plugin for Svelte using AST.
- Editors
  - Svelte for VS Code - Provides syntax highlighting and rich intellisense for your components.
  - Svelte 3 Snippets - Svelte 3 Snippets for VS Code.
  - 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.
  - Svelte - Syntax highlighting and support for Sublime Text.
  - Svelte - Syntax highlighting and support for JetBrains.
  - 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.
- Docs
  - svelte-docs - A rapid way to write documentation for your Svelte components.
  - svelte-docster - Generate metadata about your Svelte files from jsdoc.
- Test
  - @testing-library/svelte - Simple and complete Svelte DOM testing utilities that encourage good testing practices.
  - jest-transform-svelte - Jest Transformer for Svelte components.
- 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.
State Libraries
- Mobile
  - 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.
  - tanstack-store - Framework agnostic type-safe store w/ reactive framework adapters.
Application Examples
- Desktop
  - Oxide-Lab - Privacy-focused local LLM chat application built with Svelte 5 frontend and Rust backend using the `candle` ML framework.

Programming Languages

Svelte 44 TypeScript 41 JavaScript 26 HTML 4 Vim Script 2 CSS 1

awesome-svelte

Resources

Studies

Official Resources

Community

Conferences

Podcasts

YouTube Channels

Tutorials

Scaffold

Miscellaneous

UI Components

Table

Icons

Maps

Notification

Charts

Miscellaneous

Grid

Calendar

Graphs

Routers

Internationalization

Internationalisation

Utilities

Forms

Form

WebGL

Animations

PWA

Portal

Fonts

Internationalisation

Internationalization

Drag & Drop

HTTP Requests

Sound & Video

Integrations

Preprocessing

Mobile

UI Libraries

Mobile

Frameworks

Internationalization

Internationalisation

Dev Tools

Lint

Editors

Docs

Test

Adapters

State Libraries

Mobile

Application Examples

Desktop