rocketlaunchr / Awesome Svelte

⭐   the project to show your appreciation. ↗️

— A curated newsletter for Svelte enthusiasts.

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
  • 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
  • Communication with server
  • CSS / Style
  • HTML Template
  • Isomorphic Apps
  • Boilerplate
  • Miscellaneous
• Utilities
  • i18n
  • Framework bindings / integrations
  • Integrations with Third Party Services
• Performance
  • UI
    • Inspect
    • Lazy Load
  • App Size
  • Server-Side Rendering
• State Management
• Dev Tools
  • Test
  • Inspect
  • Miscellaneous
• Miscellaneous
  • Static Website Generator
• Cloud Solutions
  • Databases

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.

Menu

Menus / sidebars

Sticky

Fixed headers / scroll-up headers / sticky elements

Tabs

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.

Color Picker

• efeskucuk/svelte-color-picker

Toggle

• HosseinShabani/svelte-checkbox — A checkbox.
• beyonk-adventures/svelte-toggle

Slider

• MelihAltintas/svelte-knob — Knob control.

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.

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