tilto
TypeScript icon, indicating that this package has built-in type declarations

0.0.2 • Public • Published

tilto

Build Status

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

Install this application

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

Dependencies (4)

Dev Dependencies (9)

Package Sidebar

Install

npm i tilto

Weekly Downloads

1

Version

0.0.2

License

MIT

Unpacked Size

60.2 kB

Total Files

21

Last publish

Collaborators

  • kjirou