Skip to content

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.

ExampleDemonstratesGuide
app_dashboard.cppA complete application, rather than a demo of one property.Guide
app_filebrowser.cppA complete application driven by the keyboard.Guide
demo.cppA kitchen-sink dashboard combining most of the library in one program.Guide
playground.cppA live HTML/CSS editor and preview, side by side.Guide

Core Concepts ​

Components, reactivity, interpolation, conditional rendering, and slots.

ExampleDemonstratesGuide
conditional.cppConditional rendering.Guide
counter.cppReactive state and {...} interpolation.Guide
helloworld.cppThe smallest possible RTXUI application.Guide
loop_complex.cppLooping over a collection of structs.Guide
loop_simple.cppLooping over a std::vector<std::string> with <for>.Guide
slots.cppContent projection with <slot>.Guide

Form Elements ​

User input through keyboard and mouse, bound to C++ variables.

ExampleDemonstratesGuide
checkbox.cppThe <checkbox> component bound to a bool.Guide
fieldset.cpp<fieldset> and <legend> grouping.Reference
input.cppThe <input> component with two-way binding.Guide
label.cpp<label> delegating clicks and focus to the control it names.Guide
progress.cppThe <progress> component driven by bound state.Guide
radio.cpp<radio> buttons sharing a name, with the selection bound to a C++ string.Guide
select.cppThe <select> dropdown with <option> children.Guide
slider.cppThe <slider> component bound to an int.Guide
textarea.cppThe <textarea> component: multi-line editing with a line-number gutter.Guide

Layout & Box Model ​

Positioning terminal cells with flexbox, grid, borders, and margins.

ExampleDemonstratesGuide
border_scroll_demo.cppBorders and scrollbars sharing an edge.Guide
borders.cppEvery border style: solid, double, dashed, round, tall, vkey and more.Guide
grid.cppCSS grid.Guide
layout.cppFlexbox basics.Guide
layout_flex.cppAn interactive flexbox playground.Guide
positioning.cppposition: relative, absolute and fixed, plus z-index stacking.Guide
sticky.cppposition: sticky.Guide

Scrolling & Overflow ​

Handling scrollable regions, focus tracking, and overflow behavior.

ExampleDemonstratesGuide
anchor.cppAnchor navigation.Guide
focus_scroll.cppScroll-into-view on keyboard focus.Guide
horizontal_scroll.cppHorizontal overflow.Guide
nested_scroll.cppNested scroll containers and scroll chaining.Guide
scroll_behavior.cppscroll-behavior: smooth versus auto.Guide

Typography & Styling ​

Colors, text decorations, pseudo-classes, transitions, and keyframe animations.

ExampleDemonstratesGuide
animation.cppKeyframe animations.Guide
colors.cppForeground and background colors.Guide
opacity.cppOpacity and alpha blending, including how nested opacity compounds.Guide
pseudo_classes.cppThe interactive pseudo-classes: :hover, :focus and :active.Guide
text_align.cpptext-align: left, center and right.Guide
text_decoration.cppText decoration: bold, dim, italic, underline and strikethrough.Guide
transitions.cppCSS transitions.Guide

Components & Advanced Features ​

Built-in HTML elements, CJK text, Markdown rendering, spatial nav, and cookbook recipes.

ExampleDemonstratesGuide
cjk.cppDouble-width text.Guide
cookbook_async.cppRecipe: updating the UI from a worker thread.Guide
cookbook_dialog.cppRecipe: a confirmation dialog.Guide
cookbook_tabs.cppRecipe: tabs built by hand.Guide
details.cppThe <details>/<summary> disclosure widget.Reference
dialog.cppThe built-in <dialog> element.Reference
hr.cppThe <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.cppThe <markdown> component: a live editor and rendered preview, side by side.Guide
media.cpp@media queries reacting to terminal size.Guide
spatial_navigation.cppArrow-key spatial navigation.Guide
tabindex.cppControlling focus order with tabindex.Guide
table.cppTable elements: <table>, <thead>, <tr>, <th>, <td>, with colspan, rowspan and a sticky header row.Reference
tabs.cppThe built-in <tabs>/<tab-pane> components.Reference
tooltip.cppThe <tooltip> component, shown on hover in each of four directions.Reference