Writable stores in Svelte - Mini Project: Build & Apply

Building a Counter with Writable Stores in Svelte

📖 Scenario: You are creating a simple counter app in Svelte. The counter value will be stored in a writable store so that multiple components can share and update the count easily.

🎯 Goal: Build a Svelte app that uses a writable store to hold a counter value. The app will have buttons to increase and decrease the counter, and the displayed number updates automatically.

📋 What You'll Learn

Create a writable store called count with initial value 0

Create a variable called step set to 1 to control increment/decrement

Use the update method of the count store to increase or decrease the count by step

Bind the store value to the component and add buttons to change the count

💡 Why This Matters

🌍 Real World

Writable stores let you share and update data easily across multiple parts of a Svelte app, like counters, user settings, or live data.

💼 Career

Understanding writable stores is key for building interactive, stateful Svelte applications used in real-world web projects.

1

Create the writable store

Import writable from 'svelte/store' and create a writable store called count with initial value 0.

Svelte

import { writable } from 'svelte/store'

// Create the writable store count with initial value 0
// Your code here

Hint

Use import { writable } from 'svelte/store' and then const count = writable(0).

2

Add a step variable for increment

In the Svelte component script, create a variable called step and set it to 1.

Svelte

import { writable } from 'svelte/store'

export const count = writable(0)

// Create a variable step set to 1
// Your code here

Hint

Just write let step = 1 inside the script.

3

Update the count store with buttons

Add two functions called increment and decrement that use count.update to add or subtract step from the current count.

Svelte

import { writable } from 'svelte/store'

export const count = writable(0)

let step = 1

// Add increment and decrement functions using count.update
// Your code here

Hint

Use count.update(n => n + step) inside increment and similarly for decrement.

4

Bind the store and add buttons in markup

In the Svelte component markup, use {$count} to show the current count. Add two buttons with on:click handlers calling increment and decrement.

Svelte

import { writable } from 'svelte/store'

export const count = writable(0)

let step = 1

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

function decrement() {
    count.update(n => n - step)
}

Hint

Use {$count} to show the store value and add buttons with on:click handlers.

Practice

1. What is the main purpose of a writable store in Svelte?

easy

A. To style components dynamically

B. To hold data that can be changed and shared across components

C. To create static, unchangeable data

D. To handle routing between pages

Solution

1. Step 1: Understand writable store role

   Writable stores in Svelte are designed to hold data that can be changed and shared reactively.

2. Step 2: Compare options

   Only To hold data that can be changed and shared across components correctly describes writable stores as changeable and shareable data holders.

3. Final Answer:

   To hold data that can be changed and shared across components -> Option B

4. Quick Check:

   Writable store = changeable shared data [OK]

Hint: Writable stores hold changeable shared data [OK]

Common Mistakes:

• Confusing writable stores with static data
• Thinking writable stores handle styling or routing
• Assuming writable stores cannot be updated

2. Which of the following is the correct way to create a writable store in Svelte?

easy

A. import { writable } from 'svelte/store'; const count = writable(0);

B. import { readable } from 'svelte/store'; const count = readable(0);

C. const count = writable(0); without import

D. import { store } from 'svelte'; const count = store(0);

Solution

1. Step 1: Check import statement

   The writable store must be imported from 'svelte/store' using { writable }.

2. Step 2: Verify store creation syntax

   Creating a writable store uses writable(initialValue), so import { writable } from 'svelte/store'; const count = writable(0); is correct.

3. Final Answer:

   import { writable } from 'svelte/store'; const count = writable(0); -> Option A

4. Quick Check:

   Writable store import and creation = import { writable } from 'svelte/store'; const count = writable(0); [OK]

Hint: Writable stores need import { writable } from 'svelte/store' [OK]

Common Mistakes:

• Using readable instead of writable
• Forgetting to import writable
• Wrong import path or syntax

3. Given this code:

import { writable } from 'svelte/store';
const count = writable(5);
count.update(n => n + 3);
console.log($count);

What will be logged to the console?

medium

A. Error: $count is undefined

B. 8

C. 3

D. 5

Solution

1. Step 1: Understand store update

   The update method changes the store value from 5 to 8 by adding 3.

2. Step 2: Check usage of $count outside component

   The $ prefix to access store value works only inside Svelte components, not in plain JS code like console.log.

3. Final Answer:

   Error: $count is undefined -> Option A

4. Quick Check:

   $ prefix only works inside components [OK]

Hint: Use $ only inside components, not in plain JS [OK]

Common Mistakes:

• Assuming $count works outside components
• Ignoring that update changes value
• Expecting console.log to show store value directly

4. What is wrong with this code snippet?

import { writable } from 'svelte/store';
const count = writable(0);
count.set(count + 1);

medium

A. The initial value must be a string

B. You cannot use set on writable stores

C. Missing import for set function

D. count + 1 is invalid because count is a store, not a number

Solution

1. Step 1: Identify what count represents

   count is a writable store object, not a number, so count + 1 is invalid.

2. Step 2: Correct way to update store

   You must use count.update(n => n + 1) or count.set(value) with a number, not count + 1.

3. Final Answer:

   count + 1 is invalid because count is a store, not a number -> Option D

4. Quick Check:

   Store object + number is invalid [OK]

Hint: Use update or get value before set, not store + number [OK]

Common Mistakes:

• Trying to add number directly to store object
• Forgetting to use update for changes
• Assuming set needs import separately

5. You want to create a writable store that holds a number starting at 10. Then you want to double its value only if it is less than 50. Which code correctly does this?

hard

A. const num = writable(10);
num.set(20);

B. const num = writable(10);
num.set(n => n < 50 ? n * 2 : n);

C. const num = writable(10);
num.update(n => n < 50 ? n * 2 : n);

D. const num = writable(10);
num.update(n => n * 2);

Solution

1. Step 1: Create writable store with initial value 10

   Using writable(10) correctly sets the initial number.

2. Step 2: Use update with condition to double if less than 50

   update receives current value n and returns n*2 if n < 50, else n unchanged, matching requirement.

3. Step 3: Check other options

   const num = writable(10); num.set(n => n < 50 ? n * 2 : n); wrongly uses set with a function, which is invalid. const num = writable(10); num.update(n => n * 2); doubles unconditionally. const num = writable(10); num.set(20); sets fixed 20 ignoring condition.

4. Final Answer:

   const num = writable(10); num.update(n => n < 50 ? n * 2 : n); -> Option C

5. Quick Check:

   Use update with condition to change value [OK]

Hint: Use update(fn) with condition to change store value [OK]

Common Mistakes:

• Using set with a function instead of a value
• Not applying condition inside update
• Setting fixed value ignoring condition