Demos
Every demo in the repository runs in your terminal and in the browser from the same source. Clone the repository and run any of them by name:
git clone https://github.com/kristoferlund/ratcn
cd ratcn
cargo run -p ledger93The live previews on the component pages are these same demos, compiled to WebAssembly.
Full applications
Start here if you want to see how the pieces fit together at real size. Both are worth reading as source, not just running.
| Demo | Shows |
|---|---|
ledger93 | A nineties double-entry bookkeeping terminal. The largest example: several screens, per-screen state and messages, dialogs, and a keyboard-first workflow. |
landing | A responsive grid of live components, and how one app splits state and messages across independent tiles. This is the demo embedded on the home page. |
wizard | A four-step wizard that walks through starting a ratcn app. Buttons that move between steps, a select and a list that record choices, and one screen module per step. This is the demo embedded on Getting started. |
Patterns
Each of these shows one technique end to end.
| Demo | Shows |
|---|---|
kanban | Drag and drop between columns, with cards keeping their identity as they move. See Dragging. |
drag | The smallest possible drag: one block, moved anywhere inside the frame. |
panels | Two focusable panels, each grouping its own children — scopes and Tab boundaries. See Structuring a larger app. |
effects | Fetching data without blocking the UI, and feeding the result back in as a message. See State and messages. |
Components
One demo per feature, so a docs page can show several side by side. These are the previews embedded on the component pages.
| Component | Demos |
|---|---|
| Button | button-small, button-large — the five variants at each size |
| List | list (cursor and selection kept separate), list-multi (checkbox multi-selection), list-people (two-line custom rows) |
| Select | select — the dropdown panel |
| Tabs | tabs-basic (manual activation), tabs-automatic (focus selects), tabs-disabled (skipped by traversal), tabs-large |
| Dialog | dialog — a modal layer with actions, draggable by its border |
| Toast | toast — transient notifications your app owns |
| Tooltip | tooltip — hover or Tab to a button and its bubble floats above |
| BarChart | barchart, barchart-horizontal — a paint-only widget, no runtime needed |
Running them in the browser
The demos are also the source of the previews on this site. Building them needs Trunk:
cd demos/ledger93
trunk serveEach demo's Cargo.toml selects crossterm when built natively and ratzilla when built for wasm32, so the same main.rs covers both. See Host integration for how that wiring works.