⚡ 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.
- Discord
- Japan Discord - Svelte日本.
- 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.
- Create your blog with SvelteKit - @zhuzilin (Github).
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.
- 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.
UI frameworks for mobile.
- Svelte Native - Svelte controlling native components via Nativescript.
- Framework7 - Full featured HTML framework for building iOS & Android apps.
- AgnosticUI - Accessible Svelte Component Primitives (that also work with React, Vue 3, and Angular).
- Svelte Materialify - A Material UI Design Component library heavily inspired by vuetify.
- 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.
- attractions - A pretty cool and modern UI kit
- svelte-chota - Component library built with Chota, a super light-weight CSS framework
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.
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-grid-responsive - Bootstrap-inspired responsive grid system.
- svelte-flex - A simple and reusable flexbox component for Svelte.
- 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.
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.
- svelte-googlemaps - Google Maps component.
- svelte-mapbox - MapBox map and autocomplete components.
- leaflet-svelte - Svelte wrapper for Leaflet.
Lets the user create and edit data.
Switch / on/off toggle / checkbox.
- svelte-checkbox - A checkbox component (cool animation, customizable).
- svelte-toggle - Basic toggle component with styling.
- svelte-frappe-charts - Svelte bindings for frappe-charts.
- svelte-tree-viewer - A lightweight component to render tree views.
- svelte-copyright - A Svelte component to format and display a copyright notice.
Templates / boilerplate / seed / starter kits / stack ensemble / Yeoman generator.
Render Svelte application in the browser only.
- sveltejs/template - Template for building basic applications with rollup.
- component-template - A base for building shareable components.
- svelte-component-template - A base for building shareable components.
- svelte-pwa-template - A starter template for PWAs based in the official Template.
- svelte-redux-toolkit - A starter template integrating Redux-Toolkit.
- svelte-ts-eslint-prettier-template - Starter template with TS activated, and ESLint and Prettier working together.
- svelte-typescript-jest - Starter template with Typescript activated and Jest working.
SSR framework.
- sapper-template#rollup - The default Sapper template, available for Rollup.
- sapper-template#webpack - The default Sapper template, available for Webpack.
- sapper-firebase-typescript-graphql-tailwindcss-actions-template - Template that includes Sapper, Firebase functions and hosting, TypeScript and TypeGraphQL, Tailwind CSS, ESLint, and automatic building and deployment with GitHub Actions.
- sapper-mdsvex-template - The default Sapper template with mdsvex.
- sapper-tailwindcss-template - The default Sapper template with Tailwind CSS.
- sapper-typescript-graphql-template - Template that includes Sapper, TypeScript preprocessing, and a GraphQL server through TypeGraphQL.
- sapper-start - Sapper Rollup template with opinionated defaults such as SCSS support, shorthand paths, less boilerplate files and more.
- svelte-typewriter - A simple and reusable typewriter effect for your Svelte applications.
- svelte-forms-lib - A lightweight library for managing forms.
- felte - Extensible form library, with built-in Yup, Zod, Vest, and Superstruct validation.
- vest - 🦺 Declarative form validation framework inspired by unit testing.
- svelthree - Component library for declarative construction of reactive and reusable three.js scene graphs.
- svelte-portal - Component for rendering outside the DOM of parent component.
- svelte-teleport - A component to teleport elements across the DOM.
- svelte-web-fonts/google - Tiny component for easily loading Fonts via the Google Fonts API including autocompletion.
- svelte-fluent - Components for easy integration of Fluent localization.
- svelte-i18n - Internationalization library for Svelte.
- 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.
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.
- SvelteKit - The fastest way to build Svelte apps.
- Sapper - The next small thing in web development, powered by Svelte.
- 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.
Lint and format your code.
- eslint-plugin-svelte3 - An ESLint plugin for components.
- prettier-plugin-svelte - Format your components using prettier.
- svelte-check - Check your code.
- eslint-plugin-svelte - An ESLint plugin for Svelte using AST.
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.
- 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.
Text editor plugins.
- 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.
- 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.
- Svelte - Syntax highlighting and support for JetBrains.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent