Courses & TutorialsProgramming

Awesome Svelte JS – Massive Collection of Resources

⚡ 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

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

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.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button