Concepts
These pages explain the ideas behind Drafter, each in one place. You do not need to read them in advance; the tutorials and task pages link to each concept once you have already used the idea and it deserves a name. Come here when you want a complete explanation or a broader overview.
The ladder
Each idea builds on the ones above it:
| Concept | In one line | Where you use it |
|---|---|---|
| How Drafter works | Your program runs twice: once to start up and test, then inside the browser as the real app. | Everywhere, quietly |
| Routes and pages | Routes are functions that build and return pages; their names become addresses. | Add and connect pages |
| State | One dataclass is your app's memory, flowing route to page to route. | Remember a score or choice |
| Forms and input | Each input's name fills the route parameter with the same name; annotations convert. | Ask the user for information |
| Dynamic pages | One route renders differently from state, data, and arguments. | Show different content |
| Live updates | Events call routes; routes can replace part of a page instead of all of it. | Add live behavior |
| How the web works | Browsers, servers, URLs, and where a Drafter app actually runs. | Deploy and submit |
How these pages relate to the rest of the docs
- The tutorials use each idea before naming it, then link here from their "Name it" sections.
- The task pages in Add to Your App open with working code and link here under "Understand it".
- The reference states exact behavior without explanation, and links here for the reasoning behind it.
If a concept page ever leaves you more confused than you arrived, that is a documentation bug we want to know about; see getting help.