• Stars
    star
    6,828
  • Rank 5,774 (Top 0.2 %)
  • Language
    C++
  • License
    MIT License
  • Created almost 6 years ago
  • Updated about 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

💻 C++ Functional Terminal User Interface. ❤️

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

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>

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

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

Project using FTXUI

Feel free to add your projects here:

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

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:

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

Contributors

More Repositories

1

Diagon

Interactive ASCII art diagram generators. 🌟
C++
1,619
star
2

json-tui

A JSON terminal UI made in C++
C++
342
star
3

OpenGL_CMake_Skeleton

❤️ A ready to use cmake skeleton using GLFW, Glew and glm. 👍
C++
287
star
4

git-tui

Collection of human friendly terminal interface for git.
C++
138
star
5

smk

SMK - Simple multimedia kit - C++ WebAssembly
C++
126
star
6

rgb-tui

Create and get colors code from the terminal using a nice interface.
C++
82
star
7

nlohmann_json_cmake_fetchcontent

A lightweight Release-tracking repository for nlohmann/json. Suitable for CMake fetchcontent. Automatically upgraded every weeks.
C++
78
star
8

ftxui-starter

A starter project using the FTXUI library
HTML
73
star
9

smkflow

A C++ dataflow node editor -- Compatible with WebAssembly.
C++
64
star
10

asm-dom-cmake

Virtual dom for C++ using asm-dom and cmake
CMake
25
star
11

FluidScripten

HTML fluid simulation using Emscripten, C++, cmake.
C++
24
star
12

CppBot

Portable C++ tools for bot creations : keyboard and mouse event generations, screen capture !
C++
23
star
13

chrome-log-beautifier

Make Chrome log fancy. Demultiplex by process/thread + colorize.
C++
17
star
14

termBreaker

C++
16
star
15

CommitTracker

A D3 visualisations of web browsers commits
Vue
14
star
16

gcloud-cpp-starter

[Starter project] web server & client. Fully C++/WebAssembly. Server runs on google cloud function. Client uses a C++ virtual dom.
C++
12
star
17

IceMaze

WebAssembly game: a sliding block adventure.
C++
12
star
18

light-flow-editor

A raytracer of implicit geometry bundled with a Node based editor.
C++
10
star
19

ANTLR-cmake-starter

❤️ A ready to use CMake + ANTLR simple starter with not dependencies. 👍
C++
10
star
20

InTheCube

The webassembly port of InTheCube
C++
9
star
21

pigami

A rolling block game
C++
8
star
22

cmake-Qt5-example

A simple example with Qt 5 and CMake
C++
7
star
23

OpenGL_CMake_Skeleton_WebAssembly

❤️ A ready to use cmake OpenGL skeleton supporting WebAssembly using GLFW, Glew and glm. 👍
C++
6
star
24

postwimp

Volumic 3D painting
C++
5
star
25

smk-starter

A starter project for the SMK library.
C++
5
star
26

neovim-configuration

my personal neovim configuration
Lua
3
star
27

learn-webgpu

C++
3
star
28

ANTLR-cmake-Emscripten-starter

❤️ A ready to use CMake + ANTLR + Emscripten (WebAssembly) simple starter with not dependencies. 👍
C++
3
star
29

gn

Mirror of the GN build system repository. Updated daily. https://gn.googlesource.com/gn/
C++
3
star
30

dawn

Mirror of the dawn (WebGPU) repository. Updated daily.
C++
3
star
31

wasm-simd-instruction-list

2
star
32

Animation3D-Ensimag-Starter

TP d'animation 3D
C++
2
star
33

Terra

A 3D world constructor using C++, OpenGL and SFML
C++
2
star
34

chromiumos-platform2

Mirror of the chromiumos/platform2 repository. Updated daily.
C++
1
star
35

wgpu-starter

Saving of my first working webgpu project in C++
C++
1
star
36

neural-webgpu

Testing webgpu for building neural networks.
C++
1
star
37

EnsimagZenithPlus

Script Greasmonkey apportant diverses améliorations au ZENITH de l'Ensimag.
JavaScript
1
star
38

ftxui-window

C++
1
star
39

GPGPU-HPC

C++
1
star
40

StrangeMansion

C++
1
star
41

asm-dom-starter

💥 An example with asm-dom (virtual HTML dom with C++)
JavaScript
1
star
42

Parallel

A 2D game about the same character in 2 different parallale world. You play both of them at the same time.
C++
1
star
43

chrome-dangling-ptr-apply-edit

C++
1
star
44

ChromeDanglingUntriagedTracker

C++
1
star
45

vim-configuration

My vim configuration
Vim Script
1
star
46

PartitionAlloc

Mirror of the chromium partition_alloc repository. Updated daily.
C++
1
star
47

webgpu-dawn-cmake-test

I am testing dawn - https://dawn.googlesource.com/dawn
C++
1
star
48

ChromeSpanificationTracker

C++
1
star
49

SyntheseImage

C++
1
star