Svelte State Management

Svelte 4 Writable Store

// fooStore.ts
import { type Writable, writable } from "svelte/store";
 
function createFoo() {
  const { subscribe, set, update }: Writable<number> = writable(0);
  return {
    subscribe,
    set: (value: number) => set(value),
    add: (value: number) => update((x: number) => x + value),
    triple: () => update((x: number) => x * 3),
    clear: () => set(0),
  };
}
export const foo = createFoo();

Derived store:

// fooStore.ts
import { derived, writable } from "svelte/store";
 
export const bar = writable(1);
export const baz = writable(2);
export const foo = derived(
  [bar, baz],
  ([$bar, $baz]) => Math.min($bar, $baz) / 2,
);

Svelte 5 Rune Store

// foo.svelte.ts (must be placed inside a *.svelte.ts file)
function createFoo(initialCount = 0) {
  let foo = $state(initialCount);
 
  return {
    get foo() {
      return foo;
    },
    set foo(value) {
      foo = value;
    },
    add(value) {
      foo += value;
    },
    triple() {
      foo *= 3;
    },
  };
}
export const foo = createFoo();

Or class if you prefer:

// foo.svelte.ts
export class Foo {
  foo = $state(0);
 
  constructor(initialCount = 0) {
    this.foo = initialCount;
  }
 
  add(value) {
    this.foo += value;
  }
 
  triple() {
    this.foo *= 3;
  }
}
 
export const foo = new Foo();

Class doesn’t need get/set method, just read/write it directly:

// In a component:
// Reading:
console.log(foo.foo);
// Writing (triggers UI updates automatically):
foo.foo = 10;

Derived rune:

// foo.svelte.ts (must be placed inside a *.svelte.ts file)
function createFoo(initialBar = 1, initialBaz = 2) {
  let bar = $state(initialBar);
  let baz = $state(initialBaz);
  let foo = $derived(Math.min(bar, baz) / 2);
 
  return {
    get bar() {
      return bar;
    },
    set bar(value) {
      bar = value;
    },
    get baz() {
      return baz;
    },
    set baz(value) {
      baz = value;
    },
    get foo() {
      return foo;
    },
  };
}
export const foo = createFoo();

Different Ways To Share State In Svelte 5