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. 
- 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 —
.tuiJSON 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+Pfor 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
git clone https://github.com/jalonsogo/tui-studio.git cd tui-studio npm install npm run devOpen http://localhost:5173.
| 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 |
Projects are saved as .tui files (JSON):
{ "version": "1", "meta": { "name": "My Screen", "theme": "dracula", "savedAt": "..." }, "tree": { ... } }| Framework | Language |
|---|---|
| Ink | TypeScript / React |
| BubbleTea | Go |
| Blessed | JavaScript |
| Textual | Python |
| OpenTUI | TypeScript |
| Tview | Go |
- React 19, TypeScript 5.8, Vite 7
- Zustand 5 — state management
- Tailwind CSS — editor UI styling
- Lucide React — icons
npm run dev # Start dev server npm run build # TypeScript compile + production build npm run lint # ESLint npm run preview # Preview production buildIssues: GitHub Issues
For {root} sake I'm a designer. Mostly all the code has been written by Claude and ad latere.