<p align="center"> <img src="https://github.com/ArthurSonzogni/FTXUI/assets/4759106/6925b6da-0a7e-49d9-883c-c890e1f36007" alt="Demo image"></img> <br/> <a href="#"><img src="https://img.shields.io/badge/c++-%2300599C.svg?style=flat&logo=c%2B%2B&logoColor=white"></img></a> <a href="http://opensource.org/licenses/MIT"><img src="https://img.shields.io/github/license/arthursonzogni/FTXUI?color=black"></img></a> <a href="#"><img src="https://img.shields.io/github/stars/ArthurSonzogni/FTXUI"></img></a> <a href="#"><img src="https://img.shields.io/github/forks/ArthurSonzogni/FTXUI"></img></a> <a href="#"><img src="https://img.shields.io/github/repo-size/ArthurSonzogni/FTXUI"></img></a> <a href="https://github.com/ArthurSonzogni/FTXUI/graphs/contributors"><img src="https://img.shields.io/github/contributors/arthursonzogni/FTXUI?color=blue"></img></a> <br/> <a href="https://github.com/ArthurSonzogni/FTXUI/issues"><img src="https://img.shields.io/github/issues/ArthurSonzogni/FTXUI"></img></a> <a href="https://repology.org/project/ftxui/versions"><img src="https://repology.org/badge/latest-versions/ftxui.svg" alt="latest packaged version(s)"></a> <a href="https://codecov.io/gh/ArthurSonzogni/FTXUI"> <img src="https://codecov.io/gh/ArthurSonzogni/FTXUI/branch/master/graph/badge.svg?token=C41FdRpNVA"/> </a> <br/> <a href="https://arthursonzogni.github.io/FTXUI/">Documentation</a> · <a href="https://github.com/ArthurSonzogni/FTXUI/issues">Report a Bug</a> · <a href="https://arthursonzogni.github.io/FTXUI/examples/">Examples</a> . <a href="https://github.com/ArthurSonzogni/FTXUI/issues">Request Feature</a> · <a href="https://github.com/ArthurSonzogni/FTXUI/pulls">Send a Pull Request</a> <br/> Doc: <a href="https://github.com/ArthurSonzogni/">English</a> | <a href="https://arthursonzogni.github.io/FTXUI/fr/index.html">Français</a> | <a href="https://arthursonzogni.github.io/FTXUI/es/index.html">Español</a> | <a href="https://arthursonzogni.github.io/FTXUI/zh-TW/index.html">繁體中文</a> | <a href="https://arthursonzogni.github.io/FTXUI/zh-CH/index.html">简体中文</a> | <a href="https://arthursonzogni.github.io/FTXUI/ja/index.html">日本語</a> | </p>

FTXUI

<i>Functional Terminal (X) User interface</i>

A simple cross-platform C++ library for terminal based user interfaces!

Feature

• Functional style. Inspired by 1 and React
• Simple and elegant syntax (in my opinion)
• Keyboard & mouse navigation.
• Support for UTF8 and fullwidth chars (→ 测试)
• Support for animations. Demo 1, Demo 2
• Support for drawing. Demo
• No dependencies.
• C++20 Module support
• Cross platform: Linux/MacOS (main target), WebAssembly, Windows (Thanks to contributors!).
• Learn by examples, and tutorials
• Multiple packages:
  • CMake FetchContent (preferred)
  • Bazel
  • vcpkg
  • Conan Debian package
  • Ubuntu package
  • Arch Linux
  • OpenSUSE
  • XMake repository package
  • Nix
• Good practices: documentation, tests, fuzzers, performance tests, automated CI, automated packaging, etc...

Documentation

• Starter CMake
• Starter Bazel
• Documentation
• Examples (WebAssembly)
• Build using CMake
• Build using Bazel

Example

    vbox({
      hbox({
        text("one") | border,
        text("two") | border | flex,
        text("three") | border | flex,
      }),

      gauge(0.25) | color(Color::Red),
      gauge(0.50) | color(Color::White),
      gauge(0.75) | color(Color::Blue),
    });

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>

<details><summary>Layout</summary>

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 flex decorator.

Example using hbox, vbox and filler.

Example using gridbox:

Example using flexbox:

See also this demo.

</details> <details><summary>Style</summary>

An element can be decorated using the functions:

• bold
• italic
• dim
• inverted
• underlined
• underlinedDouble
• blink
• strikethrough
• color
• bgcolor
• hyperlink

Example

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

</details> <details><summary>Colors</summary>

FTXUI support every color palette:

Color gallery:

</details> <details><summary>Border and separator</summary>

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

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

Demo:

</details> <details><summary>Text and paragraph</summary>

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

To support text wrapping following spaces the following functions 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

</details> <details><summary>Table</summary>

A class to easily style a table of data.

Example:

</details> <details><summary>Canvas</summary>

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

Simple example:

Complex examples:

</details>

Component

ftxui/component produces dynamic UI, reactive to the user's input. It defines a set of ftxui::Component. A component reacts to Events (keyboard, mouse, resize, ...) and Renders as an Element (see previous section).

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

<details><summary>Gallery</summary>

Gallery of multiple components. ([demo]