Membuat Todo List Dengan Store di SvelteKit

3 min read .

Published on 11 Sep 2025

Membuat Todo List Dengan Store di SvelteKit

Svelte dikenal sebagai framework frontend yang simpel, ringan, dan cepat. Salah satu fitur andalannya adalah Svelte Store yang membuat manajemen state jadi super mudah.
Dalam artikel ini kita akan membangun aplikasi Todo List dengan fitur:

Tambah task
Tandai task selesai
Edit task
Hapus task
Statistik jumlah task
Menampilkan waktu saat ini

Semua dikerjakan dengan Svelte + TypeScript hanya dalam beberapa file.

1. Definisi Type untuk Task

Kita mulai dengan membuat tipe data Task di src/lib/types/task.ts:

export interface Task {
    id: number;
    title: string;
    done: boolean;
}

Dengan interface ini, setiap task punya tiga properti:

id: unik untuk membedakan tiap task.
title: judul task.
done: status apakah task sudah selesai atau belum.

2. Membuat Store untuk Task

Di Svelte, store adalah cara terbaik untuk mengelola state global. Kita buat store tasks di src/lib/stores/tasks.ts:

import { writable, readable, derived } from 'svelte/store';
import type { Task } from '$lib/types/task';

export const tasks = writable<Task[]>([]);

export function addTask(title: string) {
    tasks.update((list) => [
        ...list,
        { id: Date.now(), title, done: false }
    ]);
}

export function toggleTask(id: number) {
    tasks.update((list) =>
        list.map((t) =>
            t.id === id ? { ...t, done: !t.done } : t
        )
    );
}

export function removeTask(id: number) {
    tasks.update((list) => list.filter((t) => t.id !== id));
}

export function updateTask(id: number, newTitle: string) {
    tasks.update((list) =>
        list.map((t) =>
            t.id === id ? { ...t, title: newTitle } : t
        )
    );
}

export const now = readable(new Date(), (set) => {
    const interval = setInterval(() => set(new Date()), 1000);
    return () => clearInterval(interval);
});

export const stats = derived(tasks, ($tasks) => {
    const completed = $tasks.filter((t) => t.done).length;
    const pending = $tasks.length - completed;
    return { total: $tasks.length, completed, pending };
});

Penjelasan singkat:

addTask → menambahkan task baru.
toggleTask → membalik status done.
removeTask → menghapus task.
updateTask → mengubah judul task.
now → menyimpan waktu saat ini, diperbarui setiap detik.
stats → menghitung jumlah total, selesai, dan pending.

3. Membuat UI Todo List

Buka src/routes/+page.svelte untuk membuat tampilan:

<script lang="ts">
	import { tasks, addTask, toggleTask, removeTask, updateTask, now, stats } from '$lib/stores/tasks';
	
	let newTask: string = "";
	let editingId: number | null = null;
	let editingTitle: string = "";
</script>

<h1>Todo List</h1>

<p>Sekarang: {$now.toLocaleTimeString()}</p>

<input
	bind:value={newTask}
	placeholder="New task..."/>

<button
	on:click={() => {
		if (newTask.trim()) {
			addTask(newTask);
			newTask = "";
		}
	}}>
	Add
</button>

<ul>
	{#each $tasks as task (task.id)}
		<li>
			<input
				type="checkbox"
				checked={task.done}
				on:change={() => toggleTask(task.id)}/>

			{#if editingId === task.id}
				<input 
					bind:value={editingTitle}/>
				<button
					on:click={() => {
						updateTask(task.id, editingTitle);
						editingId = null;
					}}>
					Save
				</button>
				<button
					on:click={() => (editingId = null)}>
					Cancel
				</button>
			{:else}
				<span>{task.title}</span>
				<button
					on:click={() => {
						editingId = task.id;
						editingTitle = task.title;
					}}>
					Edit
				</button>
				<button
					on:click={() => removeTask(task.id)}>
					Delete
				</button>
			{/if}
		</li>
	{/each}
</ul>

<p>
	Total: {$stats.total} | Completed: {$stats.completed} | Pending: {$stats.pending}
</p>

Fitur yang tersedia di UI ini:

Tambah task lewat input + tombol Add.
Tandai selesai dengan checkbox.
Edit judul task dengan mode editing.
Hapus task dengan tombol Delete.
Statistik jumlah task total, selesai, dan pending.
Waktu sekarang real-time.

4. Hasil Akhir

Sekarang kita punya aplikasi Todo sederhana dengan CRUD penuh:

Tambah task baru
Tandai selesai
Edit task
Hapus task

Ditambah fitur bonus:

Statistik jumlah task
Waktu real-time

Dan semuanya berjalan dengan Svelte Store sehingga state otomatis sinkron di seluruh UI.

Kesimpulan

Dengan Svelte dan TypeScript, membuat aplikasi sederhana seperti Todo List jadi cepat dan jelas.

Task interface → memastikan struktur data konsisten.
tasks store → pusat manajemen state.
now dan stats → contoh readable & derived store untuk data dinamis.
Komponen Svelte → langsung reactive tanpa perlu boilerplate panjang.

Konsep ini bisa dengan mudah diperluas: menambahkan persistensi ke localStorage, atau bahkan integrasi dengan API backend.