Why: the goal or problem

Travelers save bus and hiking cards in a trip planner. Labels and totals must agree; its team prefers declarative components compiled before runtime.

How: work toward a solution

Two cards in a trip planner start unsaved. Save on Bus Timetable changes only its label to Saved; Hiking Route stays unsaved. Saving Hiking Route changes the shared count from one to two. Repeating Save leaves two records: each card counts once. The diagram separates compilation from runtime updates. Reset or reload clears them. Nothing is persisted.

Svelte: concept simulation

Concept simulation

Svelte

Save either card. Each card counts once; the other card stays unchanged.

01 · Build: compile component

HTML + CSS + JavaScript → browser code

02 · Browser runtime: later clicks

Bus Timetable

Trip planner

Hiking Route

Trip planner

Event → runtime state → compiled update

Saved count: 0 / 2

Bus Timetable: 0 · Hiking Route: 0

Waiting

Execution boundary
Model: components compile before use; later browser events still update state at runtime.
State and responsibility
Shared records own the total until reload. This explanation does not load the Svelte runtime.

A fictional demo within this article. Reset or reload restores its initial state.

What: the concept

Svelte compiles declarative components into browser code. Compilation prepares the UI; later clicks still run state updates. SvelteKit has a broader application scope.

Add routing and persistence as separate decisions.

Source