📦ArthurSonzogni / FTXUI
← 返回首页
💻 C++ Functional Terminal User Interface. ❤️
⚖️ MIT#ui#terminal#terminal-based#ascii#ascii-art🌐 arthursonzogni.github.io📅 创建于 2019-01-27🔄 更新于 2026-10-21

📄 仓库 README

在 GitHub 查看 ↗
来自 GitHub 仓库自述文件 · 版权归原作者所有

Demo image

latest packaged version(s)
Documentation · Report a Bug · Examples . Request Feature · Send a Pull Request
Doc: English | Français | Español | 繁體中文 | 简体中文 | 日本語 |

FTXUI

Functional Terminal (X) User interface

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

[!TIP] Check out RTXUI, my other project. It is a different, experimental TUI library based on reactive HTML/CSS/C++: structure with semantic HTML, style with real CSS (flexbox, grid, transitions), and bind plain C++ state. Live demo.

Feature

Documentation

Example

#include <ftxui/ftxui.hpp>
using namespace ftxui;

int main() {
  auto document =
    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),
    });

  auto screen = Screen::Create(Dimension::Full());
  Render(screen, document);
  screen.Print();

  return 0;
}

image

Short gallery

FTXUI is organized into three modules: 1. screen: Low-level rendering (colors, pixels, terminal) 2. dom: Layout and composition (hierarchical elements) 3. component: User interaction (widgets, events, main loop)

For most users, including everything at once is the simplest way to start: - Header: #include <ftxui/ftxui.hpp> - CMake target: ftxui::ftxui - Bazel target: @ftxui//:ftxui

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>

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 `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.html) 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.github.io/FTXUI/examples/?file=component/flexbox).
Style An element can be decorated using the functions: - `bold` - `italic` - `dim` - `inverted` - `underlined` - `underlinedDouble` - `blink` - `strikethrough` - `color` - `bgcolor` - `hyperlink` [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 supports the pipe operator. It means: `decorator1(decorator2(element))` and `element | decorator1 | decorator2` can be used.
Colors FTXUI supports every color palette: 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:
Element 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 functions are provided:
Element paragraph(string text);
Element paragraphAlignLeft(string text);
Element paragraphAlignRight(string text);
Element paragraphAlignCenter(string text);
Element paragraphAlignJustify(string text);
[Paragraph example](https://arthursonzogni.github.io/FTXUI/examples_2dom_2paragraph_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

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>

Gallery [Gallery](https://arthursonzogni.github.io/FTXUI/examples_2component_2gallery_8cpp-example.html) of multiple components. ([demo](https://arthursonzogni.github.io/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)

Libraries for FTXUI

Project using FTXUI

Feel free to add your projects here: - json-tui - git-tui - rgb-tui - chrome-log-beautifier


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

Build using CMake

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 v7.0.3
)
FetchContent_MakeAvailable(ftxui)

target_link_libraries(your_target PRIVATE
    # Use the umbrella target (recommended)
    ftxui::ftxui

    # Or chose a submodule
    # ftxui::component
    # ftxui::dom
    # ftxui::screen
)

Build using Bazel

MODULE.bazel

bazel_dep(
    name = "ftxui",
    version = "7.0.3",
)

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 using Meson

FTXUI can also be built using Meson. See doc/installation_meson.md for detailed instructions.

meson setup builddir
ninja -C builddir

To use FTXUI as a subproject in your Meson project, create a subprojects/ftxui.wrap file or use it as a dependency:

ftxui_dep = dependency('ftxui-component')

Build with something else:

If you don't, FTXUI may be used from the following packages: - CMake FetchContent (preferred), - Bazel, - vcpkg, - Conan - Debian package, - Ubuntu package, - Arch Linux, - OpenSUSE, - Nix,

Packaging status

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

📈 近 7 天 Star 趋势

每日新增 Star(柱)与累计 Star(线)· 数据来自 GitHub

🏆 排名变化趋势

在各榜单中的排名历史(数字越小越靠前)

📋 历史上榜记录

每次快照的详细数据
日期 榜单 排名 周期新增 总 STAR