writable

Create a writable store that allows both updating and reading by subscription

Create a Writable store that allows both updating and reading by subscription.

Usage

import { writable } from 'svelte/store';

const count = writable(0);

Signature

function writable<T>(
  value?: T,
  start?: StartStopNotifier<T>
): Writable<T>

value · T

Initial value of the store.

start · StartStopNotifier<T>

A function that is called when the first subscriber subscribes. It receives set and update functions and optionally returns a cleanup function that is called when the last subscriber unsubscribes.

type StartStopNotifier<T> = (
  set: (value: T) => void,
  update: (fn: Updater<T>) => void
) => void | (() => void)

Writable<T> · object

A writable store object with the following methods:

subscribe · (run: Subscriber<T>, invalidate?: () => void) => Unsubscriber

Subscribe to value changes. The run callback is called immediately with the current value and then called again whenever the value changes.

Returns an unsubscriber function.

set · (value: T) => void

Set the store value and inform all subscribers.

update · (updater: Updater<T>) => void

Update the store value using a callback function that receives the current value and returns the new value. Informs all subscribers.

type Updater<T> = (value: T) => T

Store Contract

A writable store implements the following contract:

subscribe

Subscribe to value changes:

const unsubscribe = store.subscribe((value) => {
  console.log('Value changed:', value);
});

// Later, cleanup
unsubscribe();

set

Set the store value directly:

count.set(5);

update

Update the store value using the current value:

count.update(n => n + 1);

Examples

Basic writable store

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

  const count = writable(0);

  function increment() {
    count.update(n => n + 1);
  }

  function reset() {
    count.set(0);
  }
</script>

<h1>Count: {$count}</h1>
<button on:click={increment}>+1</button>
<button on:click={reset}>Reset</button>

Store with start/stop logic

import { writable } from 'svelte/store';

function createTimer() {
  const { subscribe, set } = writable(0, (set) => {
    // Called when first subscriber subscribes
    console.log('Timer started');
    
    const interval = setInterval(() => {
      set(Date.now());
    }, 1000);

    // Cleanup function called when last subscriber unsubscribes
    return () => {
      console.log('Timer stopped');
      clearInterval(interval);
    };
  });

  return { subscribe };
}

const time = createTimer();

Auto-subscription with $

In Svelte components, you can use the $ prefix to automatically subscribe and unsubscribe:

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

  const name = writable('World');
</script>

<!-- Automatically subscribes and cleans up -->
<h1>Hello {$name}!</h1>

<input bind:value={$name} />

This is equivalent to:

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

  const name = writable('World');
  let nameValue;

  const unsubscribe = name.subscribe(value => {
    nameValue = value;
  });

  onDestroy(unsubscribe);
</script>

<h1>Hello {nameValue}!</h1>

TypeScript

import { writable, type Writable } from 'svelte/store';

interface User {
  name: string;
  age: number;
}

const user: Writable<User> = writable({
  name: 'Alice',
  age: 30
});

user.update(u => ({ ...u, age: u.age + 1 }));