Documentation ·
Report a Bug ·
Examples .
Request Feature ·
Send a Pull Request
Functional Terminal (X) User interface
A simple cross-platform C++ library for terminal based user interfaces!
- 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 practises: documentation, tests, fuzzers, performance tests, automated CI, automated packaging, etc...
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),
});
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:
Style
An element can be decorated using the functions:
bolddiminvertedunderlinedunderlinedDoubleblinkstrikethroughcolorbgcolorhyperlink
FTXUI supports the pipe operator. It means: decorator1(decorator2(element)) and element | decorator1 | decorator2 can be used.
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 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);
Canvas
Drawing can be made on a Canvas, using braille, block, or simple characters:
Simple example:
Complex examples:
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>
- Want to share a useful component using FTXUI? Feel free adding yours here
- ftxui-grid-container
- ftxui-ip-input
Feel free to add your projects here:
- json-tui
- 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
- tiles
- cachyos-cli-installer
- beagle-config
- turing_cmd
- StartUp
- eCAL monitor
- Path Finder
- rw-tui
- resource-monitor
- ftxuiFileReader
- ftxui_CPUMeter
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
It is highly recommended to use CMake FetchContent to depend on FTXUI. This way you can 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, the following packages have been created:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent