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 — .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

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

Open http://localhost:5173.

Component hotkeys (when not typing):

Projects are saved as .tui files (JSON):

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

• 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 build

Issues: GitHub Issues

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