Building Your First App

Complete tutorial for building a terminal UI application with OpenTUI

This tutorial will guide you through building a complete terminal user interface application with OpenTUI, from setup to deployment.

What We’ll Build

We’ll create a task manager application featuring:

• A list of tasks with selection
• Input field for adding new tasks
• Status bar showing key bindings
• Responsive layout that adapts to terminal size

Prerequisites

Make sure you have Bun installed:

curl -fsSL https://bun.sh/install | bash

Running Your App

Run your task manager:

bun index.ts

Next Steps

Styling and Colors

Learn about RGBA colors and text styling

Keyboard and Mouse

Handle user input with key events and mouse interactions

Animations

Add smooth animations with the Timeline system

Console Overlay

Debug your app with the built-in console

Common Patterns

Saving Data

Persist tasks to a JSON file:

import { writeFileSync, readFileSync } from "fs"

function saveTasks() {
  writeFileSync("tasks.json", JSON.stringify(tasks, null, 2))
}

function loadTasks() {
  try {
    const data = readFileSync("tasks.json", "utf-8")
    return JSON.parse(data)
  } catch {
    return []
  }
}

// Load on start
const tasks = loadTasks()

// Save when tasks change
taskInput.on(InputRenderableEvents.ENTER, (value) => {
  if (value.trim()) {
    tasks.push({ name: value, completed: false })
    saveTasks()
    updateTaskList()
    taskInput.value = ""
  }
})

Handling Resize

Adapt your layout when the terminal is resized:

renderer.on("resize", (width: number, height: number) => {
  console.log(`Terminal resized to ${width}x${height}`)
  // Layout updates automatically via Yoga
})

Adding Colors

Use different colors for task states:

function updateTaskList() {
  taskList.setOptions(
    tasks.map((task) => ({
      name: task.completed 
        ? `✓ ${task.name}` 
        : `○ ${task.name}`,
      description: task.completed ? "Completed" : "Pending",
    }))
  )
  
  // Custom rendering with colors
  taskList.itemColor = (index) => {
    return tasks[index].completed ? "#00FF00" : "#FFFFFF"
  }
}