List of awesome Svelte stores

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. Just reading through the list might also give you some inspiration for solving your problems more elegantly with a store. PR's welcome.

ℹ️ Many stores are just one small file that you can drop in your project without even having to add a dependency.

Browser Storage

• persistent-svelte-store
  • Built from scratch in TypeScript. Is reactive across tabs or windows using the Broadcast Channel API.
• @macfja/svelte-persistent-store
  • Supports different/custom storage providers
• babichjacob/svelte-localstorage
  • SSR support
• @furudean/svelte-persistent-store
  • Saves and loads data from Window.localStorage or Window.sessionStorage.
• LocalStorage Custom Store
  • Very simple persisting to localstorage.

Browser Navigation

• svelte-store-router
  • 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.
• query-store
  • Writable store that syncs with the browser's search param

Fetching Data

• svelte-query
  • Advanced asynchronous state management including caching, auto-refetching etc. TanStack/query fork?
• svelte-asyncable
  • Tiny, declarative, optimistic, async store
• Fetch Store
  • Convenience wrapper for fetch()
• Periodic Fetch Store
• svelte-websocket-store
  • Send/receive data from a websocket
• @macfja/svelte-invalidable
  • A store that can be requested to update itself

Undo

• storez
  • Writable store with old/new value, change history + undo, debounce, localstorage persist
• @macfja/svelte-undoable
  • Memento design pattern (undo/redo) in Svelte
• svelte-previous
  • Remember previous values - helpful for transitions or a quick undo stack

Time

• @macfja/svelte-expirable
  • A store with items that expire
• @crikey/stores-temporal
  • Time based stores such as debounce and throttle
• svelte-damped-store
  • derived writable store that can suspend updates while user is still interacting

Upgraded Stores

• svelte-store2
  • 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()] (https://svelte.dev/docs#run-time-svelte-store-get) function.
• SvelteStore
  • Track state diffs, Inspect current state, Type warnings, Persistent storage, Infinite loop detection, Testable Actions, Audible activity
• @crikey/stores-promise
  • Create stores from promises
• @crikey/stores-strict
  • Stores using strict inequality checking

Stores affecting each other

• svelte-keyed
  • 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.
• Svelte-nStore
  • Adds get() without subsription and recalculation of store value that is dependent on other stores values
• svelte-writable-derived
  • Two-way data-transforming store
• @crikey/stores-selectable
  • Extend stores with selection semantics, allowing for the easy creation of type safe sub-stores
• @crikey/stores-dynamic
  • Derived stores with dynamic dependency support and natural error handling/propagation

State Machine

• svelte-fsm
  • Only 1kb, very simple, typescript support
  • 9min video introduction
• xstate-svelte
  • Wrapper around xstate. Xstate: 30kb, complete suit with visual editor and support for charts.
  • 7min video introduction
• svate
  • Set of simple state machines for Svelte application (Flag, Flagset..)

(Im)mutability

• svelte-mutable-store
  • Mutable values when using the svelte immutable compiler option
• svelte-restate
  • Immutable store for Svelte with full Typescript support and Redux Devtools integration
• svelte-readonly
  • Very small store that exposes only a readable interface.
• @crikey/stores-immer
  • Immutable Svelte compatible stores using Immer

Inspired State Management

• stores-x
  • State management heaviliy inspired by VueX
• MiniRx
  • RxJS Redux Store that works with TypeScript

CSS

• sw-yx/everything-store
  • CSS related stores for: Tailwind Breakpoints, Media Queries, Dark Mode
• svelte-animation-store
  • Based on Svelte's tweened store, that lets you pause, continue, reset, replay, reverse or adjust speed of a tween.

Notifications

• Notification Toast Custom Store
  • Auto-disappearing notifications/toasts

3rd-Party interaction

• @crikey/stores-rxjs
  • Simple conversion functions to allow interop of Svelte style stores with RxJS style stores
• timhall/svelte-observable
  • Wrapper for Observables (e.g. RxJS)
• svelte-ethers-store
  • ethers.js to interact with the Ethereum Blockchain

Browser Extensions

• svelte-chrome-storage
  • A lightweight abstraction between Svelte stores and Chrome extension storage.
• svelte-webext-storage-adapter
  • Writable stores for Firefox/Chrome extensions using `chrome.storage

Others

• Toggle Store
• svelte-lens-store
  • Functional lenses over Svelte stores
• svelte-xactor
  • Middleware that allows you to easily convert your xactor actors (actors from xstate) into a global store
• svelte-entity-store
  • Simple, generic solution for storing collections of entity objects.