Examples Index
Every example in the repository's example/ directory, running live in WebAssembly and accompanied by its C++ source code.
Applications
Complete applications, showing how individual features compose into full programs.
| Example | Demonstrates | Guide |
|---|---|---|
| app_dashboard.cpp | A complete application, rather than a demo of one property. | Guide |
| app_filebrowser.cpp | A complete application driven by the keyboard. | Guide |
| demo.cpp | A kitchen-sink dashboard combining most of the library in one program. | Guide |
| playground.cpp | A live HTML/CSS editor and preview, side by side. | Guide |
Core Concepts
Components, reactivity, interpolation, conditional rendering, and slots.
| Example | Demonstrates | Guide |
|---|---|---|
| conditional.cpp | Conditional rendering. | Guide |
| counter.cpp | Reactive state and {...} interpolation. | Guide |
| helloworld.cpp | The smallest possible RTXUI application. | Guide |
| loop_complex.cpp | Looping over a collection of structs. | Guide |
| loop_simple.cpp | Looping over a std::vector<std::string> with <for>. | Guide |
| slots.cpp | Content projection with <slot>. | Guide |
Form Elements
User input through keyboard and mouse, bound to C++ variables.
| Example | Demonstrates | Guide |
|---|---|---|
| checkbox.cpp | The <checkbox> component bound to a bool. | Guide |
| fieldset.cpp | <fieldset> and <legend> grouping. | Reference |
| input.cpp | The <input> component with two-way binding. | Guide |
| label.cpp | <label> delegating clicks and focus to the control it names. | Guide |
| progress.cpp | The <progress> component driven by bound state. | Guide |
| radio.cpp | <radio> buttons sharing a name, with the selection bound to a C++ string. | Guide |
| select.cpp | The <select> dropdown with <option> children. | Guide |
| slider.cpp | The <slider> component bound to an int. | Guide |
| textarea.cpp | The <textarea> component: multi-line editing with a line-number gutter. | Guide |
Layout & Box Model
Positioning terminal cells with flexbox, grid, borders, and margins.
| Example | Demonstrates | Guide |
|---|---|---|
| border_scroll_demo.cpp | Borders and scrollbars sharing an edge. | Guide |
| borders.cpp | Every border style: solid, double, dashed, round, tall, vkey and more. | Guide |
| grid.cpp | CSS grid. | Guide |
| layout.cpp | Flexbox basics. | Guide |
| layout_flex.cpp | An interactive flexbox playground. | Guide |
| positioning.cpp | position: relative, absolute and fixed, plus z-index stacking. | Guide |
| sticky.cpp | position: sticky. | Guide |
Scrolling & Overflow
Handling scrollable regions, focus tracking, and overflow behavior.
| Example | Demonstrates | Guide |
|---|---|---|
| anchor.cpp | Anchor navigation. | Guide |
| focus_scroll.cpp | Scroll-into-view on keyboard focus. | Guide |
| horizontal_scroll.cpp | Horizontal overflow. | Guide |
| nested_scroll.cpp | Nested scroll containers and scroll chaining. | Guide |
| scroll_behavior.cpp | scroll-behavior: smooth versus auto. | Guide |
Typography & Styling
Colors, text decorations, pseudo-classes, transitions, and keyframe animations.
| Example | Demonstrates | Guide |
|---|---|---|
| animation.cpp | Keyframe animations. | Guide |
| colors.cpp | Foreground and background colors. | Guide |
| opacity.cpp | Opacity and alpha blending, including how nested opacity compounds. | Guide |
| pseudo_classes.cpp | The interactive pseudo-classes: :hover, :focus and :active. | Guide |
| text_align.cpp | text-align: left, center and right. | Guide |
| text_decoration.cpp | Text decoration: bold, dim, italic, underline and strikethrough. | Guide |
| transitions.cpp | CSS transitions. | Guide |
Components & Advanced Features
Built-in HTML elements, CJK text, Markdown rendering, spatial nav, and cookbook recipes.
| Example | Demonstrates | Guide |
|---|---|---|
| cjk.cpp | Double-width text. | Guide |
| cookbook_async.cpp | Recipe: updating the UI from a worker thread. | Guide |
| cookbook_dialog.cpp | Recipe: a confirmation dialog. | Guide |
| cookbook_tabs.cpp | Recipe: tabs built by hand. | Guide |
| details.cpp | The <details>/<summary> disclosure widget. | Reference |
| dialog.cpp | The built-in <dialog> element. | Reference |
| hr.cpp | The <hr> separator, and how border styles apply to it. | Reference |
| lists.cpp | <ul>, <ol> and <li>, including nesting, start/reversed, per-item value, and the list-style-type property. | Reference |
| markdown.cpp | The <markdown> component: a live editor and rendered preview, side by side. | Guide |
| media.cpp | @media queries reacting to terminal size. | Guide |
| spatial_navigation.cpp | Arrow-key spatial navigation. | Guide |
| tabindex.cpp | Controlling focus order with tabindex. | Guide |
| table.cpp | Table elements: <table>, <thead>, <tr>, <th>, <td>, with colspan, rowspan and a sticky header row. | Reference |
| tabs.cpp | The built-in <tabs>/<tab-pane> components. | Reference |
| tooltip.cpp | The <tooltip> component, shown on hover in each of four directions. | Reference |

