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.