Demo image

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]](https://hackernoon.com/building-reactive-terminal-interfaces-in-c-d392ce34e649?gi=d9fb9ce35901) and [React](https://reactjs.org/) * Simple and elegant syntax (in my opinion). * Support for [UTF8](https://en.wikipedia.org/wiki/UTF-8) and [fullwidth chars](https://en.wikipedia.org/wiki/Halfwidth_and_fullwidth_forms) (→ 测试). * No dependencies. * Cross platform. Linux/mac (main target), Windows (experimental thanks to contributors), WebAssembly. * Keyboard & mouse navigation. ## Operating systems - Webassembly - Linux - MacOS - Windows ## Example ~~~cpp vbox({ hbox({ text("left") | border, text("middle") | border | flex, text("right") | border, }), gauge(0.5) | border, }); ~~~ ~~~bash ┌────┐┌───────────────────────────────────────────────────────────────┐┌─────┐ │left││middle ││right│ └────┘└───────────────────────────────────────────────────────────────┘└─────┘ ┌────────────────────────────────────────────────────────────────────────────┐ │██████████████████████████████████████ │ └────────────────────────────────────────────────────────────────────────────┘ ~~~ ## Documentation - [Starter example project](https://github.com/ArthurSonzogni/ftxui-starter) - [Documentation](https://arthursonzogni.github.io/FTXUI/) - [Examples (WebAssembly)](https://arthursonzogni.com/FTXUI/examples/) - [Build using CMake](https://arthursonzogni.com/FTXUI/doc/#build-using-cmake) - [Build using nxxm](https://arthursonzogni.com/FTXUI/doc/#build-using-cmake) ## 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 [](https://arthursonzogni.github.io/FTXUI/elements_8hpp_source.html )
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](https://arthursonzogni.github.io/FTXUI/examples_2dom_2vbox_hbox_8cpp-example.html) using `hbox`, `vbox` and `filler`. ![image](https://user-images.githubusercontent.com/4759106/147242524-7103b5d9-1a92-4e2d-ac70-b3d6740061e3.png) [Example](https://arthursonzogni.github.io/FTXUI/examples_2dom_2gridbox_8cpp-example.htmlp) using gridbox: ![image](https://user-images.githubusercontent.com/4759106/147242972-0db1f2e9-0790-496f-86e6-ed2c604f7a73.png) [Example](https://github.com/ArthurSonzogni/FTXUI/blob/master/examples/dom/hflow.cpp) using flexbox: ![image](https://user-images.githubusercontent.com/4759106/147243064-780ac7cc-605b-475f-94b8-cf7c4aed03a5.png) [See](https://arthursonzogni.github.io/FTXUI/examples_2dom_2hflow_8cpp-example.html) also this [demo](https://arthursonzogni.com/FTXUI/examples/?file=component/flexbox).
Style An element can be decorated using the functions: - `bold` - `dim` - `inverted` - `underlined` - `blink` - `color` - `bgcolor` [Example](https://arthursonzogni.github.io/FTXUI/examples_2dom_2style_gallery_8cpp-example.html) ![image](https://user-images.githubusercontent.com/4759106/147244118-380bf834-9e33-40df-9ff0-07c10f2598ef.png) 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](https://arthursonzogni.github.io/FTXUI/examples_2dom_2color_gallery_8cpp-example.html): ![image](https://user-images.githubusercontent.com/4759106/147248595-04c7245a-5b85-4544-809d-a5984fc6f9e7.png)
Border and separator Use decorator border and element separator() to subdivide your UI: ```cpp auto document = vbox({ text("top"), separator(), text("bottom"), }) | border; ``` [Demo](https://arthursonzogni.github.io/FTXUI/examples_2dom_2separator_8cpp-example.html): ![image](https://user-images.githubusercontent.com/4759106/147244514-4135f24b-fb8e-4067-8896-bc53545583f7.png)
Text and paragraph A simple piece of text is represented using `text("content")`. To support text wrapping following spaces the following function are provided: ```cpp 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](https://arthursonzogni.github.io/FTXUI/examples_2dom_2table_8cpp-example.html): ![ezgif com-gif-maker (4)](https://user-images.githubusercontent.com/4759106/147251370-983a06e7-6f41-4113-92b8-942f43d34d06.gif)
Table A class to easily style a table of data. [Example](https://arthursonzogni.github.io/FTXUI/examples_2dom_2table_8cpp-example.html): ![image](https://user-images.githubusercontent.com/4759106/147250766-77d8ec9e-cf2b-486d-9866-1fd9f1bd2e6b.png)
Canvas Drawing can be made on a Canvas, using braille, block, or simple characters: Simple [example](https://github.com/ArthurSonzogni/FTXUI/blob/master/examples/dom/canvas.cpp): ![image](https://user-images.githubusercontent.com/4759106/147245843-76cc62fb-ccb4-421b-aacf-939f9afb42fe.png) Complex [examples](https://github.com/ArthurSonzogni/FTXUI/blob/master/examples/component/canvas_animated.cpp): ![ezgif com-gif-maker (3)](https://user-images.githubusercontent.com/4759106/147250538-783a8246-98e0-4a25-b032-3bd3710549d1.gif)
#### 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 [](https://arthursonzogni.github.io/FTXUI/component_8hpp_source.html)
Gallery [Gallery](https://arthursonzogni.github.io/FTXUI/examples_2component_2gallery_8cpp-example.html) of multiple components. ([demo](https://arthursonzogni.com/FTXUI/examples/?file=component/gallery)) ![image](https://user-images.githubusercontent.com/4759106/147247330-b60beb9f-e665-48b4-81c0-4b01ee95bc66.png)
Radiobox [Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2radiobox_8cpp-example.html): ![image](https://user-images.githubusercontent.com/4759106/147246401-809d14a5-6621-4e36-8dd9-a2d75ef2a94e.png)
Checkbox [Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2checkbox_8cpp-example.html): ![image](https://user-images.githubusercontent.com/4759106/147246646-b86926a9-1ef9-4efb-af98-48a9b62acd81.png)
Input [Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2input_8cpp-example.html): ![image](https://user-images.githubusercontent.com/4759106/147247671-f1d6f606-1845-4e94-a4a0-d4273e9ae6bd.png)
Toggle [Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2toggle_8cpp-example.html): ![image](https://user-images.githubusercontent.com/4759106/147249383-e2201cf1-b7b8-4a5a-916f-d761e3e7ae40.png)
Slider [Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2slider_8cpp-example.html): ![image](https://user-images.githubusercontent.com/4759106/147249265-7e2cad75-082c-436e-affe-44a550c480ab.png)
Menu [Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2menu_8cpp-example.html): ![image](https://user-images.githubusercontent.com/4759106/147247822-0035fd6f-bb13-4b3a-b057-77eb9291582f.png)
ResizableSplit [Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2resizable_split_8cpp-example.html): ![ezgif com-gif-maker](https://user-images.githubusercontent.com/4759106/147248372-c55512fe-9b96-4b08-a1df-d05cf2cae431.gif)
Dropdown [Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2dropdown_8cpp-example.html): ![youtube-video-gif (3)](https://user-images.githubusercontent.com/4759106/147246982-1e821751-531c-4e1f-bc37-2fa290e143cd.gif)
Tab [Vertical](https://arthursonzogni.github.io/FTXUI/examples_2component_2tab_vertical_8cpp-example.html): ![ezgif com-gif-maker (1)](https://user-images.githubusercontent.com/4759106/147250144-22ff044a-4773-4ff7-a49c-12ba4034acb4.gif) [Horizontal](https://arthursonzogni.github.io/FTXUI/examples_2component_2tab_horizontal_8cpp-example.html): ![ezgif com-gif-maker (2)](https://user-images.githubusercontent.com/4759106/147250217-fe447e0f-7a99-4e08-948a-995087d9b40e.gif)
## Project using FTXUI Feel free to add your projects here: - [git-tui](https://github.com/ArthurSonzogni/git-tui) - [rgb-tui](https://github.com/ArthurSonzogni/rgb-tui) - [chrome-log-beautifier](https://github.com/ArthurSonzogni/chrome-log-beautifier) - [x86-64 CPU Architecture Simulation](https://github.com/AnisBdz/CPU) - [ltuiny](https://github.com/adrianoviana87/ltuiny) - [i3-termdialogs](https://github.com/mibli/i3-termdialogs) - [Just-Fast](https://github.com/GiuseppeCesarano/just-fast) - [simpPRU](https://github.com/VedantParanjape/simpPRU) - [Pigeon ROS TUI](https://github.com/PigeonSensei/Pigeon_ros_tui) - [hastur](https://github.com/robinlinden/hastur) - [CryptoCalculator](https://github.com/brevis/CryptoCalculator) - [todoman](https://github.com/aaleino/todoman) - [TimeAccumulator](https://github.com/asari555/TimeAccumulator) - [vantage](https://github.com/gokulmaxi/vantage) - [tabdeeli](https://github.com/typon/tabdeeli) ## Hosted on * [github](https://github.com/ArthurSonzogni/ftxui) * [gitlab](https://gitlab.com/ArthurSonzogni/ftxui) ## 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](https://github.com/ArthurSonzogni/FTXUI/issues/112)) - [Arch Linux PKGBUILD](https://aur.archlinux.org/packages/ftxui-git/).