awesome Svelte resources

useful resources for Svelte v3+

- deprecated for svelte-society/sveltesociety.dev

⚠️ important ⚠️ go to svelte-society/sveltesociety.dev instead

The official successor to this project, svelte-society/sveltesociety.dev, is live at sveltesociety.dev. Please direct your submissions there instead of here. <3

See also awesome-svelte and other awesome lists.

contents

• official links
  • language translations
• communities 🌇
  • Telegram chat rooms
• integrations
  • bundler plugins
  • preprocessors
  • cli tools
  • editor tools
• web app frameworks
• templates
  • electron templates
  • mobile templates
• testing
• components and libraries
  • routers
  • ui component sets
  • web component sets
  • layout and structure
  • inputs and widgets
  • fonts and icons
  • forms and validation
  • animation
  • images
  • charts
  • time and date
  • notifications
  • maps
  • internationalization
  • stores and state
  • interaction
  • async loading
  • social and other 3rd party services
  • development and documentation
  • syntax highlighting
  • other components and libraries
• native
• experiments
• example app showcase
• media
  • talks
  • podcasts and other videos
• other lists and resources

notes

• See contributing.md for submission info.
• Needs more links. Send pulls and issues!
• Many project descriptions could be updated, clarified, expanded, etc.
• If a project fails to meet acceptable quality standards, please open an issue or PR to discuss removing it.

official links

• svelte.dev
  • Tutorial
  • API docs
  • Examples
  • REPL
    • your saved apps
  • Blog
  • FAQ
  • Discord chat
• svelte_@sveltejs - Cybernetically enhanced web apps
• sapper_@sveltejs - Military-grade progressive web apps, powered by Svelte
• integrations_@sveltejs - Ways to incorporate Svelte into your stack
• branding_@sveltejs - Logos etc for Svelte and related projects
• rfcs_@sveltejs - RFCs for changes to Svelte
• community_@sveltejs - A repo for data relating to the Svelte community and events

language translations

Internationalized versions of the official Svelte website.

• Russian - ru.svelte.dev - translation repo

communities

Join in! 🌇 See sveltejs/community for the official data relating to the Svelte community and events.

• official Discord chat
• @sveltejs on Twitter
• Meetup groups and more at sveltejs/community
• unofficial subreddit /r/sveltejs

Telegram chat rooms

• 🇷🇺 Svelte [svelt] (1000+ users)
• 🇷🇺 Svelte [svelt] Public
• 🇷🇺 Svelte [svelt] Jobs

integrations

The official list of integrations is sveltejs/integrations. Look there first - they're mostly not duplicated here. Maybe they should be?

bundler plugins

• svelte-loader_@sveltejs - Webpack loader for Svelte components
• rollup-plugin-svelte_@rollup - Compile Svelte components with Rollup
• more at the official integrations repo

preprocessors

• svelte-preprocess_@kaisermann - A Svelte preprocessor with baked in support for common preprocessors
• mdsvex_@pngwn - A markdown preprocessor for Svelte
• svelte-preprocess-markdown_@AlexxNB - Write Svelte components in markdown syntax
• svelte-ts-preprocess_@PaulMaly - Typescript preprocessor for Svelte 3
• @pyoner/svelte-ts-preprocess_@pyoner - Typescript monorepo for Svelte v3 (preprocess, template, types)
• svelte-preprocess-postcss_@TehShrike - PostCSS preprocessor
• svelte-preprocess-sass_@ls-age - SASS/SCSS preprocessor
• svelte-preprocess-less_@ls-age - LESS preprocessor
• @modular-css/svelte_@modular-css - modular-css preprocessor
• see also the official list

Some components are bundled with specific preprocessors that they rely on; those projects are listed under components and libraries.

cli tools

• @pwa/cli_@lukeed - Universal PWA Builder (WIP)
• baelte_{@kennethlarsen} - CLI tool for svelte to help you be productive
• svb_{@himynameisdave} - A zero-config CLI to bundle Svelte apps (WIP)

editor tools

• svelte-vscode_{@UnwrittenFun} - Svelte language support for VS Code
• vim-svelte_@evanleck - Svelte JavaScript syntax highlighting for vim
• vim-svelte-plugin_@leafOfTree - Vim syntax and indent plugin for .svelte files
• vim-svelte_@burner - Vim syntax and indent plugin for .svelte files
• svelte-intellij_@tomblachut - Provides syntax highlighting of Svelte components in WebStorm and friends
• svelte-language-server_{@UnwrittenFun} - A WIP language server for Svelte
• vscode-svelte-component-extractor_{@proverbial-ninja} - Creates a new Svelte component from higlighted text
• coc-svelte_{@coc-extensions} - Svelte support for (Neo)Vim

web app frameworks

• sapper_@sveltejs - Military-grade progressive web apps, powered by Svelte

templates

To avoid downloading a template's git history, installation via degit is recommended:

npx degit sveltejs/template svelte-app

• sveltejs/template - Template for building basic applications with Svelte with rollup
• sveltejs/template-webpack - Template for building basic Svelte applications with webpack
• sveltejs/component-template - A base for building shareable Svelte components
• sveltejs/template-custom-element - Template for building basic applications with Svelte and custom elements
• sveltejs/sapper-template - Starter template for Sapper apps
• pyoner/svelte-typescript - Typescript monorepo for Svelte v3 (preprocess, template, types)
• Axelen123/svelte-ts-template - Typescript template for Svelte v3
• Shyam-Chen/svelte-play - A boilerplate with Material, Babel, PostCSS, and Webpack
• Holben888/svelte-starter-template - A small starter template to get up and running with Svelte v3
• marcograhl/tailwindcss-svelte-starter - Tailwindcss v1 + Svelte v3 = <3
• muhajirdev/svelte-tailwind-template - Svelte + Tailwind = ❤
• fabiohvp/svelte-template - Svelte with materializecss + tailwindcss
• justinekizhak/svelte-tailwind-template - SvelteJS and TailwindCSS template
• geakstr/svelte-3-rollup-typescript-vscode - Starter for Svelte 3/rollup/typescript/vscode
• jorgegorka/svelte-firebase - A template to help you start developing SPAs with Svelte and Firebase
• ricalamino/svelte-firebase-auth - Svelte App with Firebase Authentication for all purposes
• YogliB/svelte-component-template - A base for building shareable Svelte 3 components
• neighbourhoodie/svelte-pouchdb-couchdb - Offline-Capable todo list built with Svelte, PouchDB and CouchDB
• OrdinaryJellyfish/svelte-routing-template - Svelte webpack template with routing and lazy-loading
• angelozehr/svelte-example-museums - An example repo of a Svelte app that is IE11 compatible
• pankod/svelte-boilerplate - Svelte application boilerplate with Webpack, Sass, BabelJS, Fetch, PostCSS, Jest, and .Env
• pbastowski/svelte-poi-starter - Svelte 3 starter with POI 12 and Prettier. Outputs web apps or web components
• soapdog/svelte-template-browserify - A Svelte template for browserify
• antony/svelte-box - A truffle box for Svelte, a seed for building an Ethereum dapp using Truffle
• spaceavocado/svelte-router-template - Boilerplate template project for SPA router spaceavocado/svelte-router
• beyonk-adventures/svelte-component-livereload-template - Component template with LiveReload and Jest unit testing
• patoi/svelte-component-library-template - A base for building Svelte component library
• brandonxiang/svelte-webpack-mpa - A template to create multi-page application powered by Webpack
• jerriclynsjohn/svelte-storybook-tailwind - Svelte + Storybook + Tailwind - Starter Template
• farhan2106/svelte-typescript - Typescript + Storybook + Webpack boilerplate
• farhan2106/svelte-typescript-ssr - Typescript + Storybook + Webpack with SSR boilerplate
• n0th1ng-else/svelte-typescript-sass - Boilerplate code with Typescript and Sass bundled by Webpack
• stephanepericat/svelte-boilerplate - Boilerplate with Webpack, Cypress, Travis CI, Storybook, and SASS
• will-wow/svelte-typescript-template - Template with TypeScript, Babel, Jest, Svelte-Testing-Library, Eslint, and Prettier
• tonyrewin/svelte3-ts-boilerplate - Starter pack for Rollup, Typescript, and VSCode
• devghost/svelte - Skeleton app with Parcel, Jest, ESLint, Prettier, Babel, Wallaby
• SteveALee/svelte-code-cypress-project - Template with VSCode, Prettier, ESLint, Cypress, and Rollup
• rixo/svelte-template-hot - Clone of official Svelte template with added HMR support using Nollup
• agusID/boilerplate-svelte - Boilerplate with TypeScript, Webpack, Storybook, Travis CI, SCSS, Babel, EsLint, Prettier, Jest
• LunaTK/svelte-web-component-builder - Minimal setup for building svelte as a web component module
• nitro52/svelte-typescript-sass-template - Typescript, Sass, Storybook, Webpack
• pngwn/svelte-react-template - React via svelte-adapter, Rollup, Babel
• hmmhmmhm/svelte-template - Typescript, Parcel, Express
• hmmhmmhm/svelte-spa-template - Typescript, Parcel, Express for single page apps

electron templates

• Rich-Harris/svelte-template-electron - A template for building Electron apps with Svelte (VERSION 2)
• Blade67/Sveltron - Electron Svelte boilerplate
• chuanqisun/svelte-electron-template - The bare minimum boilerplate to use Svelte in electron

mobile templates

• syonip/svelte-cordova - Starter template for Cordova featuring hot reload
• lpshanley/svelte-phonegap - Template for building phonegap hybrid applications with Svelte

testing

• @testing-library/svelte_{@testing-library} - Simple and complete DOM testing utilities that encourage good practices
• jest-transform-svelte_@rspieker - Jest Transformer for Svelte components
• svelte-test_@pngwn - Testing utilities for Svelte
• storybookjs_@storybook - UI component dev & test
• svelte-jest_@ktsn - Jest Svelte component transformer

components and libraries

If you have any submissions, updates, or ideas to improve this list of links, please feel free to open an issue or PR.

routers

See the FAQ for some good info about Svelte routing solutions.

Sapper touts a filesystem-based routing solution along with a full app framework.

• svelte-routing_@EmilTholin - A declarative Svelte routing library with SSR support
• svelte-state-renderer_@TehShrike - abstract-state-router renderer for Svelte
• svelte-spa-router_{@ItalyPaleAle} - Router for SPAs using Svelte 3
• svero_@kazzkiq - A simple router for Svelte 3
• swheel_@qutran - Ultimate Svelte router
• @jamen/svelte-router_@jamen - Svelte router using a store and components
• svelte-hash-router_@pynnl - Simple Svelte 3 hash based router with global routes
• svelte-easyroute_{@lyohaplotinka} - Easy router for Svelte framework
• svelte-router-spa_@jorgegorka - Svelte router specially designed for Single Page Applications (SPA)
• @spaceavocado/svelte-router_{@spaceavocado} - Simple Svelte Router for Single Page Applications (SPA)
• svelte-page-router_@PaulMaly - Simple config-based router with DX similar to VueRouter. Works well on the server-side
• svelte-router_@jikkai - Router component for Svelte
• svelte-navaid_@jacwright - A Svelte router powered by lukeed/navaid
• @slick-for/svelte_@shavyg2 - Manage your views and routing using class decorators and dependency injection
• crayon-svelte_@alshdavid - Framework agnostic UI router for SPAs with specific support for Svelte
• svelte-filerouter_{@jakobrosenberg} - Filesystem-based router inspired by Sapper's routing
• yrv_{@pateketrueke} - Basic router with queryParams and hash-based routing support
• routify_@sveltech - Routes automated by your file structure

ui component sets

• carbon-components-svelte_@IBM - Svelte implementation of the Carbon Design System
• svelma_@c0bra - Bulma components for Svelte
• smelte_@matyunya - Material design components for Svelte using Tailwind CSS
• svelte-toolbox_{@svelte-toolbox} - A UI component library for Svelte implementing Google's Material Design specification
• svelte-material-ui_@hperrin - Svelte Material UI Components
• svelteify_@exybore - Material components library for Svelte using the stylesheet of Vuetify
• sveltemantic_@titans-inc - Fomantic-UI components for Svelte 3
• sveltestrap_@bestguy - Bootstrap 4 components for Svelte
• svelte-ui_@vikignt - Simple Svelte 3 UI components
• svmd_@hkh12 - Easy-to-use, Customizable Material Design components for Svelte
• svelte-chota_@AlexxNB - Svelte UI components based on super lightweight chota CSS framework.
• svelte-mui_@vikignt - Simple Svelte UI components inspired by Google's Material Design

web component sets

• @zooplus/zoo-web-components_@zooplus - Web-components library built with Svelte

layout and structure

• @sveltejs/svelte-virtual-list_@sveltejs - A virtual list component for Svelte apps
• @sveltejs/svelte-scroller_@sveltejs - A <Scroller> component for Svelte apps
• @sveltejs/svelte-subdivide_@sveltejs - A component for building Blender-style layouts in Svelte apps (VERSION 2)
• svelte-grid_@vaheqelyan - A responsive, draggable and resizable grid layout, for Svelte
• svelte-sortable-list_{@brunomolteni} - A list with animated drag-n-drop functionality
• @beyonk/svelte-carousel_{@beyonk-adventures} - A super lightweight, super simple carousel for Svelte 3
• multicarousel_@sciactive - A dependency free multiple item JavaScript carousel
• svelte-swipe_@SharifClick - Swipable items wrapper (no dependencies)
• svelte-tabs_@joeattardi - Tabs component for Svelte
• svelte-media-query_@xelaok - CSS media queries in Svelte
• svelte-match-media_@pearofducks - a matchMedia plugin for Svelte 3
• svelte-watch-resize_@xelaok - Watch element resize in Svelte
• svelte-simple-modal_@flekschas - A simple, small, and content-agnostic modal for Svelte
• svelte-popover_@vaheqelyan - A smart popover component for Svelte
• svelte-headroom_@collardeau - A Svelte component to hide your header on scroll
• svelte-table_@dasDaniel - A Table component with sorting and filtering
• @egjs/svelte-infinitegrid_@naver - A component wrapping egjs-infinitegrid for infinite card layouts

inputs and widgets

• @sveltejs/svelte-repl_@sveltejs - The <Repl> component used on the Svelte website
• svelte-color-picker_@qintarp - A color picker component for Svelte
• svelte-select_@rob-balfre - A select component for Svelte apps
• svelte-rate-it_@emrekara37 - A rate component for Svelte apps
• waxwing-rating_{@dmitrykurmanov} - rating widget for the web
• @beyonk/gdpr-cookie-consent-banner_{@beyonk-adventures} - A GDPR compliant cookie consent banner implementation
• svelte-inspect_@trbrc - console.log()-like interactive inspector for Svelte 3
• @okrad/svelte-progressbar_@okrad - A multiseries, SVG progressbar component made with Svelte
• Browser REPL JS_{@milafrerichs} - A Javascript REPL (code editor and code results) component
• Simple Svelte Autocomplete_@pstanoev - Simple autocomplete / typeahead component for Svelte
• svelte-ruler_@daybrush - A Ruler component that can draw grids and scroll infinitely
• svelte-json-tree_@tanhauhau - JSON viewer component used in the Svelte REPL
• svelte-checkbox_{@HosseinShabani} - A checkbox component for Svelte (Cool animation, Customizable).

fonts and icons

• svelte-icons_@gibdig - Icon components for Svelte, featuring many icon sets
• svelte-awesome_@RobBrazier - Awesome SVG icon component for Svelte JS, built with Font Awesome icons
• svelte-fa_@Cweili - Tiny FontAwesome 5 component for Svelte
• fa-svelte_@alphapeter - Font Awesome 5 for Svelte
• svelte-feather-icons_{@dylanblokhuis} - Feather icons for Svelte
• svelte-simple-icons_{@beyonk-adventures} - SVG icons for popular brands

forms and validation

See the ui component sets section for more.

• @spaceavocado/svelte-form_{@spaceavocado} - Simple Svelte form model handler and input validations
• svelte-forms_@chainlist - Svelte forms validation made easy
• svelte-forms-lib_@tjinauyeung - A lightweight library for managing forms in Svelte
• sveltejs-forms_@mdauner - Form components using Yup for validation
• svelte-formly_@arabdevelop - Form components and validations that are easy to extend
• svelidation_@yazonnile - Easily customizable library for validation scenarios in svelte components

animation

• svelte-typewriter_@henriquehbr - A simple and reusable typewriter effect

images

• svelte-waypoint_@matyunya - Lazyload images or anything component for Svelte
• svelte-image_@matyunya - Image processing with Sharp for Svelte
• svelte-image-encoder_@saabi - An <ImgEncoder> component for editing and compressing profile pictures
• svelte-easy-crop_@ValentinH - A Svelte component to crop images with easy interactions

charts

• echarts-for-svelte_@liyuanqiu - Baidu Echarts(v3.0 & v4.0) components for Svelte wrapper
• svelte-fusioncharts_{@priyanjitdey94} - Svelte component for FusionCharts JavaScript charting library
• svelte-frappe-charts_{@himynameisdave} - Svelte bindings for frappe-charts.

time and date

• svelte-calendar_@6eDesign - A lightweight datepicker with neat animations and a unique UX
• svelte-flatpickr_{@jacobmischka} - Flatpickr component for Svelte
• keithj2780/svelte-calendar_@keithj2780 - Simple calendar component
• svelte-fullcalendar_@YogliB - Wrapper around FullCalendar
• svelte-touch-datepicker_@SharifClick - A simple date picker - best for mobile web app (no dependencies)
• svelte-touch-timepicker_@SharifClick - A simple time picker - best for mobile web app (no dependencies)

notifications

• @beyonk/svelte-notifications_{@beyonk-adventures} - Svelte toast notifications that can be used in any JS application
• svelte-notifications_@keenethics - Simple and flexible notifications system

maps

• @beyonk/svelte-mapbox_{@beyonk-adventures} - Mapbox integration for Svelte
• @beyonk/svelte-googlemaps_{@beyonk-adventures} - Google Maps integration for Svelte
• svelte-pick-a-place_@jimutt - Svelte component for position and area selection with Leaflet

internationalization

• svelte-i18n_@kaisermann - Internationalization library for Svelte
• svelte-intl_@Panya - Internationalize your Svelte apps using format-message and Intl object

stores and state

• svelte-writable-derived_@PikadudeNo1 - Two-way data-transforming stores
• svelte-apollo_@timhall - Svelte integration for Apollo GraphQL
• Svelte for Meteor_{@meteor-svelte} - Build cybernetically enhanced web apps with Meteor and Svelte
• svelte-webext-storage-adapter_@PikadudeNo1 - Writable stores for Firefox/Chrome extensions using chrome.storage
• svelte-observable_@timhall - Use observables in Svelte components with ease
• svelte-mobx_@xelaok - Reactive MVVM with MobX & Svelte
• svelte-redux-connect_{@kolodziejczak-sz} - Redux binding to Svelte based on react-redux
• svql_{@pateketrueke} - Wrapper for FetchQL, a GraphQL query client
• svelte-backed-store_@JohnPeel - Stores backed by localStorage or sessionStorage

interaction

• @sveltejs/gestures_@sveltejs - Svelte actions for cross-platform gesture detection (work in progress)
• @beyonk/svelte-scrollspy_{@beyonk-adventures} - Scroll Spy component for Svelte
• svelte-moveable_@daybrush - Component for moveable, draggable, resizable, scalable, rotatable, and more

async loading

• svelte-loadable_@kaisermann - Dynamically load a Svelte component
• svelte-content-loader_@PaulMaly - SVG placeholder components for loading content

social and other 3rd party services

• @beyonk/svelte-google-analytics_{@beyonk-adventures} - Google Analytics tracking module for Svelte / Sapper
• @beyonk/svelte-facebook-pixel_{@beyonk-adventures} - A Facebook pixel module for Svelte / Sapper
• @beyonk/svelte-facebook-customer-chat_{@beyonk-adventures} - A Facebook customer chat integration for Svelte / Sapper
• @beyonk/svelte-trustpilot_{@beyonk-adventures} - Trustpilot Trustboxes for Svelte / Sapper
• @dopry/svelte-auth0_@dopry - Auth0 Integration Components for Svelte.

development and documentation

• Svelte DevTools_@RedHatter - Chrome/Firefox extension that allows inspection of Svelte components and state
• sveltedoc-parser_@alexprey - Generate a JSON documentation for a Svelte component
• prettier-plugin-svelte_{@UnwrittenFun} - Format your Svelte components using Prettier
• svelte-inspector_@qutran - Development helper for inspecting and opening Svelte components in your editor
• svelte-dev-helper_@ekhaled - Helper for Svelte components to ease development. Used by svelte-loader
• @svelte-docs/core_@AlexxNB - A rapid way to write documentation for your Svelte components

syntax highlighting

• prism-svelte_@pngwn - Syntax highlighting for Svelte code with prismjs
• highlightjs-svelte_@AlexxNB - Svelte language definition for Highlight.js

other components and libraries

• svelte-adapter_@pngwn - Use Svelte components with Vue and React
• svelte-css-vars_@kaisermann - Ever wanted to have reactive css variables in Svelte? What if I tell you there's a way?
• svelte-adaptive-sensors_@pngwn - Sensors to deliver adaptive loading based on a user's device and network

native

• svelte-native_@halfnelson - Svelte controlling native components via Nativescript

experiments

• @sveltejs/gl_@sveltejs - A (very experimental) project to bring WebGL to Svelte

example app showcase

open source Svelte in the wild

• Svelte TodoMVC_@sveltejs - TodoMVC implemented in Svelte (https://svelte-todomvc.surge.sh)
• RealWorld example app_@sveltejs - Svelte/Sapper implementation of the RealWorld app (https://svelte-realworld.now.sh)
• Svelte REPL_@sveltejs - The <Repl> component used on the Svelte website (https://svelte.dev/repl)
• Svelte DBMonster_@sveltejs - Svelte implementation of DBMonster (http://svelte-dbmonster.surge.sh) (VERSION 2)
• hn.svelte.dev_@sveltejs - Hacker News clone built with Svelte and Sapper (https://hn.svelte.dev)
• svelte-travel-transitions_@pngwn - Native-like Page Transitions with Svelte and Sapper, A Travel App
• New Tab_@MaxMilton - ⚡ A high performance Google Chrome new tab page that gets you where you need to go faster
• NAU Tab_@trongthanh - Beautiful New Tab extension for Chrome, Firefox and browsers support web extension
• Perfect Home_{@tborychowski} - Firefox newtab/home replacement
• Nomie_{@brandoncorbin} - Mood and Life Tracker built with Svelte
• palettes_@gka - A tool for creating nice, percerptually correct and colorblind-safe color palettes
• Litekart_@itswadesh - An actively developed ecommerce website built using Svelte & Sapper
• Svelte Markdown Editor_@thefln - Quick tuts + live demo to create a simple markdown editor app with Svelte.
• Svelte Sapper Bulma Crud - A basic CRUD using Svelte, Sapper and Bulma. (demo)

media

• Svelte's official blog
• @sveltejs on Twitter

talks

• Rich Harris - Computer, build me an app - JSConf EU 2018
• Rich Harris - Rethinking reactivity - YGLF 2019
• Rich Harris - The Return of 'Write Less, Do More' - JSCAMP 2019
• R. Mark Volkmann - Simplified Web App Development with Svelte - Midwest JS
• Peter Allen - Re-rendering perceptions with Svelte - Bristech 2019

podcasts and other videos

• Shop Talk #349 - Talking Svelte with Rich Harris
• devmode.fm #44 - Svelte 3’s radical new approach to web frameworks
• The Undefined Podcast #8 - Fake News and Frameworks with NYTimes Rich Harris
• Toolsday #93 - Svelte
• Harry Wolff - A Svelte Chat with Rich Harris!
• The Frontside Podcast - Svelte and Reactivity with Rich Harris
• egghead.io - Svelte 3 with Rich Harris

other lists and resources

• integrations_@sveltejs - Ways to incorporate Svelte into your stack
• community_@sveltejs - A repo for data relating to the Svelte community and events
• awesome-svelte_{@CalvinWalzel} - A curated list of awesome things related to Svelte (includes v2 resources)
• svelte-sapper-community_@mindrones - Svelte/Sapper community map
• Why Svelte - A collection of blog posts, videos, and other Svelte resources (https://why-svelte-js.web.app)
• Svelte Status - Weekly curated blogs and tools for Svelte developers
• sveltejsnews - Bi-weekly newsletter with news & links
• Svelte Jobs - Svelte jobs from all over the world

license

CC0 (public domain)

🌻