Context API vs stores in Svelte

Introduction

Context API and stores help share data between components in Svelte without passing props everywhere.

You want to share a theme or user info across many components.

You need a simple way to share data only between parent and child components.

You want a global state that many parts of your app can read and update.

You want to avoid prop drilling through many layers of components.

You want reactive data that updates UI automatically when changed.

Syntax

Svelte

/* Context API in Svelte */
// In parent component
import { setContext } from 'svelte';
setContext('key', value);

// In child component
import { getContext } from 'svelte';
const value = getContext('key');

/* Stores in Svelte */
import { writable } from 'svelte/store';
const count = writable(0);

// In any component
import { count } from './store.js';
$count; // reactive value
count.set(5); // update value

Context API shares data only between parent and its descendants.

Stores can be imported anywhere and provide reactive shared state.

Examples

Parent sets a user object in context. Child reads it directly without props.

Svelte

// Using Context API
// Parent.svelte
<script>
  import { setContext } from 'svelte';
  setContext('user', { name: 'Anna' });
</script>

// Child.svelte
<script>
  import { getContext } from 'svelte';
  const user = getContext('user');
</script>
<p>User: {user.name}</p>

Store holds count value. Any component can import and react to changes.

Svelte

// Using a writable store
// store.js
import { writable } from 'svelte/store';
export const count = writable(0);

// Counter.svelte
<script>
  import { count } from './store.js';
</script>
<button on:click={() => count.update(n => n + 1)}>
  Count: {$count}
</button>

Sample Program

This example shows how Context API passes a color string from parent to child. The store shares a message string that child can update and reactively display.

Svelte

<!-- App.svelte -->
<script>
  import { setContext } from 'svelte';
  import Child from './Child.svelte';
  import { writable } from 'svelte/store';

  // Using Context API
  setContext('color', 'blue');

  // Using Store
  export const message = writable('Hello from store!');
</script>
<h1>Parent Component</h1>
<Child />

<!-- Child.svelte -->
<script>
  import { getContext } from 'svelte';
  import { message } from './App.svelte';

  const color = getContext('color');
</script>
<p style="color: {color}">Context color: {color}</p>
<p>Store message: {$message}</p>
<button on:click={() => message.set('Updated message!')}>Update Store</button>

Important Notes

Context API is good for passing data down a component tree without props.

Stores are better for global or shared reactive state accessible anywhere.

Use stores when many components need to read and write the same data.

Summary

Context API shares data only between parent and children components.

Stores provide reactive global state accessible from any component.

Choose Context API for simple parent-child data sharing, stores for app-wide state.