Repository: ArthurSonzogni/FTXUI

Stars: 9955

README.md Copy Chapter

<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 Copy Chapter

Documentation Copy Chapter

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

Example Copy Chapter

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

!image

Short gallery Copy Chapter

#### 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.

!image


Example using gridbox:

!image

Example using flexbox:

!image

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

!image

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:
!image

</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:

!image

</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);

</details>

<details><summary>Table</summary>

A class to easily style a table of data.

Example:

!image

</details>

<details><summary>Canvas</summary>

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

Simple example:

!image

Complex examples:

!ezgif com-gif-maker (3)
</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)

!image

</details>

<details><summary>Radiobox</summary>

Example:

!image

</details>

<details><summary>Checkbox</summary>

Example:

!image

</details>

<details><summary>Input</summary>

Example:

!image

</details>

<details><summary>Toggle</summary>

Example:

!image

</details>

<details><summary>Slider</summary>

Example:

!image

</details>

<details><summary>Menu</summary>

Example:

!image

</details>

<details><summary>ResizableSplit</summary>

Example:

!ezgif com-gif-maker
</details>

<details><summary>Dropdown</summary>

Example:

!youtube-video-gif (3)

</details>

<details><summary>Tab</summary>

Vertical:

!ezgif com-gif-maker (1)

Horizontal:

!ezgif com-gif-maker (2)

</details>

Libraries for FTXUI Copy Chapter

Project using FTXUI Copy Chapter

Feel free to add your projects here:
- json-tui
- git-tui
- rgb-tui
- chrome-log-beautifier
---
- 2048-cpp
- BestEdrOfTheMarket
- Captain's log
- Caravan
- CryptoCalculator
- FTB - tertminal file browser
- FTowerX
- Fallout terminal hacking
- Lazylist
- Memory game
- Path Finder
- Pigeon ROS TUI
- SHOOT!
- StartUp
- Step-Writer
- TUISIC
- Terminal Animation
- TimeAccumulator
- UDP chat
- VerifySN (Fast Hash Tool)
- XJ music
- beagle-config
- cachyos-cli-installer
- eCAL monitor
- ftxuiFileReader
- ftxui_CPUMeter
- hastur
- i3-termdialogs
- inLimbo
- keywords (Play web version :heart:)
- ltuiny
- openJuice
- ostree-tui
- pciex
- resource-monitor
- rw-tui
- simpPRU
- sweeper (Play web version :heart:)
- tabdeeli
- terminal-rain
- tic-tac-toe
- tiles
- todoman
- turing_cmd
- typing-speed-test
- vantage
- x86-64 CPU Architecture Simulation
- C++ Process Manager

cpp-best-practices/game_jam cpp-best-practices/game_jam')" title="Copy section prompt for LLMs"> Copy Section

Several games using the FTXUI have been made during the Game Jam:
- TermBreaker [[Play web version]](https://arthursonzogni.com/TermBreaker/)
- Minesweeper Marathon [[Play web version]](https://barlasgarden.com/minesweeper/index.html)
- Grand Rounds
- LightsRound
- DanteO
- Sumo
- Drag Me aROUND
- DisarmSelfDestruct
- TheWorld
- smoothlife
- Consu

Build using CMake Copy Chapter

It is highly recommended to use CMake FetchContent to depend on FTXUI so you may specify which commit you would like to depend on.

include(FetchContent)
FetchContent_Declare(ftxui
  GIT_REPOSITORY https://github.com/ArthurSonzogni/ftxui
  GIT_TAG v6.1.9
)
FetchContent_MakeAvailable(ftxui)
target_link_libraries(your_target PRIVATE
    # Chose a submodule
    ftxui::component
    ftxui::dom
    ftxui::screen
)

Build using Bazel

MODULE.bazel

bazel_dep(
    name = "ftxui",
    version = "v6.1.9",
)

BUILD.bazel

cc_binary(
    name = "your_target",
    srcs = ["your_source.cc"],
    deps = [
        # Choose submodules
        "@ftxui//:component",
        "@ftxui//:dom",
        "@ftxui//:screen",
        
        # Or use the single ftxui target (includes all modules)
        # "@ftxui//:ftxui",
    ],
)

Build with something else:


If you choose to build and link FTXUI yourself, ftxui-component must be first in the linking order relative to the other FTXUI libraries, i.e.

g++ . . . -lftxui-component -lftxui-dom -lftxui-screen . . .

To build FTXUI with modules, check documentation

Contributors Copy Chapter

<a href="https://github.com/ArthurSonzogni/FTXUI/graphs/contributors">
<img src="https://contrib.rocks/image?repo=ArthurSonzogni/FTXUI" />
</a>