Tutorial

This tutorial series grows a single Todo app step by step. Each chapter ends with a working page and a small, visible improvement.

The main track stays local-first and keeps the scope intentionally small. Optional Deployment extras show how the same app can be packaged and published.

Main track (local-first)

• 01 - First page - a minimal page built from a partial and a template.
• 02 - Data and output - define data and render it with interpolation and basic directives.
• 03 - Events - interact with the UI using event handlers.
• 04 - Forms - edit data through inputs and reflect changes in the view.
• 05 - Conditions - switch UI blocks based on state.
• 06 - Loops - render and update a list of items.
• 07 - Split dynamic parts - keep the page shell stable and isolate the dynamic list area.
• 08 - Local persistence - store and restore the todo list on the client.

Deployment extras (optional)

• Extra A - PWA minimal - add a manifest and offline app-shell caching, without changing the core app logic.
• Extra B - SSG plus dynamic block - generate static pages, keep only the todo area dynamic.
• Extra C - WebSocket demo - sync changes between multiple clients with a minimal server, local-first rules still apply.

Notes

• One chapter introduces one major idea.
• Every chapter ends with a working page.
• The Reference remains the source of exact rules.

Recommended starting points:

• Guide
• Reference