Why: the goal or problem

Interactive components need coordinated updates. Handwritten DOM changes scatter the relationship between data and displayed content.

How: work toward a solution

Two Field notes cards start unsaved. Save on A17 changes only its label to Saved; B04 stays unsaved. Saving B04 changes the shared count from one to two. Repeating Save leaves two records: each ID counts once. The diagram separates compilation from runtime updates. Reset or reload clears both cards. There is no persistent storage here.

Svelte: concept simulation

Concept simulation

Svelte

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

01 · Build: compile component

HTML + CSS + JavaScript → browser code

02 · Browser runtime: later clicks

A17

Field notes

B04

Field notes

Event → runtime state → compiled update

Saved count: 0 / 2

A17: 0 · B04: 0

Waiting

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