TUIStudio

Visual design tool for building Terminal User Interfaces

A Figma-like visual editor for designing Terminal UI applications. Drag-and-drop components onto a live canvas, edit properties visually, and export to multiple TUI frameworks. Computer

Features

Visual Canvas — Drag-and-drop components with live ANSI preview at configurable zoom levels
20+ TUI Components — Screen, Box, Button, TextInput, Checkbox, Radio, Select, Toggle, Text, Spinner, ProgressBar, Table, List, Tree, Menu, Tabs, Breadcrumb, Modal, Popover, Tooltip, Spacer
Layout Engine — Absolute, Flexbox, and Grid layout modes with full property control
Color Themes — Dracula, Nord, Solarized Dark/Light, Monokai, Gruvbox, Tokyo Night, Nightfox, Sonokai — all updating the canvas in real-time
Dark / Light Mode — Toggle between dark and light editor UI; persists across sessions
Layers Panel — Hierarchical component tree with drag-to-reorder, visibility toggle, lock, and inline rename
Property Panel — Edit layout, style, and component-specific props for the selected component
Undo / Redo — Full history for all tree mutations
Save / Load — .tui JSON format via native OS file picker (Chrome/Edge) or browser download (Firefox/Safari)
Multi-Framework Export — Generate code for Ink, BubbleTea, Blessed, Textual, OpenTUI, Tview
Command Palette — Cmd/Ctrl+P for quick component creation, theme switching, and dark/light mode toggle
Gradient Backgrounds — Add linear gradients to any element background with angle control and N color stops; rendered as discrete character-cell bands matching real ANSI terminal output
Settings — Accent color presets, dark/light mode toggle, and default download folder

Star History

Quick Start

git clone https://github.com/jalonsogo/tui-studio.git
cd tui-studio
npm install
npm run dev

Open http://localhost:5173.

Keyboard Shortcuts

Action	Shortcut
Command Palette	`Cmd/Ctrl+P`
Save	`Cmd/Ctrl+S`
Open	`Cmd/Ctrl+O`
Export	`Cmd/Ctrl+E`
Copy	`Cmd/Ctrl+C`
Paste	`Cmd/Ctrl+V`
Delete	`Backspace` / `Delete`
Undo	`Cmd/Ctrl+Z`
Redo	`Cmd/Ctrl+Shift+Z` / `Cmd/Ctrl+Y`

Component hotkeys (when not typing):

Key	Component	Key	Component
`b`	Button	`t`	Tabs
`r`	Box	`l`	List
`k`	Checkbox	`e`	Tree
`a`	Radio	`m`	Menu
`s`	Select	`i`	TextInput
`o`	Toggle	`p`	ProgressBar
`n`	Spinner	`y`	Text
`j`	Spacer

File Format

Projects are saved as .tui files (JSON):

{
  "version": "1",
  "meta": { "name": "My Screen", "theme": "dracula", "savedAt": "..." },
  "tree": { ... }
}

Export Frameworks

Framework	Language
Ink	TypeScript / React
BubbleTea	Go
Blessed	JavaScript
Textual	Python
OpenTUI	TypeScript
Tview	Go

Tech Stack

React 19, TypeScript 5.8, Vite 7
Zustand 5 — state management
Tailwind CSS — editor UI styling
Lucide React — icons

Commands

npm run dev      # Start dev server
npm run build    # TypeScript compile + production build
npm run lint     # ESLint
npm run preview  # Preview production build

Issues: GitHub Issues

LOLcense

For {root} sake I'm a designer. Mostly all the code has been written by Claude and ad latere.