Context with stores in Svelte - Mini Project: Build & Apply

Context with stores in Svelte

📖 Scenario: You are building a simple Svelte app where multiple components need to share and update a counter value. Instead of passing props down many levels, you will use Svelte's context with stores to share the counter state easily.

🎯 Goal: Create a Svelte app with a store holding a counter value. Provide this store via context in a parent component. Then, in a child component, access the store from context and display and update the counter.

📋 What You'll Learn

Create a writable store called counter with initial value 0

Set the counter store in context using setContext with key 'counter'

In a child component, get the counter store from context using getContext

Display the current counter value and add a button to increment it

💡 Why This Matters

🌍 Real World

Sharing state like counters, user info, or settings across many components without prop drilling.

💼 Career

Understanding context and stores is key for building scalable Svelte apps and collaborating on frontend projects.

1

Create the counter store

In a new Svelte component, import writable from 'svelte/store' and create a writable store called counter with initial value 0.

Svelte

// Your code here

Hint

Use writable(0) to create a store starting at zero.

2

Set the counter store in context

In the parent Svelte component, import setContext from 'svelte' and the counter store. Use setContext with key 'counter' to provide the counter store to child components.

Svelte

import { writable } from 'svelte/store';

export const counter = writable(0);

// Your code here

Hint

Use setContext('counter', counter) to share the store.

3

Get the counter store from context in child

In a child Svelte component, import getContext from 'svelte'. Use getContext('counter') to get the counter store from context and assign it to a variable called counter.

Svelte

import { writable } from 'svelte/store';
import { setContext } from 'svelte';

export const counter = writable(0);

setContext('counter', counter);

// Your code here

Hint

Use const counter = getContext('counter') to access the store.

4

Display and update the counter in child component

In the child component, use the $counter store value to display the current count inside a <p> tag. Add a button with text Increment that increases the counter by 1 when clicked using counter.update(n => n + 1).

Svelte

import { getContext } from 'svelte';

const counter = getContext('counter');

Hint

Use {$counter} to show the current value and on:click to handle button clicks.