Awesome
<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.html">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> </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
- Cross platform: Linux/MacOS (main target), WebAssembly, Windows (Thanks to contributors!).
- Learn by examples, and tutorials
- Multiple packages: CMake FetchContent (preferred), vcpkg, pkgbuild, conan.
- Good practices: documentation, tests, fuzzers, performance tests, automated CI, automated packaging, etc...
Documentation
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 the flex
decorator.
Example using hbox
, vbox
and filler
.
Example using gridbox:
Example using flexbox:
An element can be decorated using the functions:
bold
dim
inverted
underlined
underlinedDouble
blink
strikethrough
color
bgcolor
hyperlink
FTXUI supports the pipe operator. It means: decorator1(decorator2(element))
and element | decorator1 | decorator2
can be used.
FTXUI support every color palette:
Color gallery:
Use decorator border and element separator() to subdivide your UI:
auto document = vbox({
text("top"),
separator(),
text("bottom"),
}) | border;
Demo:
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);
A class to easily style a table of data.
Drawing can be made on a Canvas, using braille, block, or simple characters:
Simple example:
Complex examples:
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)
Libraries for FTXUI
- Want to share a useful Component for FTXUI? Feel free to add yours here
- ftxui-grid-container
- ftxui-ip-input
- ftxui-image-view: For Image Display.
Project using FTXUI
Feel free to add your projects here:
- json-tui
- git-tui
- ostree-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
- tiles
- cachyos-cli-installer
- beagle-config
- turing_cmd
- StartUp
- eCAL monitor
- Path Finder
- rw-tui
- resource-monitor
- ftxuiFileReader
- ftxui_CPUMeter
- Captain's log
- FTowerX
- Caravan
- Step-Writer
- XJ music
- UDP chat
cpp-best-practices/game_jam
Several games using the FTXUI have been made during the Game Jam:
- TermBreaker [Play web version]
- Minesweeper Marathon [Play web version]
- Grand Rounds
- LightsRound
- DanteO
- Sumo
- Drag Me aROUND
- DisarmSelfDestruct
- TheWorld
- smoothlife
- Consu
Utilization
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 v5.0.0
)
FetchContent_GetProperties(ftxui)
if(NOT ftxui_POPULATED)
FetchContent_Populate(ftxui)
add_subdirectory(${ftxui_SOURCE_DIR} ${ftxui_BINARY_DIR} EXCLUDE_FROM_ALL)
endif()
If you don't, FTXUI may be used from the following packages:
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 . . .