Skip to content

Latest commit

 

History

History
363 lines (263 loc) · 21.4 KB

README.md

File metadata and controls

363 lines (263 loc) · 21.4 KB
Raw


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

  • svelte-asyncable - The Svelte store contract with support for asynchronous values.
  • exome - Simple proxy based state manager for deeply nested states.
  • tanstack-store - Framework agnostic type-safe store w/ reactive framework adapters.

UI Libraries

  • shadcn-svelte - Beautifully designed components that you can copy and paste into your apps.
  • SvelteUI - all inclusive Svelte library - Components, Actions, Utilities, Animations.
  • Flowbite Svelte - Open-source Svelte UI components built with Tailwind CSS and Flowbite.
  • Skeleton - Skeleton uses Tailwind utility classes and design system to easily create theme-able user interfaces.
  • Sveltestrap - Bootstrap 4 & 5 components.
  • carbon-components-svelte - Svelte implementation of the IBM Carbon Design System.
  • Svelte Material UI - Material UI Components.
  • Melt UI - A collection of accessible, reusable, and composable headless component builders and utilities.
  • attractions - A pretty cool and modern UI kit. (pre-v5)
  • ionic-svelte - Svelte integration with Ionic's UI for mobile app development, including many starters.
  • YeSvelte - YeSvelte is flexible Svelte UI component library built on top of Bootstrap css.
  • Svelte UX - Large collection of components, actions, stores, and utilities to build highly interactive applications
  • STDF - Mobile web component library based on Svelte and Tailwind.
  • M3 Svelte - Robust component library implementing Material Design 3
  • AgnosUI - Highly configurable headless framework agnostic component library
  • daisyUI - The most popular component library for Tailwind CSS - daisyUI adds component class names to Tailwind CSS so you can make beautiful websites faster than ever.
  • Smelte - UI framework with material components built with Tailwind CSS. (pre-v5)
  • SVAR Core for Svelte - A collection of 20+ Svelte UI components for building fast-performing, interactive and responsive web apps.
  • AgnosticUI - Accessible Svelte Component Primitives (that also work with React, Vue 3, and Angular).

UI Components

Table

Tables and data grids.

  • @vincjo/datatables - A toolkit for creating datatable components with Svelte.
  • svelte-table - A table implementation that allows sorting and filtering.
  • svelte-generic-crud-table - Agnostic web-component for object-arrays with CRUD functionality. Sort and resize columns. Multiple tables per page.
  • svelte-generic-table-pager - Svelte-generic-crud-table with paginator.
  • powertable - PowerTable is a JavaScript component that turns JSON data into an interactive HTML table. This facilitates manual inspection, sorting, filtering, searching, and editing of the data.
  • svelte-pivottable - Svelte-based pivot table library with drag'n'drop 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.
  • @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.
  • svelte-sonner - An opinionated toast component for Svelte.

Grid

Icons

Calendar

Display non-editable events in a calendar.

Maps

Charts

  • svelte-frappe-charts - Svelte bindings for frappe-charts.
  • Layer Cake - A framework for mostly-reusable graphics with svelte
  • LayerChart - Large collection of composable Svelte components to build a wide range of visualizations, built upon Layer Cake

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.

Drag & Drop

  • neodrag - One Draggable to rule them all 💍.

Forms

  • Superforms - SvelteKit library for handling server and client validation, and client-side display of forms.
  • Formsnap - High level Svelte components for forms, built on top of Superforms and Zod.
  • 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. (pre-v5)
  • svelte-form-builder - A No-code Drag n Drop Form Builder built for Svelte

Form Components

Individual form components.

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

HTTP Requests

  • sswr - Svelte stale while revalidate (SWR) data fetching strategy.
  • svelte-query - Fetch, cache and update data in your Svelte applications all without touching any "global state".

Sound & Video

  • svelte-sound - Svelte Actions to play interaction sounds on target DOM events.

WebGL

  • svelthree - Component library for declarative construction of reactive and reusable three.js scene graphs.
  • threlte - Threlte is a renderer and component library for using Three.js in a declarative and state-driven way in Svelte apps.

PWA

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.

Internationalization

  • svelte-fluent - Components for easy integration of Fluent localization.
  • svelte-i18n - Internationalization library for Svelte.
  • VoerkaI18n - Internationalization solution for Javascript/Typescript/Vue/React/Solidjs/SvelteJs/ReactNative
  • 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.
  • @i18n-pro/svelte - Lightweight, simple, flexible, automatic translation internationalization tool for Svelte.
  • ParaglideJS - Tiny, typesafe i18n library with translated links out of the box.

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.
  • Elegua - Small (< 180LoC), fast, easy, full featured SPA router
  • svelte5-router - First Svelte 5 SPA router with nesting, hooks, and more.. Use components, snippets, or both!

Frameworks

  • SvelteKit - The fastest way to build Svelte apps.
  • Routify - Routes for Svelte, automated by your file structure.
  • Elder.js - Opinionated static site generator and web framework for Svelte built with SEO in mind. (pre-v5)
  • JungleJS - The Jamstack framework for Svelte with GraphQL. (pre-v5)
  • svelte-document - Create documents (PDFs), resumes, or presentations entirely in Svelte.

Dev Tools

Lint

Lint and format your code.

Test

Editors

Text editor plugins.

Visual Studio Code

Sublime Text

  • Svelte - Syntax highlighting and support for Sublime Text.

Vim

JetBrains

  • Svelte - Syntax highlighting and support for JetBrains.