Data

Tools

Indexes

Applications

Experiments

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

      • ![ - 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)
      • ![
      • pstanoev/simple-svelte-autocomplete
      • pavish/select-madu
      • ![ - checkbox) [HosseinShabani/svelte-checkbox](https://github.com/HosseinShabani/svelte-checkbox) — A checkbox.
      • ![ - 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.
      • ![ - 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.
      • ![ - 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.

    • 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.
      • ![ - adventures/svelte-steps) [beyonk-adventures/svelte-steps](https://github.com/beyonk-adventures/svelte-steps) — Progress Steps component.
      • ![ - zoomable) [dimfeld/svelte-zoomable](https://github.com/dimfeld/svelte-zoomable) — Zoomable UI in Svelte.

    • 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)
      • ![ - 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.
      • ![ - 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) [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.

    • 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.

    • 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

  • 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
Categories
UI Components 79 Performance 58 Code Design 32 Dev Tools 10 UI Frameworks 9 UI Utilities 4 Miscellaneous 3 UI Layout 3 State Management 1
Sub Categories
App Size 58 Router 26 Form Components 25 Miscellaneous 13 Responsive 8 Notification 6 Photo / Image 5 Icons 5 Loader 4 Device Input 4 Inspect 3 Chart 3 Carousel 3 Social 3 Map 3 Table 3 Infinite Scroll 3 DOM Manipulation 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
Keywords
typeahead 2 svelte-v3 2 svelte 2 autocomplete 2 typescript 1 tagging 1 tag 1 selector 1 selectmenu 1 selectbox 1 select-multiple 1 select 1 multiselect 1 dropdown 1 svelte-components 1 svelte-component 1