writable() Store

Definition

writable() is the Svelte function that creates a writable store — a small container for a value that lives outside any single component and can be read and changed from anywhere. You import it from svelte/store, call it with an initial value, and get back an object with three methods: subscribe, set and update. It is Svelte's answer to state that must be shared, where a component's private let variable cannot reach.

Stores complement the in-component reactivity of assignment and the $: reactive statement. For the concept of shared state and when to reach for a store, see Svelte reactivity — the basics.

Syntax

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

  const count = writable(0);   // initialValue is 0
</script>

Parameters

The one argument you always pass is initialValue. Provide it directly for a simple default; the optional start notifier exists for stores that need to attach to an outside source when first used.

Return value

writable() returns a store object with exactly three methods:

• subscribe(fn) — registers fn to be called immediately with the current value and again after every change. It returns an unsubscribe function you call to stop listening. This is the low-level contract that makes a value a store.
• set(value) — replaces the store's value with value and notifies every subscriber. Use it when the next value does not depend on the current one.
• update(fn) — passes the current value to fn and stores what it returns, for example count.update((n) => n + 1). Use it when the next value is derived from the previous one.
• The $store shorthand — inside a component, prefixing the store with $ (as $count) auto-subscribes: Svelte reads the current value reactively, re-renders on change, and unsubscribes automatically when the component is destroyed. You can also assign to $count directly, which Svelte compiles to a set call.

The $store auto-subscription is why stores feel native rather than bolted on: you almost never call subscribe yourself in a component, because the $ prefix manages the whole subscription lifecycle for you. Outside a component — in a plain .js module — you subscribe manually and hold onto the returned unsubscribe function:

import { writable } from 'svelte/store';

const count = writable(0);

const unsubscribe = count.subscribe((value) => {
  console.log('count is now', value);
});

count.set(1);       // logs: count is now 1
count.update((n) => n + 1); // logs: count is now 2
unsubscribe();      // stop listening

Examples

A counter store read via $store

The store holds the count; {$count} reads it reactively with the auto-subscription, and update bumps it from its previous value. No subscribe call appears — the $ prefix handles it.

set versus update

update derives the next value from the current one; set replaces it outright. Here add uses update because it counts up from the previous value, while reset uses set because it does not care what the value was.

Browser & runtime support

writable() is part of the svelte/store module in Svelte 3, 4 and 5, so store code written for Svelte 4 keeps working. Alongside it, svelte/store also exports readable for values that should not be set from outside and derived for a store computed from other stores. In Svelte 5 much shared state can also live in runes, but the store contract remains fully supported and is still the right tool for streams and cross-component state.