💻 C++ Functional Terminal User Interface. ❤️
Go to file
Stefan Ravn van Overeem eb9a701fd7
Add -Wuseless-cast to FTXUI_DEV_WARNINGS (#728)
Add the -Wuseless-cast to the FTXUI_DEV_WARNINGS and
fix the compiler complaints about useless casts
2023-08-19 11:20:04 +02:00
.github add FTXUI_DEV_WARNINGS option in CMakeLists (#648) 2023-05-23 14:38:49 +02:00
cmake Add -Wuseless-cast to FTXUI_DEV_WARNINGS (#728) 2023-08-19 11:20:04 +02:00
doc Feature: LinearGradient color decorator. (#592) 2023-03-22 13:59:02 +01:00
examples Start using c++20 in examples. 2023-07-26 01:02:37 +02:00
include/ftxui Tidy up some ConstRef<T> and Ref<T> constructor cases (#730) 2023-08-19 11:10:29 +02:00
src/ftxui Add -Wuseless-cast to FTXUI_DEV_WARNINGS (#728) 2023-08-19 11:20:04 +02:00
tools Add missing includes for gcc 2023-07-15 16:40:20 +02:00
.clang-format Variou details: 2020-08-28 23:54:25 +02:00
.clang-tidy Apply clang-tidy 2023-08-08 02:17:40 +02:00
.gitignore Fix .gitignore 2023-06-24 17:54:04 +02:00
CHANGELOG.md Add a TrackMouse(false) on ScreenInteractive to disable mouse events (#726) 2023-08-19 10:57:50 +02:00
CMakeLists.txt Feature: Windows. (#690) 2023-07-15 16:29:48 +02:00
codecov.yml Bring back C++17 minimal requirement. (#475) 2022-09-03 13:03:04 +02:00
flake.lock Feature: Added nix build support (#603) 2023-03-26 12:17:22 +02:00
flake.nix Feature: Added nix build support (#603) 2023-03-26 12:17:22 +02:00
ftxui.pc.in Add pkg-config file. (#642) 2023-05-17 10:50:47 +02:00
iwyu.imp Feature: hyperlink support. (#665) 2023-06-04 21:06:19 +02:00
LICENSE Add LICENSE. Add take_any_args. 2019-01-06 16:14:19 +01:00
README.md Fix typo in link (#724) 2023-08-15 18:47:14 +02:00

Demo image

latest packaged version(s)
Documentation · Report a Bug · Examples . Request Feature · Send a Pull Request

FTXUI

Functional Terminal (X) User interface

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 practises: 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),
    });

image

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 the flex decorator.

Example using hbox, vbox and filler.

image

Example using gridbox:

image

Example using flexbox:

image

See also this demo.

Style

An element can be decorated using the functions:

  • bold
  • 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.

Colors

FTXUI support every color palette:

Color gallery: image

Border and separator

Use decorator border and element separator() to subdivide your UI:

auto document = vbox({
    text("top"),
    separator(),
    text("bottom"),
}) | border;

Demo:

image

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

Paragraph example

ezgif com-gif-maker (4)

Table

A class to easily style a table of data.

Example:

image

Canvas

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

Simple example:

image

Complex examples:

ezgif com-gif-maker (3)

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 <ftxui/component/component.hpp>

Gallery

Gallery of multiple components. (demo)

image

Radiobox

Example:

image

Checkbox

Example:

image

Input

Example:

image

Toggle

Example:

image

Slider

Example:

image

Menu

Example:

image

ResizableSplit

Example:

ezgif com-gif-maker

Dropdown

Example:

youtube-video-gif (3)

Tab

Vertical:

ezgif com-gif-maker (1)

Horizontal:

ezgif com-gif-maker (2)

Libraries for FTXUI

  • Want to share a useful component using FTXUI? Feel free adding yours here

Project using FTXUI

Feel free to add your projects here:

cpp-best-practices/game_jam

Several games using the FTXUI have been made during the Game Jam:

External package

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 v3.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:

Packaging status

Contributors