awesome-svelte

Awesome Svelte: Useful resources for developing Svelte applications
https://github.com/rocketlaunchr/awesome-svelte

Last synced: 6 days ago
JSON representation

UI Components
- Editable data grid / spreadsheet
  - ![ - data-grid) [bsssshhhhhhh/svelte-data-grid](https://github.com/bsssshhhhhhh/svelte-data-grid) — Lightweight and powerful data grid.
- Table
  - ![ - table) [dasDaniel/svelte-table](https://github.com/dasDaniel/svelte-table) — Table implementation that allows sorting and filtering.
  - ![ - simple-datatables) [vincjo/svelte-simple-datatables](https://github.com/vincjo/svelte-simple-datatables)
  - ![ - generic-crud-table) [ivosdc/svelte-generic-crud-table](https://github.com/ivosdc/svelte-generic-crud-table) — Agnostic web-component for object-arrays with CRUD functionality.
- Notification
  - ![ - french-toast) [kbrgl/svelte-french-toast](https://github.com/kbrgl/svelte-french-toast) - Svelte French Toast: Buttery smooth toast notifications for Svelte, inspired by React Hot Toast.
  - ![
  - ![ - notifications) [keenethics/svelte-notifications](https://github.com/keenethics/svelte-notifications) — Simple and flexible notifications system.
  - ![ - adventures/svelte-notifications) [beyonk-adventures/svelte-notifications](https://github.com/beyonk-adventures/svelte-notifications) — Svelte toast notifications.
  - ![ - favicon-badge) [kevmodrome/svelte-favicon-badge](https://github.com/kevmodrome/svelte-favicon-badge) — Adds a favicon and a badge.
  - ![ - toast) [zerodevx/svelte-toast](https://github.com/zerodevx/svelte-toast) — Simple elegant toast notifications.
- Tabs
  - Tabs Component - Tabs Component example.
- Carousel
  - ![ - adventures/svelte-carousel) [beyonk-adventures/svelte-carousel](https://github.com/beyonk-adventures/svelte-carousel)
  - ![ - slidy) [Valexr/svelte-slidy](https://github.com/Valexr/svelte-slidy)
  - ![
- Photo / Image
  - GridGallery
  - ![ - image-slider) [johnwalley/compare-image-slider](https://github.com/johnwalley/compare-image-slider) — Compare two images with a slider.
  - ![ - image) [matyunya/svelte-image](https://github.com/matyunya/svelte-image) — Image (pre)processing with Sharp.
  - ![ - vanraes/svelte-multitoneimage) [stephane-vanraes/svelte-multitoneimage](https://github.com/stephane-vanraes/svelte-multitoneimage) — A simple image renderer to apply duotone effects.
  - GridGallery
- Icons
  - ![ - icons) [AnxiousDarkly/svelte-icons](https://github.com/AnxiousDarkly/svelte-icons)
  - ![ - awesome) [RobBrazier/svelte-awesome](https://github.com/RobBrazier/svelte-awesome) — Awesome SVG icon component, built with Font Awesome icons.
  - ![ - fa) [Cweili/svelte-fa](https://github.com/Cweili/svelte-fa) — Tiny FontAwesome 5.
  - ![ - adventures/svelte-simple-icons) [beyonk-adventures/svelte-simple-icons](https://github.com/beyonk-adventures/svelte-simple-icons) — Simple Brand Icons.
  - ![ - feather-icons) [dylanblokhuis/svelte-feather-icons](https://github.com/dylanblokhuis/svelte-feather-icons) — Beautiful open source icons.
- Miscellaneous
  - ![
  - ![ - typewriter) [henriquehbr/svelte-typewriter](https://github.com/henriquehbr/svelte-typewriter) — A simple and reusable typewriter effect.
  - ![ - heatmap) [scottbedard/svelte-heatmap](https://github.com/scottbedard/svelte-heatmap) — GitHub's contribution graph.
  - ![ - adventures/gdpr-cookie-consent-banner) [beyonk-adventures/gdpr-cookie-consent-banner](https://github.com/beyonk-adventures/gdpr-cookie-consent-banner) — A GDPR compliant cookie consent banner.
  - ![ - adventures/svelte-google-analytics) [beyonk-adventures/svelte-google-analytics](https://github.com/beyonk-adventures/svelte-google-analytics) — Svelte Google Analytics.
- Form Components
  - ![ - adventures/svelte-datepicker) [beyonk-adventures/svelte-datepicker](https://github.com/beyonk-adventures/svelte-datepicker)
  - ![ - touch-datepicker) [SharifClick/svelte-touch-datepicker](https://github.com/SharifClick/svelte-touch-datepicker)
  - ![
  - ![
  - ![ - color-picker) [efeskucuk/svelte-color-picker](https://github.com/efeskucuk/svelte-color-picker)
  - ![ - adventures/svelte-toggle) [beyonk-adventures/svelte-toggle](https://github.com/beyonk-adventures/svelte-toggle)
  - ![ - rate-it) [emrekara37/svelte-rate-it](https://github.com/emrekara37/svelte-rate-it)
  - ![ - dnd-action) [isaacHagoel/svelte-dnd-action](https://github.com/isaacHagoel/svelte-dnd-action)
  - ![
  - ![ - svelte-autocomplete) [themarquisdesheric/simply-svelte-autocomplete](https://github.com/themarquisdesheric/simply-svelte-autocomplete) — A lightweight, zero-dependency component that supports theming and incorporating new entries.
  - ![ - knob) [MelihAltintas/svelte-knob](https://github.com/MelihAltintas/svelte-knob) — Knob control.
  - ![ - adventures/svelte-tag-input) [beyonk-adventures/svelte-tag-input](https://github.com/beyonk-adventures/svelte-tag-input) — Lightweight tag input for Svelte and Vanilla JS.
  - pstanoev/simple-svelte-autocomplete
  - pavish/select-madu
  - ![ - item-list) [Zimtir/svelte-item-list](https://github.com/Zimtir/svelte-item-list) — Item list.
  - ![ - checkbox) [HosseinShabani/svelte-checkbox](https://github.com/HosseinShabani/svelte-checkbox) — A checkbox.
  - ![ - summernote) [easylogic/svelte-summernote](https://github.com/easylogic/svelte-summernote) — Extension for summernote.
  - ![ - easy-crop) [ValentinH/svelte-easy-crop](https://github.com/ValentinH/svelte-easy-crop) — Crop images.
  - ![ - image-encoder) [saabi/svelte-image-encoder](https://github.com/saabi/svelte-image-encoder) — For editing and compressing profile pictures before upload to a server.
  - ![ - calendar) [6eDesign/svelte-calendar](https://github.com/6eDesign/svelte-calendar) — A lightweight datepicker with neat animations and a unique UX.
  - ![ - fullcalendar) [YogliB/svelte-fullcalendar](https://github.com/YogliB/svelte-fullcalendar) — A Svelte component wrapper around FullCalendar.
  - ![ - input-mask) [xnimorz/svelte-input-mask](https://github.com/xnimorz/svelte-input-mask) — Input masking component.
- Infinite Scroll
  - ![ - infinite) [ndom91/svelte-infinite](https://github.com/ndom91/svelte-infinite) — Svelte 5 compatible infinite loading wrapper component.
  - ![ - tiny-virtual-list) [Skayo/svelte-tiny-virtual-list](https://github.com/Skayo/svelte-tiny-virtual-list) — A tiny but mighty list virtualization library, with zero dependencies.
  - ![ - infinite-loading) [Skayo/svelte-infinite-loading](https://github.com/Skayo/svelte-infinite-loading) — This is heavily inspired by [vue-infinite-loading](https://peachscript.github.io/vue-infinite-loading/).
- Loader
  - ![ - loadable) [kaisermann/svelte-loadable](https://github.com/kaisermann/svelte-loadable) — Dynamically load a svelte component.
  - ![ - Spinkit) [heithemmoumni/svelte-Spinkit](https://github.com/heithemmoumni/svelte-Spinkit) — A collection of animated loading indicators.
  - ![ - content-loader) [PaulMaly/svelte-content-loader](https://github.com/PaulMaly/svelte-content-loader) — Content Loader.
  - ![ - vanraes/svelte-progresscircle) [stephane-vanraes/svelte-progresscircle](https://github.com/stephane-vanraes/svelte-progresscircle) — Progress Circle.
- Chart
  - ![ - frappe-charts) [himynameisdave/svelte-frappe-charts](https://github.com/himynameisdave/svelte-frappe-charts) — Svelte bindings for frappe-charts.
  - ![ - for-svelte) [liyuanqiu/echarts-for-svelte](https://github.com/liyuanqiu/echarts-for-svelte) — Baidu Echarts(v3.0 & v4.0) components for Svelte wrapper.
  - ![ - Harris/pancake) [Rich-Harris/pancake](https://github.com/Rich-Harris/pancake) — Experimental charting library for Svelte.
- Tree
  - ![ - tree) [esinx/svelte-tree](https://github.com/esinx/svelte-tree) — A tree-like outline view.
- Audio / Video
  - ![ - video-player) [meigo/svelte-video-player](https://github.com/meigo/svelte-video-player) — Video playback interface.
- Map
  - ![ - adventures/svelte-mapbox) [beyonk-adventures/svelte-mapbox](https://github.com/beyonk-adventures/svelte-mapbox) — MapBox Map and Autocomplete.
  - ![ - svelte) [anoram/leaflet-svelte](https://github.com/anoram/leaflet-svelte) — Wrapper for Leaflet.
  - ![ - adventures/svelte-googlemaps) [beyonk-adventures/svelte-googlemaps](https://github.com/beyonk-adventures/svelte-googlemaps) — Google Maps Components.
- Buttons
  - ![ - bouncy-btn) [JHethDev/svelte-bouncy-btn](https://github.com/JHethDev/svelte-bouncy-btn) — A bouncy button with variable fonts.
  - ![ - lmxt/descent-ripple) [micha-lmxt/descent-ripple](https://github.com/micha-lmxt/descent-ripple) — Ripple animation for buttons.
- Overlay
  - ![ - simple-modal) [flekschas/svelte-simple-modal](https://github.com/flekschas/svelte-simple-modal) — A simple, small, and content-agnostic modal.
- Tooltip
  - ![ - popover) [vaheqelyan/svelte-popover](https://github.com/vaheqelyan/svelte-popover) — A smart popover component.
- UI Navigation
  - ![ - zoomable) [dimfeld/svelte-zoomable](https://github.com/dimfeld/svelte-zoomable) — Zoomable UI in Svelte.
  - ![ - adventures/svelte-steps) [beyonk-adventures/svelte-steps](https://github.com/beyonk-adventures/svelte-steps) — Progress Steps component.
- Paginator
  - ![ - pagination) [thecodejack/svelte-pagination](https://github.com/thecodejack/svelte-pagination) — Raw SvelteJS component for dynamic pagination.
- Social
  - ![ - adventures/svelte-social-auth) [beyonk-adventures/svelte-social-auth](https://github.com/beyonk-adventures/svelte-social-auth) — Google and Facebook Auth.
  - ![ - adventures/svelte-facebook-pixel) [beyonk-adventures/svelte-facebook-pixel](https://github.com/beyonk-adventures/svelte-facebook-pixel) — Facebook pixel tracking.
  - ![ - adventures/svelte-trustpilot) [beyonk-adventures/svelte-trustpilot](https://github.com/beyonk-adventures/svelte-trustpilot) — Svelte/Vanilla JS Trustpilot Component.
- Custom Scrollbar
  - ![ - slimscroll) [MelihAltintas/svelte-slimscroll](https://github.com/MelihAltintas/svelte-slimscroll) — svelte-slimscroll is a action which can transforms any div into a scrollable area with a nice scrollbar.
- DOM Manipulation
  - ![ - portal) [romkor/svelte-portal](https://github.com/romkor/svelte-portal) — Render outside the DOM of parent component.
  - ![ - teleport) [nasso/svelte-teleport](https://github.com/nasso/svelte-teleport) — Teleport elements across the DOM.
UI Layout
- Form Components
  - ![ - split-pane) [Readiz/svelte-split-pane](https://github.com/Readiz/svelte-split-pane)
  - ![ - grid) [vaheqelyan/svelte-grid](https://github.com/vaheqelyan/svelte-grid) — A responsive, draggable and resizable grid layout.
  - ![ - grid-responsive) [andrelmlins/svelte-grid-responsive](https://github.com/andrelmlins/svelte-grid-responsive) — Responsive grid system based on Bootstrap.
UI Frameworks
- Responsive
  - ![
  - ![ - material-ui) [hperrin/svelte-material-ui](https://github.com/hperrin/svelte-material-ui)
  - ![
  - ![ - toolbox/svelte-toolbox) [svelte-toolbox/svelte-toolbox](https://github.com/svelte-toolbox/svelte-toolbox)
  - ![
  - ![
  - ![ - materialify) [TheComputerM/svelte-materialify](https://github.com/TheComputerM/svelte-materialify) — Inspired by vuetify.
  - ![ - components-svelte) [IBM/carbon-components-svelte](https://github.com/IBM/carbon-components-svelte) — Carbon Design System.
- Mobile
  - ![ - native) [halfnelson/svelte-native](https://github.com/halfnelson/svelte-native) — Svelte controlling native components via Nativescript.
UI Utilities
- Device Input
  - ![ - swipe) [SharifClick/svelte-swipe](https://github.com/SharifClick/svelte-swipe)
  - ![ - liquid-swipe) [tncrazvan/svelte-liquid-swipe](https://github.com/tncrazvan/svelte-liquid-swipe)
  - ![ - swipe) [Anyass3/sidebar-swipe](https://github.com/Anyass3/sidebar-swipe) — Sidebar Swipeable ideally for touch screen devices.
  - ![ - adventures/svelte-scrollspy) [beyonk-adventures/svelte-scrollspy](https://github.com/beyonk-adventures/svelte-scrollspy) — Scroll Spy component
Code Design
- Router
  - ![EmilTholin/svelte-routing - routing) | :white_check_mark: | :white_check_mark: | :x: | :x: | :x: | :x: | :x: | :white_check_mark: | :white_check_mark: | :x: | :x: | :x: | :x: | :white_check_mark: |
  - ![sveltech/routify
  - ![ItalyPaleAle/svelte-spa-router - spa-router) | :x: | :x: | :white_check_mark: | :x: | :white_check_mark: | :x: | :x: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :x: | :x: |
  - ![AlexxNB/tinro
  - ![jorgegorka/svelte-router - router) | :x: | :white_check_mark: | :x: | :x: | :x: | :x: | :x: | :white_check_mark: | :x: | :x: | :x: | :white_check_mark: | :white_check_mark: | :x: |
  - ![pateketrueke/yrv
  - ![easyroute-router/svelte-easyroute - router/svelte-easyroute) | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :x: | :white_check_mark: |
  - ![mefechoel/svelte-navigator - navigator) | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :x: | :x: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :x: | :white_check_mark: | :x: | :x: | :x: |
  - ![PaulMaly/svelte-pathfinder - pathfinder) | :x: | :white_check_mark: | :x: | :white_check_mark: | :x: | :x: | :x: | :x: | :white_check_mark: | :x: | :x: | :x: | :white_check_mark: | :x: |
  - ![bluwy/svelte-router - router) | :x: | :white_check_mark: | :white_check_mark: | :x: | :x: | :white_check_mark: | :x: | :white_check_mark: | :x: | :x: | :white_check_mark: | :x: | :x: | :x: |
  - ![routve/routve
  - ![dievardump/yasp-router - router) | :x: | :white_check_mark: | :white_check_mark: | :x: | :x: | :x: | :x: | :white_check_mark: | :x: | :x: | :white_check_mark: | :white_check_mark: | :x: | :white_check_mark: |
  - ![shaunlee/svelterouter
  - ![
  - ![
  - ![ - nested-router](https://www.npmjs.com/package/abstract-nested-router)
  - ![
  - ![ - router inspired Svelte router.
  - ![ - router) [jorgegorka/svelte-router](https://github.com/jorgegorka/svelte-router) — Includes localisation, guards and nested layouts.
  - ![ - router) [dievardump/yasp-router](https://github.com/dievardump/yasp-router) — Router for Svelte 3.
  - ![ - routing) [EmilTholin/svelte-routing](https://github.com/EmilTholin/svelte-routing) — A declarative Svelte routing library with SSR support.
  - ![ - spa-router) [ItalyPaleAle/svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router) — Router for SPAs using Svelte 3
  - ![ - router/svelte-easyroute) [easyroute-router/svelte-easyroute](https://github.com/easyroute-router/svelte-easyroute) — Like Vue Router. Supports history and hash mode, navigation guards, base path.
  - ![ - navigator) [mefechoel/svelte-navigator](https://github.com/mefechoel/svelte-navigator) — Simple, accessible routing for Svelte.
  - ![ - pathfinder) [PaulMaly/svelte-pathfinder](https://github.com/PaulMaly/svelte-pathfinder) — State-based router for Svelte 3.
  - ![ - router) [bluwy/svelte-router](https://github.com/bluwy/svelte-router) — An easy-to-use SPA router for Svelte.
- Communication with server
  - ![ - query) [SvelteStack/svelte-query](https://github.com/SvelteStack/svelte-query) — Performant and powerful remote data synchronization.
- Form Logic
  - ![ - forms) [mdauner/sveltejs-forms](https://github.com/mdauner/sveltejs-forms) — Declarative forms for Svelte.
  - ![ - use-form) [noahsalvi/svelte-use-form](https://github.com/noahsalvi/svelte-use-form) — Control and validate forms and their inputs.
- CSS / Style
  - ![ - themer) [josefaidt/svelte-themer](https://github.com/josefaidt/svelte-themer) — A theming engine for your Svelte apps using CSS.
- HTML Template
  - ![ - portet/svelte-switch-case) [l-portet/svelte-switch-case](https://github.com/l-portet/svelte-switch-case) — Switch case syntax for Svelte.
- Boilerplate
  - ![ - component-template) [YogliB/svelte-component-template](https://github.com/YogliB/svelte-component-template) — A base for building shareable components.
Performance
- App Size
State Management
- Server-Side Rendering
  - ![
Dev Tools
- Inspect
  - svelte-reactive-debugger
  - ![ - inspector) [qutran/svelte-inspector](https://github.com/qutran/svelte-inspector) — Development helper for inspecting and opening svelte components in your editor.
  - ![ - devtools) [RedHatter/svelte-devtools](https://github.com/RedHatter/svelte-devtools) — Inspect the state and component hierarchies in the Developer Tools.
- Miscellaneous
  - ![ - docs) [AlexxNB/svelte-docs](https://github.com/AlexxNB/svelte-docs) — Write documentation for your Svelte components.
  - ![ - plugin-svelte) [sveltejs/prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte) — Format your svelte components using prettier.
  - ![ - Harris/react-svelte) [Rich-Harris/react-svelte](https://github.com/Rich-Harris/react-svelte) — Use Svelte components inside a React app.
  - ![ - adapter) [pngwn/svelte-adapter](https://github.com/pngwn/svelte-adapter) — Use Svelte components within Vue and React applications.
  - ![ - react) [jesseskinner/svelte-react](https://github.com/jesseskinner/svelte-react) — Use React components inside Svelte apps.
  - ![ - injector) [KoRnFactory/svelte-injector](https://github.com/KoRnFactory/svelte-injector) — Use Svelte components inside other frameworks.
- Test
  - ![ - feature-flag) [vidigas/svelte-feature-flag](https://github.com/vidigas/svelte-feature-flag) — Feature flags (toggle) module.
Miscellaneous
- Miscellaneous
  - ![
  - ![ - plugin-svelte) [DeMoorJasper/parcel-plugin-svelte](https://github.com/DeMoorJasper/parcel-plugin-svelte) — A parcel plugin with svelte support.
- Static Website Generator
  - ![ - A fast blog starter driven by Github discussions for all data.

Programming Languages

Svelte 2

awesome-svelte

UI Components

Editable data grid / spreadsheet

Table

Notification

Tabs

Carousel

Photo / Image

Icons

Miscellaneous

Form Components

Infinite Scroll

Loader

Chart

Tree

Audio / Video

Map

Buttons

Overlay

Tooltip

UI Navigation

Paginator

Social

Custom Scrollbar

DOM Manipulation

UI Layout

Form Components

UI Frameworks

Responsive

Mobile

UI Utilities

Device Input

Code Design

Router

Communication with server

Form Logic

CSS / Style

HTML Template

Boilerplate

Performance

App Size

State Management

Server-Side Rendering

Dev Tools

Inspect

Miscellaneous

Test

Miscellaneous

Miscellaneous

Static Website Generator