---
title: "A Guide to Svelte Stores | CoderPad"
description: "State management is an important aspect of programming that helps to control the flow and behaviour of data within an application. Learn how to effectively manage state in your Svelte application using Svelte stores."
canonical: "https://coderpad.io/blog/development/a-guide-to-svelte-stores/"
last_modified: "2026-04-15 16:20:54"
---
[Back to blog](https://coderpad.io/blog/)

# A Guide to Svelte Stores

February 23, 2023 7 Minute Read

By Temitope Oyedele

[Development](https://coderpad.io/blog/development/)

State management is an important aspect of programming that helps to control the flow and behaviour of data within an application. By effectively managing the state of an application, it becomes easier to maintain and scale the application, resulting in improved efficiency and performance.

State management also makes it easier for developers to share data between different components of an application and to organize code in a way that is more efficient and effective. This can help to improve the overall functionality of the application.

In this article, we’ll discuss the svelte store, which is one of the ways we can manage our states in svelte. It is also regarded as the most efficient way to manage complex data.

We’ll discuss:

- How to create a svelte application
- Context API
- Svelte stores

So let’s get started!

## Prerequisites

To follow through with this article, the following prerequisites are required:

- Familiarity with the svelte framework
- Understanding svelte components: Svelte components are reusable, self-contained UI elements that can be easily shared, imported, and composed to build complex user interfaces.
- Reactivity: State management in svelte is based on the concept of [reactive programming](https://dev.to/daslaf/an-introduction-to-reactive-programming-in-javascript-140a). It means that all the variables used by the application are tracked and can be modified by the user. When a variable is changed, the application will update its state accordingly. This makes it easier to track changes and keep the application running smoothly, as svelte stores are reactive.

## Getting started

Let’s first create a basic application using the [CoderPad Svelte sandbox](https://app.coderpad.io/sandbox?pt=svelte) to show how we can pass data between components.

In the sandbox, create a new file`Child.svelte`:

```
<!--- Child.svelte-->
<script>
  export let greeting
</script>
<span>{greeting}</span>Code language: HTML, XML (xml)
```

Replace the content of`app.svelte`with the code below:

```
<!--- App.svelte-->
<script>
import Child from "./Child.svelte"
</script>
<h1><Child  greeting ="hello world"/></h1>
<h1><Child  greeting ="hello john"/></h1>
<h1><Child  greeting ="hello micheal"/></h1>
<h1><Child  greeting ="hello doe"/></h1>
<h1><Child /></h1>Code language: HTML, XML (xml)
```

Here, we are defining the values of our variable`greeting`and passing them as [props](https://svelte.dev/tutorial/declaring-props) in our parent component, our`App.svelte`, to the child component,`Child.svelte`. Our child components then access these props and render them into the browser.

Component props are limited in how much data they can hold. Because of this, complex data sets would need to be broken down into multiple props, which can get messy and complicated.

We might also face a scenario whereby components do not need the props. We still have to send the props through them to be able to pass it further down in the component tree just for a particular component to access the data, which might not be a good thing if we are working with complex data in an application.

It would be nice to directly make the data available to the required component without manually drilling the props through every level of the component tree. One of the things we can use is the Context API. We then have the option of using a context.

## The context API

The Svelte [Context API](https://svelte.dev/tutorial/context-api) is a feature that allows components to share states and functions with their children, grandchildren, and descendants. It provides a way of passing values and functions down the component tree without having to pass them at each level explicitly. This makes it easier to maintain and reason about the data flow in an application.

Svelte’s context API is ideal for cross-component communication without complicating your codebase with props. The context API is made possible by two Svelte functions:`getContext`and`setContext`. Setting an object or value in the context and associating it with a key enables you to make it available anywhere within your app, as shown in the code below:

```
<script>
  import { setContext } from "svelte";
  const thisObject = {};
  setContext("thisKey", thisObject);
</script>Code language: JavaScript (javascript)
```

We want`thisKey`to be available inside a different component within our app, so we import it using the`getContext`function.

```
<script>
  import { getContext } from "svelte";
  const thisObject = getContext("thisKey");
</script>Code language: JavaScript (javascript)
```

For example, passing an array of todos between components:

```
<!-- App.svelte-->
<script>
  import { setContext } from "svelte";
  import Child from "./Child.svelte";
  let todo = ["do chores", "clean", "code", "play football"];
  setContext("key", todo);
</script>
<Child />Code language: HTML, XML (xml)
```

In the code above, we set the context key as key and pass todo object as the second argument.

We can now access the todo context from any other components like below:

```
<!-- TodoCard.svelte-->
<script>
  import { getContext } from "svelte";
  let todo = getContext("key");
</script>
<p>{todo}</p>Code language: HTML, XML (xml)
```

Although the Svelte context API is great for small applications, it becomes increasingly more work to manage the state simply and concisely as applications scale up.

Additionally, the context API does not provide any built-in methods for tracking changes to the data, making it difficult to track which pieces of data are outdated and need to be updated. For these reasons, it is better to use a store for managing and passing complex data between components.

## Introducing svelte stores

A Svelte store is a JavaScript object that holds data similar to a variable. However, unlike a variable, Svelte stores can be observed, meaning that any part of the application can monitor changes to the store and respond accordingly.

It also makes it easier to keep track of changes to the data and makes it easier to modify the data when needed. The store is also the main way of sharing data between different parts of an application, making it easier to keep the code organized and maintainable.

The svelte store offers a solution that helps developers overcome these challenges by helping us manage our state. It detaches and manages it in an entirely different place so components can’t become bloated with unnecessary data. This makes Svelte Stores ideal for managing state in Svelte applications, as we can use them to store application data and allow components to reflect changes in the store.

Svelte has two primary types of stores, writable and readable stores. Svelte also offers a special type of store called a derived store.

### Writable Stores

[Writable stores](https://svelte.dev/docs#writable) are basically objects that hold values or attributes that various app components may access. They are the sources of information storage. Let’s use the writable store to store a value we can later change or pass around in our application. We’ll create our store as a JavaScript file, add some values and then export it:

```
<!-- weather.js -->
<script>
  import writable from 'svelte/store'
  export const weather = writable('sunny')
</script>Code language: JavaScript (javascript)
```

We can then import inside any other component where we’ll need the data:

```
<script>
  import { weather } from './weather.js'
</script>Code language: GML (gml)
```

We can alter the value in a writable store, and when we need to change the value of weather in any component where we imported it, we can use the`unset()`method. The`unset()`method is used to remove a value that has been previously set in a component’s state:

```

<!-- Newweather.svelte -->
<script>
  import { Weather } from './Weather.js'
  city.set('Rainy')
</script>Code language: JavaScript (javascript)
```

We can also use the`update()`method. This will help us invoke a callback in which the current value is passed as an argument:

```
<!-- Newweather.svelte -->
<script>
  import { Weather } from './Weather.js'
  const newWeather = 'Rainy'
  function changeWeather() {
    Weather.update(existing => newWeather)
  }
</script>Code language: HTML, XML (xml)
```

Alternatively, we could have components use Svelte’s`subscribe()`function to monitor changes to the value we put in our store. The`subscribe`method in Svelte is used to add a reactive effect to a component:

```
<script>
  import { Weather } from './Weather.js'
  const watch = Weather.subscribe(value => {
    console.log(value);
  });
</script>Code language: HTML, XML (xml)
```

### Readable stores

[Readable stores,](https://svelte.dev/tutorial/readable-stores) like writable stores, hold objects but cannot be modified by external components. You must set the value of a readable store when you create it. We use Readable stores to handle data that must be immutable. Below is an example of fetching the current date:

```
<!-- date.js -->
import { readable } from 'svelte/store'

export const date = readable(new Date())Code language: JavaScript (javascript)
```

```
<!-- app.svelte -->
<script>
import {date} from "./date.js"
</script>

<h1>Today's date is{$date}</h1>Code language: HTML, XML (xml)
```

### Derived Stores

[Derived stores](https://svelte.dev/tutorial/derived-stores), as the name implies, are derived from another store. The value of a derived store is updated when the store from which it was derived is updated. Derived stores are simply readable stores, but their values come from somewhere else, at least partially:

```
import { derived } from "svelte/store";
import { date } from "./store.js";
export const test = derived(date, ($date) => {
  return (
    $counter.getHours() +
    ":" +
    $counter.getMinutes() +
    ":" +
    $counter.getSeconds()
  );
});Code language: JavaScript (javascript)
```

Our derived store can then be imported into another component as follows:

```
<!-- App.svelte -->
<script>
  import { test } from "./derived.js";
</script>
<h1>
  {$test}
</h1>Code language: JavaScript (javascript)
```

## Svelte store example: Building a student data list

To showcase how Svelte store could be used in real-time, we will be building an app where we’ll be able to manage state in svelte.

We can set up a new project folder and install svelte for this project example by following the steps mentioned earlier, or we can use the one created previously.

### Project scope

For this project, we’ll be building a student data list that will display some student data, and we’ll do that with the help of a store.

### Creating a store

We’ll be creating a store that will contain some student data. Inside the`src`folder, create a folder called`stores`and create a file called`students.js`. This file will define the methods for updating our store’s values and resetting them to their default values when needed. Our`students.js`will contain the following:

```
import { writable } from "svelte/store";
const STUDENTS = [{ name: "john", surname: "doe", age: 17 },
  { name: "micheal", surname: "angelo", age: 21 },
];

const { subscribe, set, update } = writable(STUDENTS);
const addStudent = (student) =>
  update((students) => {
    return [...students, student];
  });

const reset = () => {
  set(STUDENTS);
};

export default {
  subscribe,
  addStudent,
  reset,
};Code language: JavaScript (javascript)
```

Now we’ll import the exported methods, which are the`subscribe`,`addStudent`, and`reset`, into the component we’ll create shortly and use them to subscribe, add new values and reset our student list.

### Creating our components

Next, we will create components that accept the methods exported from our store. We’ll be creating two components:`StudentPage.svelte`, which will be used to add new student data, and`StudentList`, which will display the list of students that have been added.

In`StudentPage.svelte`, add the following:

```
<script>
  import students from "./stores/students";
</script>
<div class="studentPage">
  {#each $students as student}
    <p>{student.name} {student.surname}</p>
    <p>{student.age}</p>
    <hr />
  {/each}
</div>Code language: HTML, XML (xml)
```

We’ll make our`StudentList`a form so we can add new student data as well as reset them:

```
<script>
  import students from "./stores/students";
  // binding values
  let name = "";
  let surname = "";
  let age = "";
  // submit student
  const submitStudent = () => {
    students.addStudent({ name, surname, age });
    // reset values
    name = surname = age = "";
  };
</script>

<div class="studentList">
  <input type="text" bind:value={name} placeholder="Enter student make" />
  <input type="text" bind:value={surname} placeholder="Enter student surname" />
  <input type="year" bind:value={age} placeholder="Enter student age" />
  <input type="submit" on:click={submitStudent} value="Include Student" />
  <input type="submit" on:click={students.reset} value="Reset Student list" />
</div>Code language: HTML, XML (xml)
```

Let’s add some basic styling to our components. In our app.css, paste this in:

```
.studentList {
  margin: 0 auto;
  box-shadow: 0 0 30px 0;
  height: auto;
  max-width: 410px;
  background-color: rgb(231, 231, 231);
  padding: 20px;
}

input {
  margin: 30px 0 0;
  height: 30px;
  width: 100%;
  padding: 0 10px;
  outline: none;
  border: none;
  background-color: rgb(231, 231, 231);
  border-bottom: 1px solid #000;
  font-size: 1.1rem;
  transition: .3s;
}

button {
  border-radius: 6px;
  margin: 20px 0 0;
  height: 40px;
  width: 100%;
  color: #fff;
  padding: 0;
  outline: none;
  cursor: pointer;
  transition: .3s;
  border: none;
}

.button {
  background-color: rgba(26, 26, 204, 0.582);
}

.button:hover {
  background-color: rgb(26, 26, 204);
}

.reset {
  background-color: rgb(189, 42, 42);
}

.reset:hover {
  background-color: rgb(255, 0, 0);
}

/* studentpage styling */
.studentPage {
  padding-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.table-bordered {
  border-width: 1px 1px 1px 0px;
  border-style: solid solid solid none;
  border-color: #fff #fff #fff -moz-use-text-color;
  border-collapse: collapse;
  border-radius: 4px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  max-width: 100%;
  overflow-x: auto;
}

.table-bordered th,
.table-bordered td {
  min-width: 150px;
  padding: 8px;
  line-height: 20px;
  text-align: left;
  vertical-align: top;
  border: 1px solid #fff;
}

.table-bordered th {
  background-color: rgb(88, 83, 83);
  color: #fff;
}Code language: CSS (css)
```

We’ll then import into each of our components using:

```
import "./app.css";Code language: JavaScript (javascript)
```

The last thing we’ll do is import both our components into our app.svelte:

```
<script>
  import StudentList from "./StudentList.svelte";
  import StudentPage from "./StudentPage.svelte";
</script>
<div>
  <StudentList />
  <StudentPage />
</div>
Code language: HTML, XML (xml)
```

We just created an app and managed it using svelte stores! Play with the application in the sandbox below:

## Conclusion

Svelte stores are an effective way to manage and access data in your Svelte applications. They provide a centralized way to store data, making it easier to keep track of changes and make modifications when needed. Using a Svelte store is straightforward and can make your code cleaner and more maintainable.

## Subscribe for more CoderPad insights

## Trending Articles

Previous slide Next slide [Development

## What is Prompt Engineering?

Introducing AI tools such as ChatGPT and Bard helps increase the efficiency of tasks such as data generation, code generation and completion, text summarization, etc. How were these AI tools trained to answer almost every question you ask them? The answer, prompt engineering, is discussed in this blog post.

Read the post](https://coderpad.io/blog/development/what-is-prompt-engineering/) [Development

## A Guide To Using React’s useCallback() Hook

Are you looking to optimize your React applications? Have you heard of the useCallback hook? useCallback is a powerful React hook that helps you optimize your application by preventing unnecessary re-renders. In this post, we'll dive into React's useCallback() hook, define referential equality and callback functions and how to tie it all together.

Read the post](https://coderpad.io/blog/development/a-guide-to-using-reacts-usecallback-hook/) [Development

## MySQL vs. PostgreSQL: How Do They Compare?

A database is a convenient tool that allows users to access information, maintain records, and apply commonly used operations, such as insertion, modification, deletion, and data organization. Learn about MySQL vs PostgreSQL, their features, advantages, and disadvantages. Finally, check out which one is the best choice for you.

Read the post](https://coderpad.io/blog/development/mysql-vs-postgresql-how-do-they-compare/) [Development

## PostgreSQL LIKE Operator: A Detailed Guide

When using databases, searching for values that match a given pattern is a familiar necessity. Learn how you can retrieve entries with queries including a particular string using Postgres LIKE operator.

Read the post](https://coderpad.io/blog/development/postgresql-like-operator-a-detailed-guide/) [Development

## How To Use DataProvider In TestNG With Examples

When it comes to testing there are many tools and techniques available. In this post, we'll discuss how to use DataProvider with TestNG.

Read the post](https://coderpad.io/blog/development/how-to-use-dataprovider-in-testng-with-examples/) [Development

## How To Get Up And Running With Django Migrations: A Guide

Django migrations are a way of handling the application of changes to a database schema. By following the steps outlined in this guide, you can easily set up and use migrations in your Django projects.

Read the post](https://coderpad.io/blog/development/how-to-get-up-and-running-with-django-migrations-a-guide/) [Development

## Writing A Parameterized Test In JUnit With Examples

A JUnit parameterized test allows you to decouple data from structure, generating cleaner and more reliable tests. Learn more in this guide.

Read the post](https://coderpad.io/blog/development/writing-a-parameterized-test-in-junit-with-examples/) [Development

## How To Use Assert In JUnit With Examples

The JUnit Assert class is what you use to write unit testing assertions in JUnit. Learn more about it in this guide, full of examples.

Read the post](https://coderpad.io/blog/development/how-to-use-assert-in-junit-with-examples/) [Development

## A Simple Guide To TypeORM: What It Is And How To Use It

Considering current languages have object-oriented programming features, most database management systems are based on the relational model, with tables instead of objects. For these reasons, mapping relational objects is very important in development. In this article, you will learn what TypeORM, one of the main tools used today, is.

Read the post](https://coderpad.io/blog/development/a-simple-guide-to-typeorm-what-it-is-and-how-to-use-it/) [Development

## Using PreparedStatement in JDBC With Examples

In this post, we'll see why and how to work with JDBC and PreparedStatement. We will also learn along with examples using code.

Read the post](https://coderpad.io/blog/development/using-preparedstatement-in-jdbc-with-examples/) [Development

## React vs React Native: The Differences Explained

React and React Native are similar in that they both allow web developers to build applications based on the unique concept of components. But the two frameworks do this in radically different ways. In this post, we cover the key differences between react and react native frameworks, implementation, and which is an appropriate choice.

Read the post](https://coderpad.io/blog/development/react-vs-react-native-the-differences-explained/) [Development

## Logging in Django

The most challenging part of fixing a problem is identifying it. Unfortunately, this statement is exceptionally true when it comes to debugging. Learn how to use the power of logging into your Django applications to improve your debug process in this article.

Read the post](https://coderpad.io/blog/development/logging-in-django/)

## Hire with confidence.

See why engineering teams trust CoderPad to evaluate developers with realistic, AI-ready hiring workflows.

[Request a demo](https://coderpad.io/sales/)