kbrgl/awesome-svelte

⭐ the project to show your appreciation. ↗️

— A curated newsletter for Svelte enthusiasts.

UI Components

Editable data grid / spreadsheet

bsssshhhhhhh/svelte-data-grid — Lightweight and powerful data grid.

Table

dasDaniel/svelte-table — Table implementation that allows sorting and filtering.
vincjo/svelte-simple-datatables
ivosdc/svelte-generic-crud-table — Agnostic web-component for object-arrays with CRUD functionality.

Infinite Scroll

Skayo/svelte-tiny-virtual-list — A tiny but mighty list virtualization library, with zero dependencies.
Skayo/svelte-infinite-loading — This is heavily inspired by vue-infinite-loading.

Overlay

Display overlay / modal / alert / dialog / lightbox / popup

flekschas/svelte-simple-modal — A simple, small, and content-agnostic modal.

Notification

keenethics/svelte-notifications — Simple and flexible notifications system.
beyonk-adventures/svelte-notifications — Svelte toast notifications.
kevmodrome/svelte-favicon-badge — Adds a favicon and a badge.
zerodevx/svelte-toast — Simple elegant toast notifications.
arthurclemens/dialogic — Dialogic: manage dialogs and notifications.

Tooltip

vaheqelyan/svelte-popover — A smart popover component.

Sticky

Fixed headers / scroll-up headers / sticky elements

Tabs

Tabs Component - Tabs Component example.

Loader

Loaders / spinners / progress bars — Let the user know that something is loading

kaisermann/svelte-loadable — Dynamically load a svelte component.
PaulMaly/svelte-content-loader — Content Loader.
heithemmoumni/svelte-Spinkit — A collection of animated loading indicators.
stephane-vanraes/svelte-progresscircle — Progress Circle.

Carousel

beyonk-adventures/svelte-carousel
Valexr/svelte-slidy
sciactive/multicarousel — free multiple item JavaScript carousel.

Buttons

JHethDev/svelte-bouncy-btn — A bouncy button with variable fonts.
micha-lmxt/descent-ripple — Ripple animation for buttons.

Collapse

Chart

Display data in charts / graphs / diagrams

Rich-Harris/pancake — Experimental charting library for Svelte.
himynameisdave/svelte-frappe-charts — Svelte bindings for frappe-charts.
liyuanqiu/echarts-for-svelte — Baidu Echarts(v3.0 & v4.0) components for Svelte wrapper.

Tree

Display a tree data structure

esinx/svelte-tree — A tree-like outline view.

UI Navigation

Ways to navigate views

beyonk-adventures/svelte-steps — Progress Steps component.
dimfeld/svelte-zoomable — Zoomable UI in Svelte.

Custom Scrollbar

MelihAltintas/svelte-slimscroll — svelte-slimscroll is a action which can transforms any div into a scrollable area with a nice scrollbar.

Audio / Video

meigo/svelte-video-player — Video playback interface.

Map

beyonk-adventures/svelte-mapbox — MapBox Map and Autocomplete.
beyonk-adventures/svelte-googlemaps — Google Maps Components.
anoram/leaflet-svelte — Wrapper for Leaflet.

Time / Date / Age

Display time / date / age

Photo / Image

Display images / photos

matyunya/svelte-image — Image (pre)processing with Sharp.
johnwalley/compare-image-slider — Compare two images with a slider.
stephane-vanraes/svelte-multitoneimage — A simple image renderer to apply duotone effects.
GridGallery — CSS GridGallery.

Icons

Display icons / icon set / emojis

RobBrazier/svelte-awesome — Awesome SVG icon component, built with Font Awesome icons.
Cweili/svelte-fa — Tiny FontAwesome 5.
AnxiousDarkly/svelte-icons
dylanblokhuis/svelte-feather-icons — Beautiful open source icons.
beyonk-adventures/svelte-simple-icons — Simple Brand Icons.

Paginator

Display a control element to paginate

thecodejack/svelte-pagination — Raw SvelteJS component for dynamic pagination.

Markdown Viewer

Display parsed markdow source

Canvas

Sketch input using Canvas or SVG

Social

beyonk-adventures/svelte-social-auth — Google and Facebook Auth.
beyonk-adventures/svelte-facebook-pixel — Facebook pixel tracking.
beyonk-adventures/svelte-trustpilot — Svelte/Vanilla JS Trustpilot Component.

DOM Manipulation

romkor/svelte-portal — Render outside the DOM of parent component.
nasso/svelte-teleport — Teleport elements across the DOM.

Miscellaneous

henriquehbr/svelte-typewriter — A simple and reusable typewriter effect.
daybrush/ruler — A Ruler component that can draw grids and scroll infinitely.
scottbedard/svelte-heatmap — GitHub's contribution graph.
beyonk-adventures/gdpr-cookie-consent-banner — A GDPR compliant cookie consent banner.
beyonk-adventures/svelte-google-analytics — Svelte Google Analytics.

Form Components

Let the user enter data

Date / Time picker

Date picker / time picker / datetime picker / date range picker

6eDesign/svelte-calendar — A lightweight datepicker with neat animations and a unique UX.
YogliB/svelte-fullcalendar — A Svelte component wrapper around FullCalendar.
beyonk-adventures/svelte-datepicker
SharifClick/svelte-touch-datepicker

Emoji picker

Input Types

Masked inputs, specialized inputs; email / telephone number / credit card / etc.

xnimorz/svelte-input-mask — Input masking component.

Autocomplete

Autosuggest / autocomplete / typeahead

pstanoev/simple-svelte-autocomplete — Simple Autocomplete / typeahead component.

Select

themarquisdesheric/simply-svelte-autocomplete — A lightweight, zero-dependency component that supports theming and incorporating new entries.
pavish/select-madu — SelectMadu is a replacement for the select menu, with support for searching, multiple selections, async data loading and more.

Radio Button

Type Select

Let the user select something (e.g. a tag) while typing

Tag Input

Let the user add multiple tags in a single input

beyonk-adventures/svelte-tag-input — Lightweight tag input for Svelte and Vanilla JS.

Autosize Input / Textarea

Star Rating

emrekara37/svelte-rate-it

Drag and Drop

isaacHagoel/svelte-dnd-action

Sortable List

Let the user define an order on a list

Zimtir/svelte-item-list — Item list.

Rich Text Editor

easylogic/svelte-summernote — Extension for summernote.

Markdown Editor

Image Editing

Image manipulation

ValentinH/svelte-easy-crop — Crop images.
saabi/svelte-image-encoder — For editing and compressing profile pictures before upload to a server.

Form Component Collections

Miscellaneous

yazonnile/svelidation — Validation library.

Syntax Highlight

UI Layout

Components to layout the app's UI

vaheqelyan/svelte-grid — A responsive, draggable and resizable grid layout.
andrelmlins/svelte-grid-responsive — Responsive grid system based on Bootstrap.
Readiz/svelte-split-pane

UI Animation

Animate transitions

Parallax

UI Frameworks

Responsive

Set of components + responsive layout system

illright/attractions — A pretty cool UI kit for Svelte.

Material Design

hperrin/svelte-material-ui
matyunya/smelte — UI framework with material components built with Svelte and Tailwind CSS.
TheComputerM/svelte-materialify — Inspired by vuetify.
svelte-toolbox/svelte-toolbox

Carbon

IBM/carbon-components-svelte — Carbon Design System.

Bootstrap

bestguy/sveltestrap — Bootstrap 4 components for Svelte.

AgnosticUI

agnosticui — Accessible Svelte Component Primitives (that also work with React, Vue 3, and Angular).

Mobile

halfnelson/svelte-native — Svelte controlling native components via Nativescript.

Component Collections

UI Utilities

Reporter

Report computed styles

Visibility Reporter

Report when a component becomes visible/hidden

Measurement Reporter

Determine and report measurements of an element

Device Input

Turn user input into actions

Keyboard Events

Scroll Events

beyonk-adventures/svelte-scrollspy — Scroll Spy component

Touch Swipe

SharifClick/svelte-swipe
tncrazvan/svelte-liquid-swipe
Anyass3/sidebar-swipe — Sidebar Swipeable ideally for touch screen devices.

Mouse Events

Meta Tags

Set meta tags, <title>, children of

Portal

Render an element at an arbitrary DOM node

Test User Behavior

A/B tests, experiments, ...

Code Design

Libraries that help with code design

Data Store

Data flow / data management / data stores / components state / data flow

Form Logic

mdauner/sveltejs-forms — Declarative forms for Svelte.
noahsalvi/svelte-use-form — Control and validate forms and their inputs.

Router

Summary

SSR	History API	Hash Mode	Memory Mode (no URL update)	Query Parsing ?x=42&s=a,b,c	Page Leave Guards	Navigation Hooks	Nested Routes	Custom User Data	CSS Transitions	Routes Lazy load	Default Fallbacks	Forced Redirects	Several routers
✅	✅	❌	❌	❌	❌	❌	✅	✅	❌	❌	❌	❌	✅
✅	✅	❌	❌	❌	✅	✅	✅	✅	✅	✅	❌	✅	❌
❌	❌	✅	❌	✅	❌	❌	✅	✅	✅	✅	✅	❌	❌
❌	✅	✅	❌	✅	❌	✅	✅	❌	✅	✅	✅	✅	✅
❌	✅	❌	❌	❌	❌	❌	✅	❌	❌	❌	✅	✅	❌
❌	✅	✅	❌	✅	❌	✅	❌	❌	❌	✅	✅	❌	❌
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	❌	✅
✅	✅	✅	✅	❌	❌	✅	✅	✅	❌	✅	❌	❌	❌
❌	✅	❌	✅	❌	❌	❌	❌	✅	❌	❌	❌	✅	❌
❌	✅	✅	❌	❌	✅	❌	✅	❌	❌	✅	❌	❌	❌
❌	✅	✅	❌	✅	✅	✅	✅	✅	❌	✅	✅	❌	❌
❌	✅	✅	❌	❌	❌	❌	✅	❌	❌	✅	✅	❌	✅

EmilTholin/svelte-routing — A declarative Svelte routing library with SSR support.
sveltech/routify — Automated Svelte routes
ItalyPaleAle/svelte-spa-router — Router for SPAs using Svelte 3
AlexxNB/tinro — Highly declarative, very tiny, dependency free router for Svelte's web applications.
jorgegorka/svelte-router — Includes localisation, guards and nested layouts.
pateketrueke/yrv — Built on top of abstract-nested-router
easyroute-router/svelte-easyroute — Like Vue Router. Supports history and hash mode, navigation guards, base path.
mefechoel/svelte-navigator — Simple, accessible routing for Svelte.
PaulMaly/svelte-pathfinder — State-based router for Svelte 3.
bluwy/svelte-router — An easy-to-use SPA router for Svelte.
routve/routve — Routve is an advanced Svelte 3 router.
dievardump/yasp-router — Router for Svelte 3.

Props from server

Component properties asynchronously fetched over the network

Communication with server

SvelteStack/svelte-query — Performant and powerful remote data synchronization.

CSS / Style

josefaidt/svelte-themer — A theming engine for your Svelte apps using CSS.

HTML Template

Isomorphic Apps

Boilerplate

Scaffold / starter kit / Yeoman generator / stack ensemble / seed

YogliB/svelte-component-template — A base for building shareable components.

Miscellaneous

Utilities

i18n

Internationalization / L10n / localization / translation

Framework bindings / integrations

Integrations with Third Party Services

Performance

UI

Inspect

Lazy Load

App Size

halfnelson/svelte-it-will-scale — Generate a chart showing svelte's overhead.
Does Svelte Scale?
JavaScript Frameworks, Performance Comparison 2020

Server-Side Rendering

State Management

dmaevsky/tinyx — A tiny state manager for big applications.

Dev Tools

Test

vidigas/svelte-feature-flag — Feature flags (toggle) module.

Inspect

RedHatter/svelte-devtools — Inspect the state and component hierarchies in the Developer Tools.
qutran/svelte-inspector — Development helper for inspecting and opening svelte components in your editor.
svelte-reactive-debugger — Svelte Reactive Debugger.

Miscellaneous

sveltejs/prettier-plugin-svelte — Format your svelte components using prettier.
Rich-Harris/react-svelte — Use Svelte components inside a React app.
pngwn/svelte-adapter — Use Svelte components within Vue and React applications.
AlexxNB/svelte-docs — Write documentation for your Svelte components.
jesseskinner/svelte-react — Use React components inside Svelte apps.
KoRnFactory/svelte-injector — Use Svelte components inside other frameworks.

Miscellaneous

DeMoorJasper/parcel-plugin-svelte — A parcel plugin with svelte support.
dominikg/svite — Svelte Integration for vite.

Static Website Generator

Cloud Solutions

Databases

About

Awesome Svelte: Useful resources for developing Svelte applications

https://svelte.news

Creative Commons Zero v1.0 Universal

SSR	History API	Hash Mode	Memory Mode (no URL update)	Query Parsing ?x=42&s=a,b,c	Page Leave Guards	Navigation Hooks	Nested Routes	Custom User Data	CSS Transitions	Routes Lazy load	Default Fallbacks	Forced Redirects	Several routers
✅	✅	❌	❌	❌	❌	❌	✅	✅	❌	❌	❌	❌	✅
✅	✅	❌	❌	❌	✅	✅	✅	✅	✅	✅	❌	✅	❌
❌	❌	✅	❌	✅	❌	❌	✅	✅	✅	✅	✅	❌	❌
❌	✅	✅	❌	✅	❌	✅	✅	❌	✅	✅	✅	✅	✅
❌	✅	❌	❌	❌	❌	❌	✅	❌	❌	❌	✅	✅	❌
❌	✅	✅	❌	✅	❌	✅	❌	❌	❌	✅	✅	❌	❌
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	❌	✅
✅	✅	✅	✅	❌	❌	✅	✅	✅	❌	✅	❌	❌	❌
❌	✅	❌	✅	❌	❌	❌	❌	✅	❌	❌	❌	✅	❌
❌	✅	✅	❌	❌	✅	❌	✅	❌	❌	✅	❌	❌	❌
❌	✅	✅	❌	✅	✅	✅	✅	✅	❌	✅	✅	❌	❌
❌	✅	✅	❌	❌	❌	❌	✅	❌	❌	✅	✅	❌	✅

SSR	History API	Hash Mode	Memory Mode (no URL update)	Query Parsing ?x=42&s=a,b,c	Page Leave Guards	Navigation Hooks	Nested Routes	Custom User Data	CSS Transitions	Routes Lazy load	Default Fallbacks	Forced Redirects	Several routers
✅	✅	❌	❌	❌	❌	❌	✅	✅	❌	❌	❌	❌	✅
✅	✅	❌	❌	❌	✅	✅	✅	✅	✅	✅	❌	✅	❌
❌	❌	✅	❌	✅	❌	❌	✅	✅	✅	✅	✅	❌	❌
❌	✅	✅	❌	✅	❌	✅	✅	❌	✅	✅	✅	✅	✅
❌	✅	❌	❌	❌	❌	❌	✅	❌	❌	❌	✅	✅	❌
❌	✅	✅	❌	✅	❌	✅	❌	❌	❌	✅	✅	❌	❌
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	❌	✅
✅	✅	✅	✅	❌	❌	✅	✅	✅	❌	✅	❌	❌	❌
❌	✅	❌	✅	❌	❌	❌	❌	✅	❌	❌	❌	✅	❌
❌	✅	✅	❌	❌	✅	❌	✅	❌	❌	✅	❌	❌	❌
❌	✅	✅	❌	✅	✅	✅	✅	✅	❌	✅	✅	❌	❌
❌	✅	✅	❌	❌	❌	❌	✅	❌	❌	✅	✅	❌	✅

Table of Contents

UI Components

Editable data grid / spreadsheet

Table

Infinite Scroll

Overlay

Notification

Tooltip

Menu

Sticky

Tabs

Loader

Carousel

Buttons

Collapse

Chart

Tree

UI Navigation

Custom Scrollbar

Audio / Video

Map

Time / Date / Age

Photo / Image

Icons

Paginator

Markdown Viewer

Canvas

Social

DOM Manipulation

Miscellaneous

Form Components

Date / Time picker

Emoji picker

Input Types

Autocomplete

Select

Color Picker

Toggle

Slider

Radio Button

Type Select

Tag Input

Autosize Input / Textarea

Star Rating

Drag and Drop

Sortable List

Rich Text Editor

Markdown Editor

Image Editing

Form Component Collections

Miscellaneous

Syntax Highlight

UI Layout

UI Animation

Parallax

UI Frameworks

Responsive

Material Design

Carbon

Bootstrap

AgnosticUI

Mobile

Component Collections

UI Utilities

Reporter

Visibility Reporter

Measurement Reporter

Device Input

Keyboard Events

Scroll Events

Touch Swipe

Mouse Events

Meta Tags

Portal

Test User Behavior

Code Design

Data Store

Form Logic

Router

Props from server

SSR	History API	Hash Mode	Memory Mode (no URL update)	Query Parsing ?x=42&s=a,b,c	Page Leave Guards	Navigation Hooks	Nested Routes	Custom User Data	CSS Transitions	Routes Lazy load	Default Fallbacks	Forced Redirects	Several routers
✅	✅	❌	❌	❌	❌	❌	✅	✅	❌	❌	❌	❌	✅
✅	✅	❌	❌	❌	✅	✅	✅	✅	✅	✅	❌	✅	❌
❌	❌	✅	❌	✅	❌	❌	✅	✅	✅	✅	✅	❌	❌
❌	✅	✅	❌	✅	❌	✅	✅	❌	✅	✅	✅	✅	✅
❌	✅	❌	❌	❌	❌	❌	✅	❌	❌	❌	✅	✅	❌
❌	✅	✅	❌	✅	❌	✅	❌	❌	❌	✅	✅	❌	❌
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	❌	✅
✅	✅	✅	✅	❌	❌	✅	✅	✅	❌	✅	❌	❌	❌
❌	✅	❌	✅	❌	❌	❌	❌	✅	❌	❌	❌	✅	❌
❌	✅	✅	❌	❌	✅	❌	✅	❌	❌	✅	❌	❌	❌
❌	✅	✅	❌	✅	✅	✅	✅	✅	❌	✅	✅	❌	❌
❌	✅	✅	❌	❌	❌	❌	✅	❌	❌	✅	✅	❌	✅