Example Roadmap

Examples are now grouped by documentation path. Public commands stay stable, such as cargo run --example counter; source files live under learning-path subdirectories and are explicitly registered with [[example]] entries in the root Cargo.toml.

Every important example should satisfy:

• It can run independently with cargo run --example name.
• It maps to a tutorial or component reference page.
• It has a reproducible VHS tape.
• Its recording output lives under docs/public/recordings/.

Source groups

Group	Purpose	Examples
start	Getting started and core mental model	hello_world, counter
hooks	State, effects, async data	async_state, atom_state
core	Component model, Element DSL, and macro syntax	control_flow
routing	Shell, dynamic params, history, and page state	router
input	Input layers, exclusivity, shortcuts	input_mutex
components	One page per built-in component, plus the theme demo	input, search_input, scrollview, wrapped_text, modal, confirm_modal, alert_modal, shortcut_info_modal, select, multi_select, tree_select, table, virtual_list, virtual_multi_select, theme
advanced	Custom hooks, Providers, handwritten Components, native widget bridges	custom_widget, custom_hook, custom_provider
apps	Full compositional demos	todo_app

Cargo only auto-discovers top-level examples/name.rs or examples/name/main.rs. Examples inside grouping directories must be explicitly registered in the root Cargo.toml:

[[example]]
name = "counter"
path = "examples/start/counter.rs"

When adding a new example, update the docs page and VHS tape at the same time so documentation does not drift from runnable code.

The old list / custom_list examples have been removed: ordinary selection is covered by Select / MultiSelect / VirtualList, and native ratatui widget bridging is covered by custom_widget.

Source directories

Directory	Examples	Status
examples/start/	hello_world, counter	Registered in Cargo.toml
examples/hooks/	async_state, atom_state	Registered in Cargo.toml
examples/core/	control_flow	Registered in Cargo.toml
examples/routing/	router	Registered in Cargo.toml
examples/input/	input_mutex	Registered in Cargo.toml
examples/components/	input, search_input, scrollview, wrapped_text, modal, confirm_modal, alert_modal, shortcut_info_modal, select, multi_select, tree_select, table, virtual_list, virtual_multi_select, theme	Registered in Cargo.toml
examples/advanced/	custom_widget, custom_hook, custom_provider	Registered in Cargo.toml
examples/apps/	todo_app	Registered in Cargo.toml

Completed vertical slices

Example	Docs	Recording
hello_world	Quick Start	docs/tapes/hello-world.tape
counter	Counter Tutorial	docs/tapes/counter.tape
async_state	Async Data States	docs/tapes/async-state.tape
atom_state	Atom Global State	docs/tapes/atom-state.tape
control_flow	Control Flow Syntax	docs/tapes/control-flow.tape
input_mutex	Input Mutex	docs/tapes/input_mutex.tape
scrollview	ScrollView	docs/tapes/scrollview.tape
wrapped_text	WrappedText	docs/tapes/wrapped-text.tape
input	Input	docs/tapes/input.tape
search_input	SearchInput	docs/tapes/search-input.tape
modal	Modal	docs/tapes/modal.tape
confirm_modal	ConfirmModal	docs/tapes/confirm-modal.tape
alert_modal	AlertModal	docs/tapes/alert-modal.tape
shortcut_info_modal	ShortcutInfoModal	docs/tapes/shortcut-info-modal.tape
router	Router Workbench	docs/tapes/router.tape
select	Select	docs/tapes/select.tape
multi_select	MultiSelect	docs/tapes/multi-select.tape
tree_select	TreeSelect	docs/tapes/tree-select.tape
table	Table	docs/tapes/table.tape
virtual_list	VirtualList	docs/tapes/virtual-list.tape
virtual_multi_select	Virtual Multi Select	docs/tapes/virtual-multi-select.tape
todo_app	Todo App	docs/tapes/todo-app.tape
custom_widget	Native Widget Bridging	docs/tapes/custom-widget.tape
custom_hook	Custom Hook	docs/tapes/custom-hook.tape
custom_provider	Custom Provider	docs/tapes/custom-provider.tape