Skip to main content
Create a derived value store by synchronizing one or more readable stores and applying an aggregation function over their input values.

​
Usage

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

const count = writable(1);
const doubled = derived(count, $count => $count * 2);

​
Signature

​
Auto-update variant

function derived<S extends Stores, T>(
  stores: S,
  fn: (values: StoresValues<S>) => T,
  initial_value?: T
): Readable<T>

​
Manual-update variant

function derived<S extends Stores, T>(
  stores: S,
  fn: (
    values: StoresValues<S>,
    set: (value: T) => void,
    update: (fn: Updater<T>) => void
  ) => Unsubscriber | void,
  initial_value?: T
): Readable<T>
​
stores
Readable<any> | Array<Readable<any>>
A single store or an array of stores to derive from.
​
fn
Function
The derivation function. Has two variants:Auto-update: If the function has fewer than 2 parameters, the return value becomes the derived value:
(values: StoresValues<S>) => T
Manual-update: If the function has 2 or more parameters, it receives set and update callbacks and can return a cleanup function:
(
  values: StoresValues<S>,
  set: (value: T) => void,
  update: (fn: Updater<T>) => void
) => Unsubscriber | void
​
initial_value
T
The initial value of the derived store before the derivation function is first called.
​
Readable<T>
object
A readable store containing the derived value.
​
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 any of the input stores change.Returns an unsubscriber function.

​
Examples

​
Derive from single store

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

  const count = writable(1);
  const doubled = derived(count, $count => $count * 2);
</script>

<p>Count: {$count}</p>
<p>Doubled: {$doubled}</p>

<button on:click={() => count.update(n => n + 1)}>Increment</button>

​
Derive from multiple stores

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

  const firstName = writable('Alice');
  const lastName = writable('Smith');

  const fullName = derived(
    [firstName, lastName],
    ([$firstName, $lastName]) => `${$firstName} ${$lastName}`
  );
</script>

<p>Full name: {$fullName}</p>

<input bind:value={$firstName} placeholder="First name" />
<input bind:value={$lastName} placeholder="Last name" />

​
Manual control with set

Use the manual-update variant when you need async operations or more control: 
import { derived, writable } from 'svelte/store';

const userId = writable(1);

const user = derived(
  userId,
  ($userId, set) => {
    // Async operation
    fetch(`/api/users/${$userId}`)
      .then(res => res.json())
      .then(data => set(data));

    // Optional: return cleanup function
    return () => {
      console.log('Cleaning up');
    };
  },
  // Initial value while loading
  { name: 'Loading...', id: 0 }
);

​
Delayed derived store

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

const search = writable('');

// Debounced search query
const debouncedSearch = derived(
  search,
  ($search, set) => {
    const timeout = setTimeout(() => {
      set($search);
    }, 500);

    return () => clearTimeout(timeout);
  },
  ''
);

​
Chaining derived stores

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

const items = writable([
  { name: 'Apple', price: 1.99 },
  { name: 'Banana', price: 0.99 },
  { name: 'Cherry', price: 2.99 }
]);

const prices = derived(
  items,
  $items => $items.map(item => item.price)
);

const total = derived(
  prices,
  $prices => $prices.reduce((sum, price) => sum + price, 0)
);

​
Complex derivation

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

const temperature = writable(0);
const unit = writable('C'); // 'C' or 'F'

const displayTemperature = derived(
  [temperature, unit],
  ([$temperature, $unit]) => {
    if ($unit === 'F') {
      return ($temperature * 9/5) + 32;
    }
    return $temperature;
  }
);

const temperatureText = derived(
  [displayTemperature, unit],
  ([$displayTemperature, $unit]) => {
    return `${$displayTemperature.toFixed(1)}°${$unit}`;
  }
);

​
Auto-subscription with $

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

  const count = writable(1);
  const doubled = derived(count, $count => $count * 2);
</script>

<!-- Automatically subscribes to derived store -->
<h1>Doubled: {$doubled}</h1>

​
TypeScript

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

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

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

const userName: Readable<string> = derived(
  user,
  $user => $user.name
);

const userInfo: Readable<string> = derived(
  user,
  $user => `${$user.name} is ${$user.age} years old`
);