Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
awesome-svelte
Awesome Svelte: Useful resources for developing Svelte applications
https://github.com/rocketlaunchr/awesome-svelte
Last synced: 4 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
-
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.
-
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.
- ![ - feather-icons) [dylanblokhuis/svelte-feather-icons](https://github.com/dylanblokhuis/svelte-feather-icons) — Beautiful open source icons.
- ![ - adventures/svelte-simple-icons) [beyonk-adventures/svelte-simple-icons](https://github.com/beyonk-adventures/svelte-simple-icons) — Simple Brand 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)
- ![
- pstanoev/simple-svelte-autocomplete
- pavish/select-madu
- ![ - 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.
- ![ - 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.
- ![ - checkbox) [HosseinShabani/svelte-checkbox](https://github.com/HosseinShabani/svelte-checkbox) — A checkbox.
- ![ - 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.
- ![ - item-list) [Zimtir/svelte-item-list](https://github.com/Zimtir/svelte-item-list) — Item list.
- ![ - 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.
-
Overlay
- ![ - simple-modal) [flekschas/svelte-simple-modal](https://github.com/flekschas/svelte-simple-modal) — A simple, small, and content-agnostic modal.
-
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.
-
Buttons
-
Chart
- ![ - Harris/pancake) [Rich-Harris/pancake](https://github.com/Rich-Harris/pancake) — Experimental charting library for Svelte.
- ![ - 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.
-
Tree
- ![ - tree) [esinx/svelte-tree](https://github.com/esinx/svelte-tree) — A tree-like outline view.
-
UI Navigation
-
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.
- ![ - adventures/svelte-googlemaps) [beyonk-adventures/svelte-googlemaps](https://github.com/beyonk-adventures/svelte-googlemaps) — Google Maps Components.
- ![ - svelte) [anoram/leaflet-svelte](https://github.com/anoram/leaflet-svelte) — Wrapper for Leaflet.
-
Infinite Scroll
- ![ - 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/).
-
Tooltip
- ![ - popover) [vaheqelyan/svelte-popover](https://github.com/vaheqelyan/svelte-popover) — A smart popover 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.
-
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.
-
DOM Manipulation
-
-
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)
- ![ - adventures/svelte-scrollspy) [beyonk-adventures/svelte-scrollspy](https://github.com/beyonk-adventures/svelte-scrollspy) — Scroll Spy component
- ![ - swipe) [Anyass3/sidebar-swipe](https://github.com/Anyass3/sidebar-swipe) — Sidebar Swipeable ideally for touch screen devices.
-
-
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.
- ![ - 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.
- ![ - router) [dievardump/yasp-router](https://github.com/dievardump/yasp-router) — Router for Svelte 3.
-
Form Logic
-
Communication with server
- ![ - query) [SvelteStack/svelte-query](https://github.com/SvelteStack/svelte-query) — Performant and powerful remote data synchronization.
-
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
- Does Svelte Scale?
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- ![ - it-will-scale) [halfnelson/svelte-it-will-scale](https://github.com/halfnelson/svelte-it-will-scale) — Generate a chart showing svelte's overhead.
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
- JavaScript Frameworks, Performance Comparison 2020
-
-
State Management
-
Server-Side Rendering
-
-
Dev Tools
-
Test
- ![ - feature-flag) [vidigas/svelte-feature-flag](https://github.com/vidigas/svelte-feature-flag) — Feature flags (toggle) module.
-
Inspect
- svelte-reactive-debugger
- ![ - devtools) [RedHatter/svelte-devtools](https://github.com/RedHatter/svelte-devtools) — Inspect the state and component hierarchies in the Developer Tools.
- ![ - inspector) [qutran/svelte-inspector](https://github.com/qutran/svelte-inspector) — Development helper for inspecting and opening svelte components in your editor.
-
Miscellaneous
- ![ - 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.
- ![ - docs) [AlexxNB/svelte-docs](https://github.com/AlexxNB/svelte-docs) — Write documentation for your Svelte components.
- ![ - 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.
-
-
Miscellaneous
Programming Languages
Categories
Sub Categories
App Size
39
Router
26
Form Components
25
Miscellaneous
13
Responsive
8
Notification
6
Icons
5
Photo / Image
4
Loader
4
Device Input
4
Inspect
3
Chart
3
Carousel
3
Social
3
Map
3
Table
3
DOM Manipulation
2
Infinite Scroll
2
UI Navigation
2
Form Logic
2
Buttons
2
HTML Template
1
Communication with server
1
Mobile
1
Test
1
Server-Side Rendering
1
Editable data grid / spreadsheet
1
Tooltip
1
CSS / Style
1
Overlay
1
Custom Scrollbar
1
Tree
1
Tabs
1
Paginator
1
Audio / Video
1
Boilerplate
1
Static Website Generator
1