tilto

A TUI (Text User Interface) renderer

🚀 Installation

npm install tilto

👀 Overview

const tilto = require('tilto');

const box = tilto.createBox({width: 20, height: 6});

box.borders = tilto.createBordersByType('default');
box.content = 'The quick brown fox jumps over the lazy dog.';
console.log(tilto.render(box));

const ansiRed = '\u001b[31m';
const ansiGreen = '\u001b[32m';
const ansiReset = '\u001b[0m';
box.content = 'It also supports マルチバイト文字, Surrogate-pairs and ' +
  `${ansiRed}ANSI${ansiReset} ${ansiGreen}escape${ansiReset} codes.`;
console.log(tilto.render(box));

box.content = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'].join('\n');
box.scroll = {
  y: 4,
};
console.log(tilto.render(box));

👇

See also examples.

📄 About Basic Design

The render method receives a syntax tree expressed by pure-object and converts it to a rectangular string.

You can change the output by modifying the arguments according to the schema. Also, some utilities for that are defined as public API.

In this case, it is recommended to use a library that can safely update objects such as immer.

The schema of that is the following image if it is expressed by TypeScript. If you want to know more about schema, please refer to the source code.

type Box = {
  borders: Borders;
  children: Box[];
  content: string,
  matrix: Matrix,
  scroll?: {
    thumbElement?: ElementBody,
    trackElement?: ElementBody,
    y: number,
  },
  symbolRuler: SymbolRuler,
  x: number,
  y: number,
  zIndex: number,
};

🔧 Development

Softwares that needs to be locally installed

• Node.js == 10

Install this application

git clone git@github.com:kjirou/tit.git
cd ./tilto
npm install