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

• Starter example project
• Documentation
• Examples (WebAssembly)
• Build using CMake
• Build using nxxm

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)

Radiobox

Example:

Checkbox

Example:

Input

Example:

Toggle

Example:

Slider

Example:

Menu

Example:

ResizableSplit

Example:

Dropdown

Example:

Tab

Vertical:

Horizontal:

Project using FTXUI

Feel free to add your projects here:

• git-tui
• rgb-tui
• chrome-log-beautifier
• x86-64 CPU Architecture Simulation
• ltuiny
• i3-termdialogs
• Just-Fast
• simpPRU
• Pigeon ROS TUI
• hastur
• CryptoCalculator
• todoman
• TimeAccumulator
• vantage
• tabdeeli

Hosted on

• github
• gitlab

External package

It is highly recommanded to use cmake FetchContent to depends on FTXUI. This way you can specify which commit you would like to depends on.

If you don't, the following packages have been created:

• vcpkg (soon)
• Arch Linux PKGBUILD.