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
- testing
- routers
- components and libraries
- ui component sets
- web component sets
- layout and structure
- inputs and widgets
- fonts and icons
- forms and validation
- images
- charts
- time and date
- notifications
- maps
- internationalization
- stores and state
- interaction
- async loading
- social and other 3rd party services
- development and documentation
- other components and libraries
- native
- experiments
- example app showcase 🌈✨
- media
- communities
- 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.
- svelte.dev
svelte@sveltejs - Cybernetically enhanced web appssapper@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
The official list of integrations is sveltejs/integrations. Look there first - they're mostly not duplicated here. Maybe they should be?
svelte-loader@sveltejs - Webpack loader for Svelte components.rollup-plugin-svelte@rollup - Compile Svelte components with Rollup- more at the official integrations repo
svelte-preprocess@kaisermann - A Svelte preprocessor with baked in support for common preprocessorsmdsvex@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 preprocessorsvelte-preprocess-sass@ls-age - SASS/SCSS preprocessorsvelte-preprocess-less@ls-age - LESS preprocessor@modular-css/svelte@modular-css -modular-csspreprocessor- see also the official list
Some components are bundled with specific preprocessors that they rely on; those projects are listed under components and libraries.
@pwa/cli@lukeed - Universal PWA Builder (WIP)baelte@kennethlarsen - CLI tool for svelte to help you be productivesvb@himynameisdave - A zero-config CLI to bundle Svelte apps (WIP)
- 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
sapper@sveltejs - Military-grade progressive web apps, powered by Svelte
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
- 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
- syonip/svelte-cordova - Starter template for Cordova featuring hot reload
- lpshanley/svelte-phonegap - Template for building phonegap hybrid applications with Svelte
@testing-library/svelte@testing-library - Simple and complete DOM testing utilities that encourage good practices.jest-transform-svelte@rspieker - Jest Transformer for Svelte componentssvelte-test@pngwn - Testing utilities for Svelte- storybookjs@storybook - UI component dev & test
svelte-jest@ktsn - Jest Svelte component transformer
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.
Sapper includes a nifty filesystem-based routing solution along with a full app framework.
svelte-routing@EmilTholin - A declarative Svelte routing library with SSR supportsvelte-state-renderer@TehShrike - abstract-state-router renderer for Sveltesvelte-spa-router@ItalyPaleAle - Router for SPAs using Svelte 3svero@kazzkiq - A simple router for Svelte 3swheel@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 Sveltesvelte-navaid@jacwright - A Svelte router powered by lukeed/navaid@slick-for/svelte@shavyg2 - Manage your views and routing using class decorators and dependency injectioncrayon-svelte@alshdavid - Framework agnostic UI router for SPAs with specific support for Sveltesvelte-filerouter@jakobrosenberg - Filesystem-based router inspired by Sapper's 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 routerrouter5@router5 - Flexible and powerful universal routing solution
If you have any submissions, updates, or ideas to improve this list of links, please feel free to open an issue or PR.
svelma@c0bra - Bulma components for Sveltesmelte@matyunya - Material design components for Svelte using Tailwind CSSsvelte-toolbox@svelte-toolbox - A UI component library for Svelte implementing Google's Material Design specificationsvelte-material-ui@hperrin - Svelte Material UI Componentssvelteify@exybore - Material components library for Svelte using the stylesheet of Vuetifysveltemantic@titans-inc - Fomantic-UI components for Svelte 3sveltestrap@bestguy - Bootstrap 4 components for Sveltesvelte-ui@vikignt - Simple Svelte 3 UI componentssvmd@hkh12 - Easy-to-use, Customizable Material Design components for Svelte.
zoo-web-components@zooplus - Web-components library built with Svelte.
@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 3multicarousel@sciactive - A dependency free multiple item JavaScript carousel.svelte-swipe@SharifClick - A carousel with touch supportsvelte-tabs@joeattardi - Tabs component for Sveltesvelte-media-query@xelaok - CSS media queries in Sveltesvelte-match-media@pearofducks - a matchMedia plugin for Svelte 3svelte-watch-resize@xelaok - Watch element resize in Sveltesvelte-simple-modal@flekschas - A simple, small, and content-agnostic modal for Sveltesvelte-popover@vaheqelyan - A smart popover component for Svelte
@sveltejs/svelte-repl@sveltejs - The<Repl>component used on the Svelte websitesvelte-color-picker@qintarp - A color picker component for Sveltesvelte-select@rob-balfre - A select component for Svelte appssvelte-rate-it@emrekara37 - A rate component for Svelte appswaxwing-rating@dmitrykurmanov - rating widget for the web@beyonk/gdpr-cookie-consent-banner@beyonk-adventures - A GDPR compliant cookie consent banner implementationsvelte-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-icons@gibdig - Icon components for Svelte, featuring many icon setssvelte-awesome@RobBrazier - Awesome SVG icon component for Svelte JS, built with Font Awesome icons.svelte-fa@Cweili - Tiny FontAwesome 5 component for Sveltefa-svelte@alphapeter - Font Awesome 5 for Sveltesvelte-feather-icons@dylanblokhuis - Feather icons for Svelte
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 easysvelte-forms-lib@tjinauyeung - A lightweight library for managing forms in Sveltesveltejs-forms@mdauner - Form components using Yup for validation
svelte-waypoint@matyunya - Lazyload images or anything component for Sveltesvelte-image@matyunya - Image processing with Sharp for Sveltesvelte-image-encoder@saabi - An<ImgEncoder>component for editing and compressing profile picturessvelte-easy-crop@ValentinH - A Svelte component to crop images with easy interactions
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-calendar@6eDesign - A lightweight datepicker with neat animations and a unique UX.svelte-flatpickr@jacobmischka - Flatpickr component for Svelte
@beyonk/svelte-notifications@beyonk-adventures - Svelte toast notifications that can be used in any JS applicationsvelte-notifications@keenethics - Simple and flexible notifications system
@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.
svelte-i18n@kaisermann - Internationalization library for Sveltesvelte-intl@Panya - Internationalize your Svelte apps using format-message and Intl object
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 onchrome.storagefor 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
@sveltejs/gestures@sveltejs - Svelte actions for cross-platform gesture detection (work in progress)@beyonk/svelte-scrollspy@beyonk-adventures - Scroll Spy component for Svelte
svelte-loadable@kaisermann - Dynamically load a Svelte componentsvelte-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.
- Svelte DevTools@RedHatter - Chrome/Firefox extension that allows inspection of Svelte components and state
sveltedoc-parser@alexprey - Generate a JSON documentation for a Svelte componentprettier-plugin-svelte@UnwrittenFun - Format your Svelte components using Prettier.svelte-inspector@qutran - Development helper for inspecting and opening Svelte components in your editorsvelte-dev-helper@ekhaled - Helper for Svelte components to ease development. Used bysvelte-loader
svelte-adapter@pngwn - Use Svelte components with Vue and Reactsvelte-css-vars@kaisermann - Ever wanted to have reactive css variables in Svelte? What if I tell you there's a way?
- svelte-native@halfnelson - Svelte controlling native components via Nativescript
@sveltejs/gl@sveltejs - A (very experimental) project to bring WebGL to Svelte
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!
- Rich Harris - Rethinking reactivity - YGLF 2019
- Rich Harris - Computer, build me an app - JSConf EU 2018
- 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
- official Discord chat
- @sveltejs on Twitter
- unofficial subreddit /r/sveltejs
- Telegram chat rooms
- 🇷🇺 Svelte [svelt] (1000+ users)
- 🇷🇺 Svelte [svelt] Public
- 🇷🇺 Svelte [svelt] Jobs
- 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.
- Russian - Перевод ресурсов по Svelte
CC0 (public domain)