Svelte Stores

When React state needs to be shared across components, you reach for Context + useReducer, Redux, or Zustand. Svelte has built-in stores that cover the same ground with no extra packages:

writable(initial) — any component can read and write
readable(initial, start) — read-only; an external source (timer, WebSocket) drives updates
derived(stores, fn) — computed from one or more stores, updates automatically

The magic is the $ prefix in markup. Writing {$count} in a Svelte template auto-subscribes the component to the store and auto-unsubscribes when the component is destroyed. In plain JS (outside a .svelte file) you call .subscribe() manually.

writable store vs Zustand

// store.ts (Zustand)
import { create } from 'zustand';
export const useCountStore = create(set => ({
  count: 0,
  increment: () => set(s => ({ count: s.count + 1 })),
  reset: () => set({ count: 0 }),
}));

// Counter.tsx
function Counter() {
  const { count, increment, reset } = useCountStore();
  return (
    <>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={reset}>Reset</button>
    </>
  );
}

<!-- stores.ts -->
import { writable } from 'svelte/store';
export const count = writable(0);

<!-- Counter.svelte -->
<script>
  import { count } from './stores.ts';
</script>

<p>Count: {$count}</p>
<button onclick={() => count.update(n => n + 1)}>+</button>
<button onclick={() => count.set(0)}>Reset</button>

A writable store exposes three methods: .set(value) to replace, .update(fn) to transform, and .subscribe(fn) to listen manually. In .svelte markup, the $ prefix handles subscribe/unsubscribe for you.

derived store vs useSelector / useMemo

// With Zustand selector
const double = useCountStore(s => s.count * 2);

// Or with useMemo in a component
const double = React.useMemo(() => count * 2, [count]);

import { writable, derived } from 'svelte/store';

export const count = writable(0);

// Derived store — updates whenever count changes
export const doubleCount = derived(count, $count => $count * 2);

// In a component:
// {$doubleCount}  ← auto-subscribed

derived works with multiple source stores too: derived([a, b], ([$a, $b]) => $a + $b).

Try it: writable + derived inline

SvelteOpen in Svelte Playground ↗ (copies code)

<script>
  import { writable, derived } from 'svelte/store';

  const count = writable(0);
  const doubleCount = derived(count, $c => $c * 2);
  const message = derived(count, $c =>
    $c === 0 ? 'Get started!' : $c > 9 ? 'Double digits!' : 'Keep going...'
  );
</script>

<div style="display:flex;gap:0.5rem;align-items:center;margin-bottom:0.75rem">
  <button onclick={() => count.update(n => n - 1)}>-</button>
  <strong style="min-width:2rem;text-align:center">{$count}</strong>
  <button onclick={() => count.update(n => n + 1)}>+</button>
  <button onclick={() => count.set(0)}>Reset</button>
</div>

<p>Double: <strong>{$doubleCount}</strong></p>
<p>{$message}</p>