Examples Overview
Ansiq examples are not all onboarding material, and they should not be read as if they were.
Each example should teach one or two ideas clearly. Some are intentionally small and teach the basics. Others are showcases that demonstrate how several runtime and widget capabilities can be composed into a more realistic app shell.
Three roles examples can play
1. Onboarding examples
These should be:
- small enough to understand in one sitting
- realistic enough to feel like an actual app
Right now the best onboarding example is:
It introduces:
List- selected state
- focus traversal
- a reactive footer
without adding background IO or complicated shells.
2. Concept examples
These exist to isolate one idea:
They are useful once you already understand the basic tree-and-state model and want to see:
- shared signals
- scroll coupling
- table state
- selection continuity
3. Showcase / internals-oriented examples
These are closer to real applications:
They are valuable because they show:
- multiple panes
- real data sources
- richer shells
- the interaction between state, services, and composed widgets
But they are not the best first read.
Recommended reading order
You can also read by question instead of by order
If you already know what you are stuck on, this shortcut map is often more useful than a linear example path:
- list selection, focus, and small app shells: List Navigation + List + State, Focus, Input
- tables and structured records: Table Interaction + Table + Layout and Rendering
- scrolling and linked scroll state: Scroll Sync + ScrollView + Scrollbar
- fixed shells and multi-pane application structure: Activity Monitor + Shell + Layout and Rendering
- structured document browsing: OpenAPI Explorer + List + ScrollView + Reactive Graph vs UI Tree
What to look for when reading an example
A common mistake is to focus only on the visual tree.
A better reading order is:
- identify the state model
- identify the app shell
- identify which widgets or compositions are being demonstrated
- only then study the exact widget tree
This is especially important in the showcase examples, where a lot of the real value is in:
- how data is prepared
- where state lives
- how shell structure is separated from loading or sampling logic
When to treat an example as a pattern rather than a template
Examples are not meant to be copied verbatim into every project.
Their real value is in showing patterns such as:
- how to shape an app shell
- how to split state from services
- when to extract a composition widget
- how a particular runtime boundary behaves in a realistic app
This is especially true for activity_monitor and openapi_explorer.
Where to go next
If you have not yet written a Ansiq app, start with:
If you already understand a small app shell and want to study synchronized state:
If you want to study a fuller application structure: