Skip to main content

Awesome Svelte

⚡ A curated list of awesome Svelte resources

Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript

Contributions welcome. Add links through pull requests or create an issue to start a discussion.

Contents

Resources

Official Resources

Community

Conferences

Podcasts

YouTube Channels

Tutorials

Studies

Studies and research on the Svelte framework.

Integrations

Preprocessing

Mobile

UI frameworks for mobile.

  • Svelte Native - Svelte controlling native components via Nativescript.
  • Framework7 - Full featured HTML framework for building iOS & Android apps.

UI Libraries

  • AgnosticUI - Accessible Svelte Component Primitives (that also work with React, Vue 3, and Angular).
  • Svelte Materialify - A Material UI Design Component library heavily inspired by vuetify.
  • Sveltestrap - Bootstrap 4 & 5 components.
  • Smelte - UI framework with material components built with Tailwind CSS.
  • Svelte Material UI - Material UI Components.
  • carbon-components-svelte - Svelte implementation of the IBM Carbon Design System.
  • attractions - A pretty cool and modern UI kit
  • svelte-chota - Component library built with Chota, a super light-weight CSS framework

UI Components

Table

Tables and data grids.

Notification

Toaster / snackbar - Notify the user with a modeless temporary little popup.

Grid

Icons

Calendar

Display non-editable events in a calendar.

Maps

Form

Lets the user create and edit data.

Checkbox

Switch / on/off toggle / checkbox.

Charts

Miscellaneous

Scaffold

Templates / boilerplate / seed / starter kits / stack ensemble / Yeoman generator.

Client

Render Svelte application in the browser only.

Universal

SSR framework.

Utilities

Animations

  • svelte-typewriter - A simple and reusable typewriter effect for your Svelte applications.

Form

  • svelte-forms-lib - A lightweight library for managing forms.
  • felte - Extensible form library, with built-in Yup, Zod, Vest, and Superstruct validation.
  • vest - 🦺 Declarative form validation framework inspired by unit testing.
  • svelte-formly - A good solution to generate and control a dynamic forms using core and custom rules with customize styles.

WebGL

  • svelthree - Component library for declarative construction of reactive and reusable three.js scene graphs.

Portal

  • svelte-portal - Component for rendering outside the DOM of parent component.
  • svelte-teleport - A component to teleport elements across the DOM.

Fonts

  • svelte-web-fonts/google - Tiny component for easily loading Fonts via the Google Fonts API including autocompletion.

Internationalisation

Routers

For Single Page Applications (SPAs) and more.

  • svelte-router-spa - Router adds routing to your Single Page Applications (SPA). Includes localisation, guards and nested layouts.
  • svelte-routing - A declarative Svelte routing library with SSR support.
  • tinro - A tiny, dependency free and highly declarative router.
  • svelte-spa-router - Optimized for Single Page Applications (SPA) with hash based routing and support for parameters.
  • svelte-client-router - Svelte Client Router is everything you need and think when routing SPA's.

Frameworks

  • SvelteKit - The fastest way to build Svelte apps.
  • Sapper - The next small thing in web development, powered by Svelte.
  • Elder.js - Opinionated static site generator and web framework for Svelte built with SEO in mind.
  • Routify - Routes for Svelte, automated by your file structure.
  • JungleJS - The Jamstack framework for Svelte with GraphQL.

Dev Tools

Lint

Lint and format your code.

Docs

Create documentation.

  • svelte-docs - A rapid way to write documentation for your Svelte components.
  • sveltedoc-parser - Generate a JSON documentation for your component.
  • svelte-docster - Generate metadata about your Svelte files from jsdoc.

Test

Editors

Text editor plugins.

Visual Studio Code

Atom

  • ide-svelte - Provides syntax highlighting and rich intellisense for your components.
  • language-svelte - Provides syntax highlighting for components, directives and other Svelte specific syntax in Atom.

Sublime Text

  • Svelte - Syntax highlighting and support for Sublime Text.

Vim

  • vim-svelte - Vim syntax highlighting and indentation for Svelte 3 components.
  • vim-svelte-plugin - Syntax highlighting and support for Vim.
  • coc-svelte - Syntax highlighting and support for (Neo)Vim.

JetBrains

  • Svelte - Syntax highlighting and support for JetBrains.

Contribute to this list: https://github.com/TheComputerM/awesome-svelte