Awesome Svelte

A curated list of awesome things related to Svelte

Based on Awesome Vue.js

• Resources
  • Examples
• Projects Using Svelte
• Components & Libraries
  • UI Components
  • UI Layout
  • Frameworks
  • UI Utilities
  • Routing
  • Utilities
  • Integrations
  • Dev Tools
    • Helpers
    • Source Code Editing
      • Visual Studio Code
  • Scaffold

Resources

• Offical Website
  • Tutorial
  • Template
  • API Docs
  • Examples
  • REPL
  • Blog
  • Version 2
• Discord
• GitHub Repo
• Release Notes

Examples

• svelte-gun-example - This is an example using svelte 3 with the gun database.
• svelte-sapper-bulma-crud - A Svelte+Sapper+Bulma crud, width demo and ready to deploy on now.sh servers.

Projects Using Svelte

Open Source

• Sapper HackerNews Clone - A Hacker News clone built with Svelte and Sapper.

Apps/Websites

Components & Libraries

Responsive

Set of components + responsive layout system

• sveltestrap - Bootstrap 4 components for Svelte

UI Components

• svelte-image-encoder - A component to show, edit and compress pictures before upload to a server.
• svelte-table - A svelte-3 table implementation that allows sorting and filtering.
• svelte-easy-crop - A svelte-3 component to crop images with easy interactions.

UI Layout

Frameworks

• Sapper - PWA framework similar to Nuxt.js to Vue and Next.js and Gatsby to React.
• Svelte Native - Svelte in a NativeScript application

UI Utilities

Routing

• Svelte Routing - A declarative Svelte routing library with SSR support.
• svelte-spa-router - Router for SPAs using Svelte 3 (Leverages hash-based routing).
• svero - A simple router for Svelte 3.

Utilities

• svelte-writable-derived - Two-way data-transforming stores.
• svelte-webext-storage-adapter - Allows Firefox/Chrome extension authors to make writable stores based on chrome.storage.

Code Style

Improve readability of code

• eslint-plugin-svelte3 - Linting plugin for eslint & Svelte 3.

Asset Management

Utilities for building / compiling / bundling / loading assets

• rollup-plugin-svelte - Officially maintained rollup plugin.
• svelte-loader - Officially maintained webpacker loader.

Helpers

• svelte-array-helper - A dead simple helper to modifying arrays, and keep code clean

Integrations

Dev Tools

Helpers

• svelte-debugger - A JSON <Debugger> component for Svelte apps.

Source Code Editing

Text editor plugins

Visual Studio Code

• Svelte for VS Code - Provides syntax highlighting and rich intellisense for VS Code.
• Svelte VS Code Snippets - Visual Studio Code Extension that adds Svelte 3 code snippets to your favorite IDE.

Scaffold

Scaffold / boilerplate / seed / starter kits / stack ensemble / Yeoman generator

• Asp.NETCore Svelte (TypeScript) SPA Starter - Uses ASP.NET Core Web API, Svelte 3, Webpack 4 & Bootstrap 4.
• svelte-webpack-seed - This is a seed project configured with webpack and babel for JavaScript transpilation and SASS preprocessing.
• Webpack SPA template - Webpack template for complex building SPA using Svelte.
• svelte-component-template - A template for building shareable Svelte 3 components.