Skip to content

TheComputerM/awesome-svelte

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
November 11, 2020 20:45
October 13, 2020 20:05


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.

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.
  • Capacitor - Build native mobile apps with web technology and Svelte.

State Libraries

UI Libraries

  • AgnosticUI - Accessible Svelte Component Primitives (that also work with React, Vue 3, and Angular).
  • Flowbite Svelte - Open-source Svelte UI components built with Tailwind CSS and Flowbite.
  • 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
  • ionic-svelte - Svelte integration with Ionic's UI for mobile app development, including many starters.
  • Svelte UI - SvelteUI is an all inclusive Svelte library.
  • YeSvelte - YeSvelte is flexible Svelte UI component library built on top of Bootstrap css.

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.
  • @zerodevx/svelte-toast - Simple elegant toast notifications.
  • svelte-french-toast - Buttery smooth toast notifications for Svelte, inspired by React Hot Toast. Lightweight, customizable, and beautiful by default.

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 / starter kits / stack ensemble / Yeoman generator.

Utilities

Animations

  • AutoAnimate - A zero-config, drop-in animation utility that adds smooth transitions to your Svelte app.
  • 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.
  • svelte-form-builder - A No-code Drag n Drop Form Builder built for Svelte

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

  • svelte-fluent - Components for easy integration of Fluent localization.
  • svelte-i18n - Internationalization library for Svelte.
  • sveltekit-i18n - For integrating i18n style localization in SvelteKit.
  • @tolgee/svelte - Web-based localization tool enabling users to translate directly in the Svelte app they develop.

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.
  • @danielsharkov/svelte-router - A simple & easy to use SPA router, developed with page transitions in mind.
  • @shaun/svelterouter - Another vue-router inspired Svelte router.

Frameworks

  • SvelteKit - The fastest way to build Svelte apps.
  • 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.