How to Create Writable Store in Svelte: Simple Guide

In Svelte, you create a writable store by importing writable from 'svelte/store' and calling it with an initial value like const count = writable(0);. This store lets you read, update, and subscribe to reactive data easily in your components.

Syntax

To create a writable store, import writable from 'svelte/store' and call it with an initial value. The returned store has methods to subscribe to changes, set a new value, and update the value based on the current state.

• writable(initialValue): creates the store with the starting value.
• subscribe(callback): listens for changes and runs the callback with the current value.
• set(newValue): replaces the store's value.
• update(fn): updates the value using a function that receives the current value.

javascript

import { writable } from 'svelte/store';

const store = writable(initialValue);

// Methods:
// store.subscribe(value => { ... });
// store.set(newValue);
// store.update(current => newValue);

Example

This example shows a simple counter using a writable store. The store holds the count, and the component updates and displays it reactively.

svelte

import { writable } from 'svelte/store';

// Create a writable store with initial value 0
export const count = writable(0);

// In a Svelte component (e.g., Counter.svelte):

<script>
  import { count } from './store.js';

  // Increment function updates the store value
  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 displayed.

Common Pitfalls

Common mistakes when using writable stores include:

• Trying to assign directly to the store variable instead of using set or update.
• Not subscribing to the store in components, so changes don't trigger updates.
• Forgetting to prefix the store with $ in components to auto-subscribe.

Always use store.set(value) or store.update(fn) to change the store's value, and use {$store} in markup to reflect the current value.

javascript

/* Wrong way - direct assignment (does NOT update subscribers) */
count = 5; // ❌

/* Right way - use set() */
count.set(5); // ✅

/* Wrong way - forgetting $ prefix in component */
<p>Count: {count}</p> <!-- won't update -->

/* Right way - use $ prefix */
<p>Count: {$count}</p> <!-- reactive -->

Quick Reference

Method	Description
writable(initialValue)	Creates a writable store with the given initial value.
subscribe(callback)	Runs callback whenever the store value changes.
set(newValue)	Sets the store to a new value, notifying subscribers.
update(fn)	Updates the store value based on the current value.

Key Takeaways

Use writable from 'svelte/store' to create reactive writable stores.

Change store values only with set or update, never by direct assignment.

Use the $ prefix in components to auto-subscribe and reflect store values reactively.

Writable stores help manage shared state simply and efficiently in Svelte apps.