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
• Integrations
  • Preprocessing
• Components & Libraries
  • UI Libraries
  • UI Components
  • Frameworks
  • UI Utilities
  • Scaffold
• Dev Tools
  • Lint
  • Docs
  • Test
  • Editors

Resources

Official Resources

• Official Guide
• API Reference
• GitHub Repo
• Changelog

Community

• Twitter
• Discord
• Reddit

Conferences

• Svelte Summit

Podcasts

• Svelte Radio

YouTube Channels

• Svelte Society

Tutorials

• Getting Started with Svelte 3 – DigitalOcean.
• Building My First Svelte App – Scotch.io.
• Develop a complete application with Svelte and TypeScript – MDN Web Docs.
• An Introduction to Actions – Svelte School.
• Svelte Tutorial for Beginners – The Net Ninja (YouTube).
• SvelteJS Series – tutorials and talks – SpinSpire (YouTube).

Studies

Studies and research on the Svelte framework.

• SvelteScaling – Does Svelte Scale?
• Will it Scale? – Finding Svelte’s inflection point.

Integrations

Preprocessing

• svelte-preprocess – A preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more.
• MDSveX – Preprocessor for MDX markdown.
• svelte-preprocess-markdown – Write Svelte components in markdown syntax.
• svelte-preprocess-less – Preprocessor for less.
• modular-css – Preprocessor support for modular-css.
• svelte-preprocess-postcss – Use PostCSS to preprocess your styles in Svelte components.
• svelte-preprocess-sass – Preprocessor for sass.

Components & Libraries

UI Libraries

• Svelte Materialify – A Material UI Design Component library heavily inspired by vuetify.
• Sveltestrap – Bootstrap 4 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

UI Components

Table

Tables and data grids.

• svelte-table – A table implementation that allows sorting and filtering.
• svelte-generic-crud-table – Agnostic web-component for object-arrays with CRUD functionality.

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

• svelte-fa – Tiny FontAwesome 5 component.
• svelte-simple-icons – Simple Icons component.
• svelte-awesome – Awesome SVG icon component, built with Font Awesome icons.
• svelte-icons – Icon components.

Calendar

Display non-editable events in a calendar.

• svelte-fullcalendar – A component wrapper around FullCalendar.
• svelte-calendar – A lightweight datepicker with neat animations and a unique UX.

Maps

• svelte-googlemaps – Google Maps component.
• svelte-mapbox – MapBox map and autocomplete components.
• leaflet-svelte – Svelte wrapper for Leaflet.

Form

Lets the user create and edit data.

Checkbox

Switch / on/off toggle / checkbox.

• svelte-checkbox – A checkbox component (cool animation, customizable).
• svelte-toggle – Basic toggle component with styling.

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.

• sveltejs/template – Template for building basic applications with rollup.
• component-template – A base for building shareable components.
• svelte-component-template – A base for building shareable components.
• svelte-pwa-template – A starter template for PWAs based in the official Template.
• svelte-redux-toolkit – A starter template integrating Redux-Toolkit.
• svelte-ts-eslint-tailwind – Starter template and tutorial for adding ESLint, Jest and Tailwind CSS to the official TypeScript template.
• svelte-ts-eslint-prettier-template – Starter template with TS activated, and ESLint and Prettier working together.

Universal

SSR framework.

• sapper-template#rollup – The default Sapper template, available for Rollup.
• sapper-template#webpack – The default Sapper template, available for Webpack.
• sapper-firebase-typescript-graphql-tailwindcss-actions-template – Template that includes Sapper, Firebase functions and hosting, TypeScript and TypeGraphQL, Tailwind CSS, ESLint, and automatic building and deployment with GitHub Actions.
• sapper-mdsvex-template – The default Sapper template with mdsvex.
• sapper-postcss-template – Template that includes Sapper and PostCSS preprocessing with Tailwind CSS.
• sapper-tailwindcss-template – The default Sapper template with Tailwind CSS.
• sapper-template-firebase – Starter Rollup template for Sapper apps with Firebase functions, PostCSS, PurgeCSS, CSSNano, Tailwind CSS, and svelte-preprocess.
• sapper-typescript-graphql-template – Template that includes Sapper, TypeScript preprocessing, and a GraphQL server through TypeGraphQL.
• SENT-template – SENT (Sapper Express Node Template) and other tools.

Dev Tools

Lint

Lint and format your code.

• eslint-plugin-svelte3 – An ESLint plugin for components.
• prettier-plugin-svelte – Format your components using prettier.
• svelte-check – Check 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

• svelte-jester – A Jest transformer to compile your components before importing them into tests.
• @testing-library/svelte – Simple and complete Svelte DOM testing utilities that encourage good testing practices.
• jest-transform-svelte – Jest Transformer for Svelte components.

Editors

Text editor plugins.

Visual Studio Code

• Svelte for VS Code – Provides syntax highlighting and rich intellisense for your components.
• Svelte 3 Snippets – Svelte 3 Snippets for VS 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.