Writable vs Readable Store in Svelte: Key Differences and Usage

In Svelte, a writable store allows both reading and updating its value, while a readable store only allows reading its value and updates internally. Use writable when you want components to change the store, and readable when the store updates come from external sources or logic only.

Quick Comparison

Here is a quick side-by-side comparison of writable and readable stores in Svelte.

Factor	Writable Store	Readable Store
Purpose	Store that can be read and updated by components	Store that can only be read; updates internally
Update Access	Public set and update methods	No public update methods; updates via internal logic
Use Case	User input, interactive state	External data sources, timers, subscriptions
API Import	import { writable } from 'svelte/store'	import { readable } from 'svelte/store'
Example	Counter with increment button	Clock showing current time
Subscription	Components subscribe and can trigger updates	Components subscribe but cannot trigger updates

Key Differences

A writable store in Svelte is designed to let components both read and change its value. It exposes set and update methods that allow any subscriber to modify the store's state directly. This makes it ideal for interactive data like form inputs, toggles, or counters where user actions change the state.

On the other hand, a readable store only allows components to read its value. It does not expose methods to change the value externally. Instead, the store updates internally, often through a callback function that runs when the store is created. This pattern suits data that changes over time but should not be directly modified by components, such as data from a timer, WebSocket, or external API.

In summary, writable stores give full control to components to update state, while readable stores provide controlled, internal updates with read-only access for components.

Code Comparison

This example shows a simple counter using a writable store that components can update.

svelte

import { writable } from 'svelte/store';

export const count = writable(0);

// In a Svelte component
<script>
  import { count } from './store.js';

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

<button on:click={increment} aria-label="Increment count">Increment</button>
<p>Count: {$count}</p>

Output

A button labeled 'Increment' and a paragraph showing 'Count: 0' initially; clicking the button increases the count number.

Readable Store Equivalent

This example creates a readable store that updates every second with the current time. Components can only read the time, not change it.

svelte

import { readable } from 'svelte/store';

export const time = readable(new Date(), set => {
  const interval = setInterval(() => {
    set(new Date());
  }, 1000);

  return () => clearInterval(interval);
});

// In a Svelte component
<script>
  import { time } from './store.js';
</script>

<p>Current time: {$time.toLocaleTimeString()}</p>

Output

A paragraph showing the current time updating every second, e.g., 'Current time: 10:15:30 AM'.

When to Use Which

Choose writable stores when your components need to both read and change the state directly, such as counters, form inputs, or toggles. This gives you simple, direct control over state updates.

Choose readable stores when the state changes come from external sources or internal logic that components should not modify, like timers, WebSocket data, or API polling. This keeps updates controlled and prevents accidental changes.

Using the right store type helps keep your app's state predictable and easier to maintain.

Key Takeaways

Writable stores allow components to read and update state with set and update methods.

Readable stores provide read-only access and update internally via a callback function.

Use writable stores for interactive, user-driven state changes.

Use readable stores for external or timed data that components should not modify.

Choosing the correct store type improves app state clarity and safety.