https://github.com/arcanis/terminosaurus

Agnostic terminal GUI library for TypeScript, distributed with a native React renderer
https://github.com/arcanis/terminosaurus

cli command-line flexbox gui interactive react typescript

Last synced: 5 days ago
JSON representation

Agnostic terminal GUI library for TypeScript, distributed with a native React renderer

• Host: GitHub
• URL: https://github.com/arcanis/terminosaurus
• Owner: arcanis
• Created: 2024-03-06T22:50:39.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-03-26T21:05:33.000Z (8 months ago)
• Last Synced: 2024-08-07T22:35:08.700Z (3 months ago)
• Topics: cli, command-line, flexbox, gui, interactive, react, typescript
• Language: TypeScript
• Homepage: http://mael.dev/terminosaurus/
• Size: 385 KB
• Stars: 75
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 

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

```ts

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

});

```

```tsx

import {

    useState

} from 'react'

import {

    render,

} from 'terminosaurus/react';

function App() {

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

    const increaseCounter = () => {

        setCounter(counter + 1);

    };

    return (

        

            Counter: {counter}

        

    );

}

render({}, );

```