https://github.com/Im-Beast/deno_tui

🦕 Deno module for creating Terminal User Interfaces
https://github.com/Im-Beast/deno_tui

console deno deno-module terminal terminal-user-interface text-user-interface ts tui typescript

Last synced: about 2 months ago
JSON representation

🦕 Deno module for creating Terminal User Interfaces

• Host: GitHub
• URL: https://github.com/Im-Beast/deno_tui
• Owner: Im-Beast
• License: mit
• Created: 2021-08-14T10:06:08.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-09-08T12:52:51.000Z (3 months ago)
• Last Synced: 2024-09-08T22:50:32.903Z (3 months ago)
• Topics: console, deno, deno-module, terminal, terminal-user-interface, text-user-interface, ts, tui, typescript
• Language: TypeScript
• Homepage: https://deno.land/x/tui
• Size: 1020 KB
• Stars: 265
• Watchers: 3
• Forks: 18
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-deno - tui - Module which allows easy creation of Terminal User Interfaces. (Modules / CLI utils)

README

        
# ⌨️ Tui



[![Deno](https://github.com/Im-Beast/deno_tui/actions/workflows/deno.yml/badge.svg)](https://github.com/Im-Beast/deno_tui/actions/workflows/deno.yml)

[![Deno doc](https://doc.deno.land/badge.svg)](https://doc.deno.land/https://deno.land/x/tui/mod.ts)

Simple [Deno](https://github.com/denoland/deno/) module that allows easy creation of

[Terminal User Interfaces](https://en.wikipedia.org/wiki/Text-based_user_interface).

### 🔩 Features

- 🔰 Ease of use

- 👁️‍🗨️ Reactivity

- 🖇️ No dependencies

- 📄 Decent documentation

- [📦 Multiple ready-to-use components](./src/components/)

- 🎨 Styling framework agnostic

  - This means you can use whatever terminal styling module you want

  - [🖍️ Crayon](https://github.com/crayon-js/crayon) is recommended _but not imposed_ as it greatly integrates with Tui

- 🪶 Relatively lightweight

## 🖥️ OS Support

| Operating system     | Linux | macOS | Windows¹ | WSL  |

| -------------------- | ----- | ----- | -------- | ---- |

| Base                 | ✔️     | ✔️     | ✔️        | ✔️    |

| Keyboard support     | ✔️     | ✔️     | ✔️        | ✔️    |

| Mouse support        | ✔️     | ✔️     | ✔️        | ✔️    |

| Required permissions | none  | none  | none     | none |

¹ - If unicode characters are displayed incorrectly type `chcp 65001` into the console to change active console code

page to use UTF-8 encoding.

## 🎓 Get started

#### Replace {version} with relevant module versions

1. Create Tui instance

```ts

import { crayon } from "https://deno.land/x/crayon@$MODULE_VERSION/mod.ts";

import { Canvas, Tui } from "https://deno.land/x/tui@$MODULE_VERSION/mod.ts";

const tui = new Tui({

  style: crayon.bgBlack, // Make background black

  refreshRate: 1000 / 60, // Run in 60FPS

});

tui.dispatch(); // Close Tui on CTRL+C

```

2. Enable interaction using keyboard and mouse

```ts

import { handleInput, handleKeyboardControls, handleMouseControls } from "https://deno.land/x/tui@$MODULE_VERSION/mod.ts";

...

handleInput(tui);

handleMouseControls(tui);

handleKeyboardControls(tui);

```

3. Add some components

```ts

import { Button } from "https://deno.land/x/tui@$MODULE_VERSION/src/components/mod.ts";

import { Signal, Computed } from "https://deno.land/x/tui@$MODULE_VERSION/mod.ts";

...

// Create signal to make number automatically reactive

const number = new Signal(0);

const button = new Button({

  parent: tui,

  zIndex: 0,

  label: {

    text: new Computed(() => number.value.toString()), // cast number to string

  },

  theme: {

    base: crayon.bgRed,

    focused: crayon.bgLightRed,

    active: crayon.bgYellow,

  },

  rectangle: {

    column: 1,

    row: 1,

    height: 5,

    width: 10,

  },

});

  // If button is active (pressed) make number bigger by one

button.state.when("active", (state) => {

  ++number.value;

});

// Listen to mousePress event

button.on("mousePress", ({ drag, movementX, movementY }) => {

  if (!drag) return;

  // Use peek() to get signal's value when it happens outside of Signal/Computed/Effect

  const rectangle = button.rectangle.peek();

  // Move button by how much mouse has moved while dragging it

  rectangle.column += movementX;

  rectangle.row += movementY;

});

```

4. Run Tui

```ts

...

tui.run();

```

## 🤝 Contributing

**Tui** is open for any contributions.


 If you feel like you can enhance this project - please open an issue and/or pull request.


 Code should be well document and easy to follow what's going on.

This project follows [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) spec.


 If your pull request's code can be hard to understand, please add comments to it.

## 📝 Licensing

This project is available under **MIT** License conditions.