Svelte

JavaScript 11 Sep 2025 2 min read

Understanding bind:value Between Parent and Child Components in Svelte

One convenient Svelte feature is two-way binding with bind:value. It can keep state in a parent component synchronized with a value exposed by a child component without writing separate event-handling boilerplate. The following example connects a reusable input component to state in its parent. 1. Child Component: InputField.svelte Create src/lib/components/InputField.svelte: <script lang="ts"> export let value: string = ""; </script> <h2>Child Component</h2> <input type="text" bind:value /> <p>Input value in child: {value}</p> How it works:

Svelte Props

JavaScript 11 Sep 2025 3 min read

Building a Todo List with Stores in SvelteKit

Svelte stores provide a simple way to share reactive state across components. In this tutorial, we will build a small Todo List with: Adding tasks Marking tasks complete Editing tasks Deleting tasks Task statistics A live clock The example uses Svelte + TypeScript and the classic Svelte store APIs. 1. Define the Task Type Create src/lib/types/task.ts: export interface Task { id: number; title: string; done: boolean; } Each task has:

Svelte State Management

JavaScript 11 Sep 2025 2 min read

Building a Simple Search Feature in Svelte

Svelte’s reactivity makes it straightforward to update the UI when component state changes. In this example, we will build a small product search: as the user types, matching items appear immediately. 1. Complete Example Create src/routes/+page.svelte: <script lang="ts"> let query = ""; let products = ["Laptop", "Mouse", "Keyboard", "Monitor", "Printer"]; let results: string[] = []; function searchProducts(q: string) { if (q.trim() === "") { results = []; } else { results = products.filter((p) => p.toLowerCase().includes(q.toLowerCase()) ); } } // Reactive statement: runs whenever query changes $: searchProducts(query); </script> <input bind:value={query} placeholder="Search products..." /> <ul> {#if query.trim() !== ""} {#if results.length > 0} {#each results as item} <li>{item}</li> {/each} {:else} <li>No results</li> {/if} {/if} </ul> 2. How It Works The component has three pieces of state:

Svelte Reactive Statement