The ftxui from rxdu

Documentation · Report Bug · Examples . Request Feature · Send a Pull Request

FTXUI

Functional Terminal (X) User interface

A simple C++ library for terminal based user interface.

Feature

Functional style. Inspired by [1] and React
Simple and elegant syntax (in my opinion).
Support for UTF8 and fullwidth chars (→ 测试).
No dependencies.
Cross platform. Linux/mac (main target), Windows (experimental thanks to contributors), WebAssembly.
Keyboard & mouse navigation.

Operating systems

Webassembly
Linux
MacOS
Windows

Example

  vbox({
    hbox({
      text("left") | border,
      text("middle") | border | flex,
      text("right") | border,
    }),
    gauge(0.5) | border,
  });

┌────┐┌───────────────────────────────────────────────────────────────┐┌─────┐
│left││middle                                                         ││right│
└────┘└───────────────────────────────────────────────────────────────┘└─────┘
┌────────────────────────────────────────────────────────────────────────────┐
│██████████████████████████████████████                                      │
└────────────────────────────────────────────────────────────────────────────┘

Documentation

Short gallery

DOM

This module defines a hierarchical set of Element. An element manages layout and can be responsive to the terminal dimensions.

They are declared in <ftxui/dom/elements.hpp>

Layout

Element can be arranged together:

horizontally with hbox
vertically with vbox
inside a grid with gridbox
wrap along one direction using the flexbox.

Element can become flexible using the the flex decorator.

Example using hbox, vbox and filler.

Example using gridbox:

Example using flexbox:

See also this demo.

Style

An element can be decorated using the functions:

bold
dim
inverted
underlined
blink
color
bgcolor

Example

FTXUI support the pipe operator. It means: decorator1(decorator2(element)) and element | decorator1 | decorator2 can be used.

Colors

FTXUI support every color palettes:

Color gallery:

Border and separator

Use decorator border and element separator() to subdivide your UI:

auto document = vbox({
    text("top"),
    separator(),
    text("bottom"),
}) | border;

Demo:

Text and paragraph

A simple piece of text is represented using text("content").

To support text wrapping following spaces the following function are provided:

Element paragraph(std::string text);
Element paragraphAlignLeft(std::string text);
Element paragraphAlignRight(std::string text);
Element paragraphAlignCenter(std::string text);
Element paragraphAlignJustify(std::string text);

Paragraph example:

Table

A class to easily style a table of data.

Example:

Canvas

Drawing can be made on a Canvas, using braille, block, or simple characters:

Simple example:

Complex examples:

Component

The ftxui/component is needed when you want to produce dynamic UI, reactive to the user's input. It defines a set of ftxui::Component. A component reacts to Events (keyboard, mouse, resize, ...) and Render Element (see previous section).

Prebuilt components are declared in <ftxui/component/component.hpp>

Gallery

Gallery of multiple components. (demo)