awesome Svelte resources

useful resources for Svelte v3+

Please feel free to submit anything you find useful or interesting. See contributing.md for more.

For Sapper resources, check out (insert link here if someone makes it).

See also awesome-svelte and other awesome lists.

official links
integrations
web app frameworks
templates
- electron templates
- mobile templates
testing
routers
- Svelte-specific routing
- generic routing
components and libraries
native
experiments
example app showcase 🌈✨
media
- talks
- podcasts and other videos
communities
other lists and resources
- language translations

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

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-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
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

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

routers

See the FAQ for some good info about Svelte routing solutions. Many generic routers work great with Svelte, and there are ones that use Svelte-specific idioms too.

Svelte-specific routing

Sapper includes a nifty 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

generic routing

navaid_@lukeed - A navigation aid (aka, router) for the browser in 850 bytes~!
abstract-state-router_@TehShrike - Like ui-router, but without all the Angular. The best way to structure a SPA.
page_@visionmedia - Micro client-side router inspired by the Express router
router5_@router5 - Flexible and powerful universal routing solution

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.

ui component sets

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.

web component sets

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 - A carousel with touch support
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

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

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

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

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

time and date

svelte-calendar_@6eDesign - A lightweight datepicker with neat animations and a unique UX.
svelte-flatpickr_{@jacobmischka} - Flatpickr component for Svelte

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 based on chrome.storage for Firefox/Chrome extensions.
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

interaction

@sveltejs/gestures_@sveltejs - Svelte actions for cross-platform gesture detection (work in progress)
@beyonk/svelte-scrollspy_{@beyonk-adventures} - Scroll Spy component for Svelte

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.

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

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?

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.
send pull requests!

media

Svelte's official blog
@sveltejs on Twitter

talks

podcasts and other videos

communities

official Discord chat
@sveltejs on Twitter
unofficial subreddit /r/sveltejs
Telegram chat rooms
- 🇷🇺 Svelte [svelt] (1000+ users)
- 🇷🇺 Svelte [svelt] Public
- 🇷🇺 Svelte [svelt] Jobs

other lists and resources

integrations_@sveltejs - Ways to incorporate Svelte into your stack
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.

swyxio / awesome-svelte-resources Goto Github PK