Introducing State Management with Runes

Welcome to the second course in our "Building A Kanban Board" series! In our previous course, we built the foundational UI components for our Kanban board: the main layout, columns, and task cards.

Now it’s time to make our board fully functional by connecting it to dynamic data using Svelte's Runes API.

While our components from the previous course look great, they're currently displaying static, hardcoded tasks. In a real Kanban application, we need:

1. A central place to store all our tasks
2. A way to filter tasks by status (To Do, In Progress, Done)
3. The ability to move tasks between columns
4. A reactive system that updates the UI when tasks change

That’s where state management comes in — and Svelte’s Runes provide an elegant solution.

State management is a fundamental concept in modern web applications. It refers to how we organize, store, and update data that changes over time in our application. For our Kanban board, we'll need to manage tasks that can move between different columns (To Do, In Progress, and Done), and we'll need our UI to update automatically when this data changes.

Svelte 5 introduces a new way to handle reactivity called Runes. Runes are special functions prefixed with a dollar sign ($) that enhance variables with special behaviors. They replace the older reactive syntax in previous Svelte versions and provide a more intuitive way to work with reactive state.

In this lesson, we'll focus on creating a task store that will serve as the central data repository for our Kanban board application. This store will:

1. Hold our collection of tasks.
2. Provide filtered lists of tasks for each column.
3. Expose functions to access these lists from our components.
4. Connect this accessor functions to our board component

Let's get started by exploring how to create reactive state with Svelte 5's Runes!

The first step in building our task store is to create a reactive state variable that will hold our collection of tasks. For that we use the $state rune to make a reactive variable.

Here's how we'll create our initial tasks array:

// src/lib/taskStore.svelte.js
export const tasks = $state([
  { id: 1, title: 'Learn Svelte 5', description: 'Study the new Runes API', status: 'todo' },
  { id: 2, title: 'Design components', description: '', status: 'todo' },
  { id: 3, title: 'Build Kanban board', description: 'Create the main layout', status: 'inprogress' },
  { id: 4, title: 'Setup project', description: 'Initialize SvelteKit', status: 'done' }
]);

Let's break down what's happening here:

• We're creating a file called taskStore.svelte.js in the src/lib directory.
• We're using the $state rune to make our tasks array reactive.
• We're initializing it with four sample tasks.
• Each task has an id, title, description, and status property.
• The status property determines which column the task belongs to.

When we use $state, Svelte automatically tracks any changes to this variable. If we add, remove, or modify tasks in this array, any components that depend on this data will automatically update.

For example, if we were to add a new task:

tasks.push({ 
  id: 5, 
  title: 'Add drag and drop', 
  description: 'Implement drag and drop functionality', 
  status: 'todo' 
});

Svelte would detect this change and update any UI elements that display our tasks. This is the power of reactivity in Svelte — we don't need to manually trigger UI updates when our data changes.