└── README.md /README.md: -------------------------------------------------------------------------------- 1 | 2 | # List of awesome Svelte stores 3 | There are many very useful svelte stores that might make your life easier without you knowing that they exist. Hence this list to surface those gems. 4 | Just reading through the list might also give you some inspiration for solving your problems more elegantly with a store. PR's welcome. 5 | 6 | ℹ️ Many stores are just one small file that you can drop in your project without even having to add a dependency. 7 | 8 | 9 | ## Browser Storage 10 | - [persistent-svelte-store](https://github.com/omer-g/persistent-svelte-store) 11 | - Built from scratch in TypeScript. Is reactive across tabs or windows using the Broadcast Channel API. 12 | - [@macfja/svelte-persistent-store](https://github.com/MacFJA/svelte-persistent-store) 13 | - Supports different/custom storage providers 14 | - [babichjacob/svelte-localstorage](https://github.com/babichjacob/svelte-localstorage) 15 | - SSR support 16 | - [@furudean/svelte-persistent-store](https://github.com/furudean/svelte-persistent-store) 17 | - Saves and loads data from `Window.localStorage` or `Window.sessionStorage`. 18 | - [LocalStorage Custom Store](https://svelte.dev/repl/e6c0e3db7d064d43a7e4559b2862e1f7?version=3.48.0) 19 | - Very simple persisting to localstorage. 20 | 21 | ## Browser Navigation 22 | - [svelte-store-router](https://github.com/zyxd/svelte-store-router) 23 | - Router for Svelte that suggests that routing is just another global state and History API changes are just an optional side-effects of this state. 24 | - [query-store](https://github.com/buhrmi/query-store ) 25 | - Writable store that syncs with the browser's search param 26 | 27 | ## Fetching Data 28 | - [svelte-query](https://github.com/SvelteStack/svelte-query) 29 | - Advanced asynchronous state management including caching, auto-refetching etc. TanStack/query fork? 30 | - [svelte-asyncable](https://github.com/PaulMaly/svelte-asyncable ) 31 | - Tiny, declarative, optimistic, async store 32 | - [Fetch Store](https://svelte.dev/repl/a74f1ed8e3eb4aec82cb743e13443ee4?version=3.48.0) 33 | - Convenience wrapper for `fetch()` 34 | - [Periodic Fetch Store](https://svelte.dev/repl/b8fa406464d6434fba97902ac78b5e2b?version=3.48.0) 35 | - [svelte-websocket-store](https://github.com/arlac77/svelte-websocket-store) 36 | - Send/receive data from a websocket 37 | - [@macfja/svelte-invalidable](https://github.com/MacFJA/svelte-invalidable ) 38 | - A store that can be requested to update itself 39 | 40 | ## Undo 41 | - [storez](https://github.com/plrenaudin/svelte-storez ) 42 | - Writable store with old/new value, change history + undo, debounce, localstorage persist 43 | - [@macfja/svelte-undoable](https://github.com/macfja/svelte-undoable ) 44 | - Memento design pattern (undo/redo) in Svelte 45 | - [svelte-previous](https://github.com/bryanmylee/svelte-previous) 46 | - Remember previous values - helpful for transitions or a quick undo stack 47 | 48 | ## Time 49 | - [@macfja/svelte-expirable](https://github.com/MacFJA/svelte-expirable ) 50 | - A store with items that expire 51 | - [@crikey/stores-temporal](https://www.npmjs.com/package/@crikey/stores-temporal) 52 | - Time based stores such as debounce and throttle 53 | - [svelte-damped-store](https://github.com/aredridel/svelte-damped-store) 54 | - derived writable store that can suspend updates while user is still interacting 55 | 56 | ## Upgraded Stores 57 | - [svelte-store2](https://github.com/vkurko/svelte-store2 ) 58 | - Adds a `get()` function to writable, derived and readable that returns the actual value without subscribing/ubsubscribing in the background like svelte's normal [get()] 59 | (https://svelte.dev/docs#run-time-svelte-store-get) function. 60 | - [SvelteStore](https://github.com/gitbreaker222/SvelteStore ) 61 | - Track state diffs, Inspect current state, Type warnings, Persistent storage, Infinite loop detection, Testable Actions, Audible activity 62 | - [@crikey/stores-promise](https://www.npmjs.com/package/@crikey/stores-promise) 63 | - Create stores from promises 64 | - [@crikey/stores-strict](https://www.npmjs.com/package/@crikey/stores-strict) 65 | - Stores using strict inequality checking 66 | 67 | ## Stores affecting each other 68 | - [svelte-keyed](https://github.com/bryanmylee/svelte-keyed) 69 | - Takes a writable object store and a keypath, and returns a writable store whose changes are reflected on the original store. Properties are accessed with dot notation, and arrays can be indexed with bracket notation. 70 | - [Svelte-nStore](https://github.com/lacikawiz/svelte-nStore) 71 | - Adds `get()` without subsription and recalculation of store value that is dependent on other stores values 72 | - [svelte-writable-derived](https://github.com/PixievoltNo1/svelte-writable-derived ) 73 | - Two-way data-transforming store 74 | - [@crikey/stores-selectable](https://www.npmjs.com/package/@crikey/stores-selectable) 75 | - Extend stores with selection semantics, allowing for the easy creation of type safe sub-stores 76 | - [@crikey/stores-dynamic](https://www.npmjs.com/package/@crikey/stores-dynamic) 77 | - Derived stores with dynamic dependency support and natural error handling/propagation 78 | 79 | ## State Machine 80 | - [svelte-fsm](https://github.com/kenkunz/svelte-fsm) 81 | - Only 1kb, very simple, typescript support 82 | - [9min video introduction](https://www.youtube.com/watch?v=3_D-3HPUdEI) 83 | - [xstate-svelte](https://xstate.js.org/docs/packages/xstate-svelte/#quick-start) 84 | - Wrapper around [xstate](https://xstate.js.org/). Xstate: 30kb, complete suit with visual editor and support for charts. 85 | - [7min video introduction](https://www.youtube.com/watch?v=NIfQsc5XAzU) 86 | - [svate](https://github.com/AlexxNB/svate ) 87 | - Set of simple state machines for Svelte application (Flag, Flagset..) 88 | 89 | ## (Im)mutability 90 | - [svelte-mutable-store](https://github.com/feltcoop/svelte-mutable-store) 91 | - Mutable values when using the svelte `immutable` compiler option 92 | - [svelte-restate](https://github.com/endenwer/svelte-restate ) 93 | - Immutable store for Svelte with full Typescript support and Redux Devtools integration 94 | - [svelte-readonly](https://github.com/Crisfole/svelte-readonly) 95 | - Very small store that exposes only a readable interface. 96 | - [@crikey/stores-immer](https://www.npmjs.com/package/@crikey/stores-immer) 97 | - Immutable Svelte compatible stores using [Immer](https://immerjs.github.io/immer/) 98 | 99 | ## Inspired State Management 100 | - [stores-x](https://github.com/Anyass3/stores-x) 101 | - State management heaviliy inspired by [VueX](https://github.com/vuejs/vuex) 102 | - [MiniRx](https://spierala.github.io/mini-rx-store/) 103 | - RxJS Redux Store that works with TypeScript 104 | 105 | ## CSS 106 | - [sw-yx/everything-store](https://github.com/sw-yx/everything-store) 107 | - CSS related stores for: Tailwind Breakpoints, Media Queries, Dark Mode 108 | - [svelte-animation-store](https://github.com/joshnuss/svelte-animation-store) 109 | - Based on Svelte's tweened store, that lets you pause, continue, reset, replay, reverse or adjust speed of a tween. 110 | 111 | ## Notifications 112 | - [Notification Toast Custom Store](https://svelte.dev/repl/e166b01bc46149a49895c1622d26ce7e?version=3.48.0) 113 | - Auto-disappearing notifications/toasts 114 | 115 | ## 3rd-Party interaction 116 | - [@crikey/stores-rxjs](https://www.npmjs.com/package/@crikey/stores-rxjs) 117 | - Simple conversion functions to allow interop of Svelte style stores with [RxJS](https://rxjs.dev/) style stores 118 | - [timhall/svelte-observable](https://github.com/timhall/svelte-observable) 119 | - Wrapper for Observables (e.g. [RxJS](https://rxjs.dev/)) 120 | - [svelte-ethers-store](https://www.npmjs.com/package/svelte-ethers-store) 121 | - ethers.js to interact with the Ethereum Blockchain 122 | 123 | ## Browser Extensions 124 | - [svelte-chrome-storage](https://github.com/shaun-wild/svelte-chrome-storage) 125 | - A lightweight abstraction between Svelte stores and Chrome extension storage. 126 | - [svelte-webext-storage-adapter](https://github.com/PixievoltNo1/svelte-webext-storage-adapter ) 127 | - Writable stores for Firefox/Chrome extensions using `chrome.storage 128 | 129 | ## Others 130 | - [Toggle Store](https://svelte.dev/repl/a3cb054398a94698a4cfe4c44f33b923?version=3.48.0) 131 | - [svelte-lens-store](https://github.com/aredridel/svelte-lens-store) 132 | - Functional lenses over Svelte stores 133 | - [svelte-xactor](https://github.com/wobsoriano/svelte-xactor) 134 | - Middleware that allows you to easily convert your xactor actors (actors from [xstate](https://xstate.js.org/)) into a global store 135 | - [svelte-entity-store](https://github.com/tony-sull/svelte-entity-store) 136 | - Simple, generic solution for storing collections of entity objects. 137 | --------------------------------------------------------------------------------