Awesome Svelte Resources

[deprecated for svelte-society/sveltesociety.dev] useful resources for Svelte v3+

#svelte #sveltejs #svelte-components #svelte-v3 #svelte3 #awesome #awesome-list #javascript #web #frontend

awesome Svelte resources

useful resources for Svelte v3+

- deprecated for svelte-society/sveltesociety.dev

:warning: important :warning: 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.

official links
- language translations
communities :city_sunrise:
- Telegram chat rooms
integrations
web app frameworks
templates
- electron templates
- mobile templates
testing
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! :city_sunrise: 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

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

@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

podcasts and other videos

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)

:sunflower:

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing