Demos
Every demo in the repository runs in your terminal and in the browser from the same source. Start with the live showcase, then explore the code behind it.
Try the live showcase
Open your terminal and run:
ssh ratcn.comNo Rust installation or account needed. Browse the component catalog, switch themes, drag cards across the Kanban board, and try the larger demo apps with your keyboard and mouse. The showcase runs real Ratatui interfaces remotely and displays them in your terminal.
The hosted sandbox leaves out the network-dependent Effects demo. Run the showcase locally or use the browser demos to explore the complete collection.
Run a demo locally
Clone the repository and run any demo 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.
Browsing them all
cargo run -p showcaseThe showcase brings the site into your terminal in three views: the landing page, a scrolling Getting started guide, and a catalog that runs the selected demo beside its navigation list. It embeds the demo crates rather than reimplementing them.
Reading the source
- Start with a small demo such as
select/src/lib.rsfor state, messages, and component declarations. demos/shared/src/lib.rsdefines theDemo::draw(&mut Buffer, area, theme)contract every demo implements, and the native and browser host they share. The host supplies the frame's buffer and area, routes events, and schedules redraws and wakeups.showcase/src/main.rsshows one app hosting many: it owns view navigation, scrolling, and which part of the screen gets input.catalog.rsbuilds each demo the first time it is shown, and every demo keeps its own state and runtime.- The Getting started view renders
getting_started.mdwithtui-markdowninside aScrollArea.
Catalog demos draw directly into their pane. Interactive demos pass that area to Ratcn::render_into, and paint-only demos use ordinary widgets.
Full applications
Start here if you want to see how the pieces fit together at real size. All three 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, 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 |
| Input | input (a sign-up form: a validated email, a masked password, Enter to submit), input-adornments (prefixes and suffixes) |
| TextArea | textarea: a wrapping notes field with a live count and a Save button |
| List | list (cursor and selection kept separate), list-multi (checkbox multi-selection), list-people (two-line custom rows) |
| ScrollArea | scroll-area: ten buttons in a viewport three of them tall |
| 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 |
| Checkbox | checkbox: one component as checkbox, ASCII checklist, and switch |
| Cycle | cycle: settings rows with the value cycling in place |
| Progress | progress: a bare bar, a downloading label-and-percentage pair, and a finished one |
| 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 lib.rs is its reusable entry point; larger demos split their implementation across modules. The main.rs Trunk builds is the same one that runs natively. Each demo's Cargo.toml adds ratcn's ratzilla feature for wasm32, and the host they all share, demos/shared, enables ratcn's termina feature for the native build. See Host integration for how that wiring works.