Terminosaurus is a DOM-like UI library for TypeScript that makes it easy to build powerful graphical interfaces for your terminal without having to deal with complex positioning or state updates.

Features

Framework-agnostic API
React renderer
Advanced layout positioning
Event handlers
Text wrapping
CSS properties
Fast rendering

Getting Started

Framework Agnostic

React Syntax

import {
    TermElement,
    TermText,
    run,
} from 'terminosaurus';

run({}, async screen => {
    const text = new TermText();
    text.appendTo(screen.rootNode);

    let counter = 0;

    const increaseCounter = () => {
        counter += 1;
        text.setText(`Counter: ${counter}`);
    };

    text.onClick.addEventListener(() => {
        increaseCounter();
    });

    increaseCounter();
});

import {
    useState
} from 'react'
import {
    render,
} from 'terminosaurus/react';

function App() {
    const [counter, setCounter] = useState(0);

    const increaseCounter = () => {
        setCounter(counter + 1);
    };

    return (
        <term:div onClick={increaseCounter}>
            Counter: {counter}
        </term:div>
    );
}

render({}, <App/>);