Svelte


awesome-svelte logo

Awesome Svelte Awesome

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

Resources

Official Resources

Community

Conferences

Podcasts

YouTube Channels

Tutorials

Studies

Studies and research on the Svelte framework.

Integrations

Preprocessing

Components & Libraries

UI Libraries

UI Components

Table

Tables and data grids.

Notification

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

  • svelte-notifications - Toast notifications component that can be used in any JS application.
  • svelte-favicon-badge - A custom component that adds a favicon and a badge that you can use to show for example number of unread messages, etc.

Icons

Calendar

Display non-editable events in a calendar.

Maps

Form

Lets the user create and edit data.

Checkbox

Switch / on/off toggle / checkbox.

Frameworks

Server Side Rendering

  • Sapper - The next small thing in web development, powered by Svelte.

Static Site Generation

  • Elder.js - Opinionated static site generator and web framework for Svelte built with SEO in mind.
  • JungleJS - The Jamstack framework for Svelte with GraphQL.

Mobile

UI frameworks for mobile.

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

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.

UI Utilities

Form

WebGL

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

Scaffold

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

Client

Render Svelte application in the browser only.

Universal

SSR framework.

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.

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.