Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rocketlaunchr/awesome-svelte
Awesome Svelte: Useful resources for developing Svelte applications
https://github.com/rocketlaunchr/awesome-svelte
List: awesome-svelte
awesome awesome-list awesome-lists svelte sveltejs
Last synced: about 1 month ago
JSON representation
Awesome Svelte: Useful resources for developing Svelte applications
- Host: GitHub
- URL: https://github.com/rocketlaunchr/awesome-svelte
- Owner: rocketlaunchr
- License: cc0-1.0
- Created: 2021-01-06T00:07:43.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-03-06T10:07:27.000Z (8 months ago)
- Last Synced: 2024-05-28T23:34:06.534Z (5 months ago)
- Topics: awesome, awesome-list, awesome-lists, svelte, sveltejs
- Homepage: https://svelte.news
- Size: 164 KB
- Stars: 301
- Watchers: 12
- Forks: 15
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- more-awesome - Svelte Components - Useful resources for developing Svelte applications. (Front-End Development)
- awesome-web - Awesome Svelte
- ultimate-awesome - awesome-svelte - Awesome Svelte: Useful resources for developing Svelte applications. (Other Lists / PowerShell Lists)
README
⭐ the project to show your appreciation. :arrow_upper_right:
## Table of Contents
- [UI Components](#ui-components)
- [Editable data grid / spreadsheet](#editable-data-grid--spreadsheet)
- [Table](#table)
- [Infinite Scroll](#infinite-scroll)
- [Overlay](#overlay)
- [Notification](#notification)
- [Tooltip](#tooltip)
- [Menu](#menu)
- [Sticky](#sticky)
- [Tabs](#tabs)
- [Loader](#loader)
- [Carousel](#carousel)
- [Buttons](#buttons)
- [Collapse](#collapse)
- [Chart](#chart)
- [Tree](#tree)
- [UI Navigation](#ui-navigation)
- [Custom Scrollbar](#custom-scrollbar)
- [Audio / Video](#audio--video)
- [Map](#map)
- [Time / Date / Age](#time--date--age)
- [Photo / Image](#photo--image)
- [Icons](#icons)
- [Paginator](#paginator)
- [Markdown Viewer](#markdown-viewer)
- [Canvas](#canvas)
- [Social](#social)
- [DOM Manipulation](#dom-manipulation)
- [Miscellaneous](#miscellaneous)
- [Form Components](#form-components)
- [Date / Time picker](#date--time-picker)
- [Emoji picker](#emoji-picker)
- [Input Types](#input-types)
- [Autocomplete](#autocomplete)
- [Select](#select)
- [Color Picker](#color-picker)
- [Toggle](#toggle)
- [Slider](#slider)
- [Radio Button](#radio-button)
- [Type Select](#type-select)
- [Tag Input](#tag-input)
- [Autosize Input / Textarea](#autosize-input--textarea)
- [Star Rating](#star-rating)
- [Drag and Drop](#drag-and-drop)
- [Sortable List](#sortable-list)
- [Rich Text Editor](#rich-text-editor)
- [Markdown Editor](#markdown-editor)
- [Image Editing](#image-editing)
- [Form Component Collections](#form-component-collections)
- [Miscellaneous](#miscellaneous-1)
- [Syntax Highlight](#syntax-highlight)
- [UI Layout](#ui-layout)
- [UI Animation](#ui-animation)
- [Parallax](#parallax)
- [UI Frameworks](#ui-frameworks)
- [Responsive](#responsive)
- [Material Design](#material-design)
- [Carbon](#carbon)
- [Bootstrap](#bootstrap)
- [AgnosticUI](#agnosticui)
- [Mobile](#mobile)
- [Component Collections](#component-collections)
- [UI Utilities](#ui-utilities)
- [Reporter](#reporter)
- [Visibility Reporter](#visibility-reporter)
- [Measurement Reporter](#measurement-reporter)
- [Device Input](#device-input)
- [Keyboard Events](#keyboard-events)
- [Scroll Events](#scroll-events)
- [Touch Swipe](#touch-swipe)
- [Mouse Events](#mouse-events)
- [Meta Tags](#meta-tags)
- [Portal](#portal)
- [Test User Behavior](#test-user-behavior)
- [Code Design](#code-design)
- [Data Store](#data-store)
- [Form Logic](#form-logic)
- [Router](#router)
- [Props from server](#props-from-server)
- [Communication with server](#communication-with-server)
- [CSS / Style](#css--style)
- [HTML Template](#html-template)
- [Isomorphic Apps](#isomorphic-apps)
- [Boilerplate](#boilerplate)
- [Miscellaneous](#miscellaneous-2)
- [Utilities](#utilities)
- [i18n](#i18n)
- [Framework bindings / integrations](#framework-bindings--integrations)
- [Integrations with Third Party Services](#integrations-with-third-party-services)
- [Performance](#performance)
- [UI](#ui)
- [Inspect](#inspect)
- [Lazy Load](#lazy-load)
- [App Size](#app-size)
- [Server-Side Rendering](#server-side-rendering)
- [State Management](#state-management)
- [Dev Tools](#dev-tools)
- [Test](#test)
- [Inspect](#inspect-1)
- [Miscellaneous](#miscellaneous-3)
- [Miscellaneous](#miscellaneous-4)
- [Static Website Generator](#static-website-generator)
- [Cloud Solutions](#cloud-solutions)
- [Databases](#databases)
## UI Components
### Editable data grid / spreadsheet
- [](https://github.com/bsssshhhhhhh/svelte-data-grid) [bsssshhhhhhh/svelte-data-grid](https://github.com/bsssshhhhhhh/svelte-data-grid) — Lightweight and powerful data grid.
### Table
- [](https://github.com/dasDaniel/svelte-table) [dasDaniel/svelte-table](https://github.com/dasDaniel/svelte-table) — Table implementation that allows sorting and filtering.
- [](https://github.com/vincjo/svelte-simple-datatables) [vincjo/svelte-simple-datatables](https://github.com/vincjo/svelte-simple-datatables)
- [](https://github.com/ivosdc/svelte-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.
### Infinite Scroll
- [](https://github.com/Skayo/svelte-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.
- [](https://github.com/Skayo/svelte-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/).
### Overlay
_Display overlay / modal / alert / dialog / lightbox / popup_
- [](https://github.com/flekschas/svelte-simple-modal) [flekschas/svelte-simple-modal](https://github.com/flekschas/svelte-simple-modal) — A simple, small, and content-agnostic modal.
### Notification
- [](https://github.com/kbrgl/svelte-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.
- [](https://github.com/keenethics/svelte-notifications) [keenethics/svelte-notifications](https://github.com/keenethics/svelte-notifications) — Simple and flexible notifications system.
- [](https://github.com/beyonk-adventures/svelte-notifications) [beyonk-adventures/svelte-notifications](https://github.com/beyonk-adventures/svelte-notifications) — Svelte toast notifications.
- [](https://github.com/kevmodrome/svelte-favicon-badge) [kevmodrome/svelte-favicon-badge](https://github.com/kevmodrome/svelte-favicon-badge) — Adds a favicon and a badge.
- [](https://github.com/zerodevx/svelte-toast) [zerodevx/svelte-toast](https://github.com/zerodevx/svelte-toast) — Simple elegant toast notifications.
- [](https://github.com/arthurclemens/dialogic) [arthurclemens/dialogic](https://github.com/arthurclemens/dialogic) — Dialogic: manage dialogs and notifications.
### Tooltip
- [](https://github.com/vaheqelyan/svelte-popover) [vaheqelyan/svelte-popover](https://github.com/vaheqelyan/svelte-popover) — A smart popover component.
### Menu
_Menus / sidebars_
### Sticky
_Fixed headers / scroll-up headers / sticky elements_
### Tabs
[Tabs Component](https://svelte.dev/repl/7373880df7f64107b86f9e86c05f38b4?version=3.5.1) - Tabs Component example.
### Loader
_Loaders / spinners / progress bars — Let the user know that something is loading_
- [](https://github.com/kaisermann/svelte-loadable) [kaisermann/svelte-loadable](https://github.com/kaisermann/svelte-loadable) — Dynamically load a svelte component.
- [](https://github.com/PaulMaly/svelte-content-loader) [PaulMaly/svelte-content-loader](https://github.com/PaulMaly/svelte-content-loader) — Content Loader.
- [](https://github.com/heithemmoumni/svelte-Spinkit) [heithemmoumni/svelte-Spinkit](https://github.com/heithemmoumni/svelte-Spinkit) — A collection of animated loading indicators.
- [](https://github.com/stephane-vanraes/svelte-progresscircle) [stephane-vanraes/svelte-progresscircle](https://github.com/stephane-vanraes/svelte-progresscircle) — Progress Circle.
### Carousel
- [](https://github.com/beyonk-adventures/svelte-carousel) [beyonk-adventures/svelte-carousel](https://github.com/beyonk-adventures/svelte-carousel)
- [](https://github.com/Valexr/svelte-slidy) [Valexr/svelte-slidy](https://github.com/Valexr/svelte-slidy)
- [](https://github.com/sciactive/multicarousel) [sciactive/multicarousel](https://github.com/sciactive/multicarousel) — free multiple item JavaScript carousel.
### Buttons
- [](https://github.com/JHethDev/svelte-bouncy-btn) [JHethDev/svelte-bouncy-btn](https://github.com/JHethDev/svelte-bouncy-btn) — A bouncy button with variable fonts.
- [](https://github.com/micha-lmxt/descent-ripple) [micha-lmxt/descent-ripple](https://github.com/micha-lmxt/descent-ripple) — Ripple animation for buttons.
### Collapse
### Chart
_Display data in charts / graphs / diagrams_
- [](https://github.com/Rich-Harris/pancake) [Rich-Harris/pancake](https://github.com/Rich-Harris/pancake) — Experimental charting library for Svelte.
- [](https://github.com/himynameisdave/svelte-frappe-charts) [himynameisdave/svelte-frappe-charts](https://github.com/himynameisdave/svelte-frappe-charts) — Svelte bindings for frappe-charts.
- [](https://github.com/liyuanqiu/echarts-for-svelte) [liyuanqiu/echarts-for-svelte](https://github.com/liyuanqiu/echarts-for-svelte) — Baidu Echarts(v3.0 & v4.0) components for Svelte wrapper.
### Tree
_Display a tree data structure_
- [](https://github.com/esinx/svelte-tree) [esinx/svelte-tree](https://github.com/esinx/svelte-tree) — A tree-like outline view.
### UI Navigation
_Ways to navigate views_
- [](https://github.com/beyonk-adventures/svelte-steps) [beyonk-adventures/svelte-steps](https://github.com/beyonk-adventures/svelte-steps) — Progress Steps component.
- [](https://github.com/dimfeld/svelte-zoomable) [dimfeld/svelte-zoomable](https://github.com/dimfeld/svelte-zoomable) — Zoomable UI in Svelte.
### Custom Scrollbar
- [](https://github.com/MelihAltintas/svelte-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.
### Audio / Video
- [](https://github.com/meigo/svelte-video-player) [meigo/svelte-video-player](https://github.com/meigo/svelte-video-player) — Video playback interface.
### Map
- [](https://github.com/beyonk-adventures/svelte-mapbox) [beyonk-adventures/svelte-mapbox](https://github.com/beyonk-adventures/svelte-mapbox) — MapBox Map and Autocomplete.
- [](https://github.com/beyonk-adventures/svelte-googlemaps) [beyonk-adventures/svelte-googlemaps](https://github.com/beyonk-adventures/svelte-googlemaps) — Google Maps Components.
- [](https://github.com/anoram/leaflet-svelte) [anoram/leaflet-svelte](https://github.com/anoram/leaflet-svelte) — Wrapper for Leaflet.
### Time / Date / Age
_Display time / date / age_
### Photo / Image
_Display images / photos_
- [](https://github.com/matyunya/svelte-image) [matyunya/svelte-image](https://github.com/matyunya/svelte-image) — Image (pre)processing with Sharp.
- [](https://github.com/johnwalley/compare-image-slider) [johnwalley/compare-image-slider](https://github.com/johnwalley/compare-image-slider) — Compare two images with a slider.
- [](https://github.com/stephane-vanraes/svelte-multitoneimage) [stephane-vanraes/svelte-multitoneimage](https://github.com/stephane-vanraes/svelte-multitoneimage) — A simple image renderer to apply duotone effects.
- [GridGallery](https://svelte.dev/repl/3a1b7fae13b242fe9cd4a4f7aa092fa4?version=3.31.2) — CSS GridGallery.
### Icons
_Display icons / icon set / emojis_
- [](https://github.com/RobBrazier/svelte-awesome) [RobBrazier/svelte-awesome](https://github.com/RobBrazier/svelte-awesome) — Awesome SVG icon component, built with Font Awesome icons.
- [](https://github.com/Cweili/svelte-fa) [Cweili/svelte-fa](https://github.com/Cweili/svelte-fa) — Tiny FontAwesome 5.
- [](https://github.com/AnxiousDarkly/svelte-icons) [AnxiousDarkly/svelte-icons](https://github.com/AnxiousDarkly/svelte-icons)
- [](https://github.com/dylanblokhuis/svelte-feather-icons) [dylanblokhuis/svelte-feather-icons](https://github.com/dylanblokhuis/svelte-feather-icons) — Beautiful open source icons.
- [](https://github.com/beyonk-adventures/svelte-simple-icons) [beyonk-adventures/svelte-simple-icons](https://github.com/beyonk-adventures/svelte-simple-icons) — Simple Brand Icons.
### Paginator
_Display a control element to paginate_
- [](https://github.com/thecodejack/svelte-pagination) [thecodejack/svelte-pagination](https://github.com/thecodejack/svelte-pagination) — Raw SvelteJS component for dynamic pagination.
### Markdown Viewer
_Display parsed markdow source_
### Canvas
_Sketch input using Canvas or SVG_
### Social
- [](https://github.com/beyonk-adventures/svelte-social-auth) [beyonk-adventures/svelte-social-auth](https://github.com/beyonk-adventures/svelte-social-auth) — Google and Facebook Auth.
- [](https://github.com/beyonk-adventures/svelte-facebook-pixel) [beyonk-adventures/svelte-facebook-pixel](https://github.com/beyonk-adventures/svelte-facebook-pixel) — Facebook pixel tracking.
- [](https://github.com/beyonk-adventures/svelte-trustpilot) [beyonk-adventures/svelte-trustpilot](https://github.com/beyonk-adventures/svelte-trustpilot) — Svelte/Vanilla JS Trustpilot Component.
### DOM Manipulation
- [](https://github.com/romkor/svelte-portal) [romkor/svelte-portal](https://github.com/romkor/svelte-portal) — Render outside the DOM of parent component.
- [](https://github.com/nasso/svelte-teleport) [nasso/svelte-teleport](https://github.com/nasso/svelte-teleport) — Teleport elements across the DOM.
### Miscellaneous
- [](https://github.com/henriquehbr/svelte-typewriter) [henriquehbr/svelte-typewriter](https://github.com/henriquehbr/svelte-typewriter) — A simple and reusable typewriter effect.
- [](https://github.com/daybrush/ruler) [daybrush/ruler](https://github.com/daybrush/ruler) — A Ruler component that can draw grids and scroll infinitely.
- [](https://github.com/scottbedard/svelte-heatmap) [scottbedard/svelte-heatmap](https://github.com/scottbedard/svelte-heatmap) — GitHub's contribution graph.
- [](https://github.com/beyonk-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.
- [](https://github.com/beyonk-adventures/svelte-google-analytics) [beyonk-adventures/svelte-google-analytics](https://github.com/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_
- [](https://github.com/6eDesign/svelte-calendar) [6eDesign/svelte-calendar](https://github.com/6eDesign/svelte-calendar) — A lightweight datepicker with neat animations and a unique UX.
- [](https://github.com/YogliB/svelte-fullcalendar) [YogliB/svelte-fullcalendar](https://github.com/YogliB/svelte-fullcalendar) — A Svelte component wrapper around FullCalendar.
- [](https://github.com/beyonk-adventures/svelte-datepicker) [beyonk-adventures/svelte-datepicker](https://github.com/beyonk-adventures/svelte-datepicker)
- [](https://github.com/SharifClick/svelte-touch-datepicker) [SharifClick/svelte-touch-datepicker](https://github.com/SharifClick/svelte-touch-datepicker)
#### Emoji picker
#### Input Types
_Masked inputs, specialized inputs; email / telephone number / credit card / etc._
- [](https://github.com/xnimorz/svelte-input-mask) [xnimorz/svelte-input-mask](https://github.com/xnimorz/svelte-input-mask) — Input masking component.
#### Autocomplete
_Autosuggest / autocomplete / typeahead_
- [](
https://github.com/pstanoev/simple-svelte-autocomplete) [pstanoev/simple-svelte-autocomplete](https://github.com/pstanoev/simple-svelte-autocomplete) — Simple Autocomplete / typeahead component.
#### Select
- [](https://github.com/themarquisdesheric/simply-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.
- [](
https://github.com/pavish/select-madu) [pavish/select-madu](https://github.com/pavish/select-madu) — SelectMadu is a replacement for the select menu, with support for searching, multiple selections, async data loading and more.
#### Color Picker
- [](https://github.com/efeskucuk/svelte-color-picker) [efeskucuk/svelte-color-picker](https://github.com/efeskucuk/svelte-color-picker)
#### Toggle
- [](https://github.com/HosseinShabani/svelte-checkbox) [HosseinShabani/svelte-checkbox](https://github.com/HosseinShabani/svelte-checkbox) — A checkbox.
- [](https://github.com/beyonk-adventures/svelte-toggle) [beyonk-adventures/svelte-toggle](https://github.com/beyonk-adventures/svelte-toggle)
#### Slider
- [](https://github.com/MelihAltintas/svelte-knob) [MelihAltintas/svelte-knob](https://github.com/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_
- [](https://github.com/beyonk-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.
#### Autosize Input / Textarea
#### Star Rating
- [](https://github.com/emrekara37/svelte-rate-it) [emrekara37/svelte-rate-it](https://github.com/emrekara37/svelte-rate-it)
#### Drag and Drop
- [](https://github.com/isaacHagoel/svelte-dnd-action) [isaacHagoel/svelte-dnd-action](https://github.com/isaacHagoel/svelte-dnd-action)
#### Sortable List
_Let the user define an order on a list_
- [](https://github.com/Zimtir/svelte-item-list) [Zimtir/svelte-item-list](https://github.com/Zimtir/svelte-item-list) — Item list.
#### Rich Text Editor
- [](https://github.com/easylogic/svelte-summernote) [easylogic/svelte-summernote](https://github.com/easylogic/svelte-summernote) — Extension for summernote.
#### Markdown Editor
#### Image Editing
_Image manipulation_
- [](https://github.com/ValentinH/svelte-easy-crop) [ValentinH/svelte-easy-crop](https://github.com/ValentinH/svelte-easy-crop) — Crop images.
- [](https://github.com/saabi/svelte-image-encoder) [saabi/svelte-image-encoder](https://github.com/saabi/svelte-image-encoder) — For editing and compressing profile pictures before upload to a server.
#### Form Component Collections
#### Miscellaneous
- [](https://github.com/yazonnile/svelidation) [yazonnile/svelidation](https://github.com/yazonnile/svelidation) — Validation library.
#### Syntax Highlight
## UI Layout
_Components to layout the app's UI_
- [](https://github.com/vaheqelyan/svelte-grid) [vaheqelyan/svelte-grid](https://github.com/vaheqelyan/svelte-grid) — A responsive, draggable and resizable grid layout.
- [](https://github.com/andrelmlins/svelte-grid-responsive) [andrelmlins/svelte-grid-responsive](https://github.com/andrelmlins/svelte-grid-responsive) — Responsive grid system based on Bootstrap.
- [](https://github.com/Readiz/svelte-split-pane) [Readiz/svelte-split-pane](https://github.com/Readiz/svelte-split-pane)
## UI Animation
_Animate transitions_
### Parallax
## UI Frameworks
### Responsive
_Set of components + responsive layout system_
- [](https://github.com/illright/attractions) [illright/attractions](https://github.com/illright/attractions) — A pretty cool UI kit for Svelte.
#### Material Design
- [](https://github.com/hperrin/svelte-material-ui) [hperrin/svelte-material-ui](https://github.com/hperrin/svelte-material-ui)
- [](https://github.com/matyunya/smelte) [matyunya/smelte](https://github.com/matyunya/smelte) — UI framework with material components built with Svelte and Tailwind CSS.
- [](https://github.com/TheComputerM/svelte-materialify) [TheComputerM/svelte-materialify](https://github.com/TheComputerM/svelte-materialify) — Inspired by vuetify.
- [](https://github.com/svelte-toolbox/svelte-toolbox) [svelte-toolbox/svelte-toolbox](https://github.com/svelte-toolbox/svelte-toolbox)
#### Carbon
- [](https://github.com/IBM/carbon-components-svelte) [IBM/carbon-components-svelte](https://github.com/IBM/carbon-components-svelte) — Carbon Design System.
#### Bootstrap
- [](https://github.com/bestguy/sveltestrap) [bestguy/sveltestrap](https://github.com/bestguy/sveltestrap) — Bootstrap 4 components for Svelte.
#### AgnosticUI
- [](https://github.com/agnosticui/angosticui) [agnosticui](https://github.com/agnosticui/agnosticui) — Accessible Svelte Component Primitives (that also work with React, Vue 3, and Angular).
### Mobile
- [](https://github.com/halfnelson/svelte-native) [halfnelson/svelte-native](https://github.com/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
- [](https://github.com/beyonk-adventures/svelte-scrollspy) [beyonk-adventures/svelte-scrollspy](https://github.com/beyonk-adventures/svelte-scrollspy) — Scroll Spy component
#### Touch Swipe
- [](https://github.com/SharifClick/svelte-swipe) [SharifClick/svelte-swipe](https://github.com/SharifClick/svelte-swipe)
- [](https://github.com/tncrazvan/svelte-liquid-swipe) [tncrazvan/svelte-liquid-swipe](https://github.com/tncrazvan/svelte-liquid-swipe)
- [](https://github.com/Anyass3/sidebar-swipe) [Anyass3/sidebar-swipe](https://github.com/Anyass3/sidebar-swipe) — Sidebar Swipeable ideally for touch screen devices.
#### Mouse Events
### Meta Tags
_Set meta tags, , 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
- [](https://github.com/mdauner/sveltejs-forms) [mdauner/sveltejs-forms](https://github.com/mdauner/sveltejs-forms) — Declarative forms for Svelte.
- [](https://github.com/noahsalvi/svelte-use-form) [noahsalvi/svelte-use-form](https://github.com/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 |
|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |:------------------: |:------------------: |:------------------: |:---------------------------: |:---------------------------: |:------------------: |:------------------: |:------------------: |:------------------: |:------------------: |:------------------: |:------------------: |:------------------: |:------------------: |
| [](https://github.com/EmilTholin/svelte-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: |
| [](https://github.com/sveltech/routify) | :white_check_mark: | :white_check_mark: | :x: | :x: | :x: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :x: | :white_check_mark: | :x: |
| [](https://github.com/ItalyPaleAle/svelte-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: |
| [](https://github.com/AlexxNB/tinro) | :x: | :white_check_mark: | :white_check_mark: | :x: | :white_check_mark: | :x: | :white_check_mark: | :white_check_mark: | :x: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: |
| [](https://github.com/jorgegorka/svelte-router) | :x: | :white_check_mark: | :x: | :x: | :x: | :x: | :x: | :white_check_mark: | :x: | :x: | :x: | :white_check_mark: | :white_check_mark: | :x: |
| [](https://github.com/pateketrueke/yrv) | :x: | :white_check_mark: | :white_check_mark: | :x: | :white_check_mark: | :x: | :white_check_mark: | :x: | :x: | :x: | :white_check_mark: | :white_check_mark: | :x: | :x: |
| [](https://github.com/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: |
| [](https://github.com/mefechoel/svelte-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: |
| [](https://github.com/PaulMaly/svelte-pathfinder) | :x: | :white_check_mark: | :x: | :white_check_mark: | :x: | :x: | :x: | :x: | :white_check_mark: | :x: | :x: | :x: | :white_check_mark: | :x: |
| [](https://github.com/bluwy/svelte-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: |
| [](https://github.com/routve/routve) | :x: | :white_check_mark: | :white_check_mark: | :x: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :x: | :white_check_mark: | :white_check_mark: | :x: | :x: |
| [](https://github.com/dievardump/yasp-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: |
| [](https://github.com/shaunlee/svelterouter) | :x: | :white_check_mark: | :white_check_mark: | :x: | :white_check_mark: | :x: | :x: | :x: | :x: | :x: | :x: | :x: | :white_check_mark: | :x: |
- [](https://github.com/EmilTholin/svelte-routing) [EmilTholin/svelte-routing](https://github.com/EmilTholin/svelte-routing) — A declarative Svelte routing library with SSR support.
- [](https://github.com/sveltech/routify) [sveltech/routify](https://github.com/sveltech/routify) — Automated Svelte routes
- [](https://github.com/ItalyPaleAle/svelte-spa-router) [ItalyPaleAle/svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router) — Router for SPAs using Svelte 3
- [](https://github.com/AlexxNB/tinro) [AlexxNB/tinro](https://github.com/AlexxNB/tinro) — Highly declarative, very tiny, dependency free router for Svelte's web applications.
- [](https://github.com/jorgegorka/svelte-router) [jorgegorka/svelte-router](https://github.com/jorgegorka/svelte-router) — Includes localisation, guards and nested layouts.
- [](https://github.com/pateketrueke/yrv) [pateketrueke/yrv](https://github.com/pateketrueke/yrv) — Built on top of [abstract-nested-router](https://www.npmjs.com/package/abstract-nested-router)
- [](https://github.com/easyroute-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.
- [](https://github.com/mefechoel/svelte-navigator) [mefechoel/svelte-navigator](https://github.com/mefechoel/svelte-navigator) — Simple, accessible routing for Svelte.
- [](https://github.com/PaulMaly/svelte-pathfinder) [PaulMaly/svelte-pathfinder](https://github.com/PaulMaly/svelte-pathfinder) — State-based router for Svelte 3.
- [](https://github.com/bluwy/svelte-router) [bluwy/svelte-router](https://github.com/bluwy/svelte-router) — An easy-to-use SPA router for Svelte.
- [](https://github.com/routve/routve) [routve/routve](https://github.com/routve/routve) — Routve is an advanced Svelte 3 router.
- [](https://github.com/dievardump/yasp-router) [dievardump/yasp-router](https://github.com/dievardump/yasp-router) — Router for Svelte 3.
- [](https://github.com/shaunlee/svelterouter) [shaunlee/svelterouter](https://github.com/shaunlee/svelterouter) — Another vue-router inspired Svelte router.
### Props from server
_Component properties asynchronously fetched over the network_
### Communication with server
- [](https://github.com/SvelteStack/svelte-query) [SvelteStack/svelte-query](https://github.com/SvelteStack/svelte-query) — Performant and powerful remote data synchronization.
### CSS / Style
- [](https://github.com/josefaidt/svelte-themer) [josefaidt/svelte-themer](https://github.com/josefaidt/svelte-themer) — A theming engine for your Svelte apps using CSS.
### HTML Template
- [](https://github.com/l-portet/svelte-switch-case) [l-portet/svelte-switch-case](https://github.com/l-portet/svelte-switch-case) — Switch case syntax for Svelte.
### Isomorphic Apps
### Boilerplate
_Scaffold / starter kit / Yeoman generator / stack ensemble / seed_
- [](https://github.com/YogliB/svelte-component-template) [YogliB/svelte-component-template](https://github.com/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
- [](https://github.com/halfnelson/svelte-it-will-scale) [halfnelson/svelte-it-will-scale](https://github.com/halfnelson/svelte-it-will-scale) — Generate a chart showing svelte's overhead.
- [Does Svelte Scale?](https://svelte-scaling.acmion.com/)
- [JavaScript Frameworks, Performance Comparison 2020](https://medium.com/javascript-in-plain-english/javascript-frameworks-performance-comparison-2020-cd881ac21fce)
### Server-Side Rendering
## State Management
- [](https://github.com/dmaevsky/tinyx) [dmaevsky/tinyx](https://github.com/dmaevsky/tinyx) — A tiny state manager for big applications.
## Dev Tools
### Test
- [](https://github.com/vidigas/svelte-feature-flag) [vidigas/svelte-feature-flag](https://github.com/vidigas/svelte-feature-flag) — Feature flags (toggle) module.
### Inspect
- [](https://github.com/RedHatter/svelte-devtools) [RedHatter/svelte-devtools](https://github.com/RedHatter/svelte-devtools) — Inspect the state and component hierarchies in the Developer Tools.
- [](https://github.com/qutran/svelte-inspector) [qutran/svelte-inspector](https://github.com/qutran/svelte-inspector) — Development helper for inspecting and opening svelte components in your editor.
- [svelte-reactive-debugger](https://addons.mozilla.org/en-US/firefox/addon/svelte-reactive-debugger) — Svelte Reactive Debugger.
### Miscellaneous
- [](https://github.com/sveltejs/prettier-plugin-svelte) [sveltejs/prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte) — Format your svelte components using prettier.
- [](https://github.com/Rich-Harris/react-svelte) [Rich-Harris/react-svelte](https://github.com/Rich-Harris/react-svelte) — Use Svelte components inside a React app.
- [](https://github.com/pngwn/svelte-adapter) [pngwn/svelte-adapter](https://github.com/pngwn/svelte-adapter) — Use Svelte components within Vue and React applications.
- [](https://github.com/AlexxNB/svelte-docs) [AlexxNB/svelte-docs](https://github.com/AlexxNB/svelte-docs) — Write documentation for your Svelte components.
- [](https://github.com/jesseskinner/svelte-react) [jesseskinner/svelte-react](https://github.com/jesseskinner/svelte-react) — Use React components inside Svelte apps.
- [](https://github.com/KoRnFactory/svelte-injector) [KoRnFactory/svelte-injector](https://github.com/KoRnFactory/svelte-injector) — Use Svelte components inside other frameworks.
## Miscellaneous
- [](https://github.com/DeMoorJasper/parcel-plugin-svelte) [DeMoorJasper/parcel-plugin-svelte](https://github.com/DeMoorJasper/parcel-plugin-svelte) — A parcel plugin with svelte support.
- [](https://github.com/dominikg/svite) [dominikg/svite](https://github.com/dominikg/svite) — Svelte Integration for vite.
### Static Website Generator
- [](https://github.com/YeungKC/Hakuba) [Hakuba](https://github.com/YeungKC/Hakuba) - A fast blog starter driven by Github discussions for all data.
## Cloud Solutions
### Databases
