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

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

language translations

Internationalized versions of the official Svelte website.

communities

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

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

preprocessors

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

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

electron templates

mobile templates

testing

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.

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

layout and structure

inputs and widgets

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

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

time and date

notifications

maps

internationalization

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

stores and state

interaction

async loading

social and other 3rd party services

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

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

media

talks

podcasts and other videos

other lists and resources

license

CC0 (public domain)

🌻