Examples
Each example here is a complete, runnable program that you can read, run, and take apart. Every worked example follows the same structure: try it, read the code, see how it works, then make it yours.
If you want a full application to study or remix, the project gallery has those. The examples on this page are deliberately small; each one is built to show a handful of ideas clearly.
Worked examples
| Example | Shows | Good after |
|---|---|---|
| Calculator | Forms and state working together | Ask the user for information |
| Three linked pages | Multi-page navigation with no state | Build your first app |
| Big form | Every core input in one form | Ask the user for information |
| To-do list | Adding and removing items from list state | Show a collection |
| Pet registry | Nested data: a list of dataclasses | Show a collection |
| Shop | Arguments and inventory across routes | Show different content |
| Login flow | Conditional pages from state (and why it is not security) | Show different content |
| Photo editor | Uploading and transforming images | Use pictures |
Playground
The playground holds collections of tiny editable demos, organized by topic. You can run, change, and even break each demo directly in the page.
- Basics starts with hello pages, counters, and first apps.
- Forms demonstrates every input type in miniature.
- Lists and tables shows ways to display data.
- Styling puts themes, styling helpers, and CSS side by side.
- Images and media covers pictures, sound, video, and plots.
- Interactive demonstrates events and partial updates.
- Camera, location, and sound explores device features.
How to use an example
- Try it in the embedded app to see the behavior.
- Predict what one change would do, then edit the code and check.
- Copy it into your own editor when you want to keep going.
Every listing is a complete program, including the imports and the
start_server(...)call.
If none of these examples covers what you need, each task page in Add to Your App includes its own small example, and the component reference has focused snippets for each component.