✳field notes/astroA small interactive guide · 2026

A practical tour of the modern web stack

Build less.
Experience more.

A hands-on field guide to Astro's content-first architecture and Svelte's playful reactivity. Read a concept, touch the code, see the island wake up.

Four short chapters
One working page

Scroll to explore ↓

The interactive walkthrough

Your next
move

Lesson 01 / 04 · Foundations

Astro anatomy

01/04

Learn how Astro ships almost no JavaScript by default, then add it exactly where interaction needs to live.

src/pages/index.astro
<main>
  <h1>Fast by default</h1>
  <Counter client:load />
</main>
Interactive output
A tiny Svelte island
0clicks

State lives in the component, not the page.

The testing section

Your next
step

Lesson 01 / 04 · Foundations

Astro anatomy

01/04

Learn how Astro ships almost no JavaScript by default, then add it exactly where interaction needs to live.

src/pages/index.astro
<main>
  <h1>Fast by default</h1>
  <Counter client:load />
</main>
Interactive output
A tiny Svelte island
0clicks

State lives in the component, not the page.

Keep going

The good
stuff