[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-74993":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":29,"readmeContent":30,"aiSummary":31,"trendingCount":16,"starSnapshotCount":16,"syncStatus":32,"lastSyncTime":33,"discoverSource":34},74993,"tui-studio","jalonsogo\u002Ftui-studio","jalonsogo","Visual design tool for building Terminal User Interfaces","",null,"TypeScript",1413,55,6,4,0,9,19,140,27,18.24,"MIT License",false,"main",true,[27,28],"tui","tui-application","2026-06-12 02:03:31","\u003Cimg src=\"public\u002Flogo-tui-studio_light.svg\" alt=\"TUIStudio\" width=\"64\" \u002F>\n\n# TUIStudio\n\n**Visual design tool for building Terminal User Interfaces**\n\n![Status](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fstatus-alpha-orange)\n\nA 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.\n\u003Cimg width=\"400\" height=\"400\" alt=\"Computer\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F89fc6a4f-7034-49e3-9729-5355c276842f\" \u002F>\n\n\n## Features\n\n- **Visual Canvas** — Drag-and-drop components with live ANSI preview at configurable zoom levels\n- **20+ TUI Components** — Screen, Box, Button, TextInput, Checkbox, Radio, Select, Toggle, Text, Spinner, ProgressBar, Table, List, Tree, Menu, Tabs, Breadcrumb, Modal, Popover, Tooltip, Spacer\n- **Layout Engine** — Absolute, Flexbox, and Grid layout modes with full property control\n- **Color Themes** — Dracula, Nord, Solarized Dark\u002FLight, Monokai, Gruvbox, Tokyo Night, Nightfox, Sonokai — all updating the canvas in real-time\n- **Dark \u002F Light Mode** — Toggle between dark and light editor UI; persists across sessions\n- **Layers Panel** — Hierarchical component tree with drag-to-reorder, visibility toggle, lock, and inline rename\n- **Property Panel** — Edit layout, style, and component-specific props for the selected component\n- **Undo \u002F Redo** — Full history for all tree mutations\n- **Save \u002F Load** — `.tui` JSON format via native OS file picker (Chrome\u002FEdge) or browser download (Firefox\u002FSafari)\n- **Multi-Framework Export** — Generate code for Ink, BubbleTea, Blessed, Textual, OpenTUI, Tview\n- **Command Palette** — `Cmd\u002FCtrl+P` for quick component creation, theme switching, and dark\u002Flight mode toggle\n- **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\n- **Settings** — Accent color presets, dark\u002Flight mode toggle, and default download folder\n\n\n## Star History\n\n\u003Ca href=\"https:\u002F\u002Fwww.star-history.com\u002F?repos=jalonsogo%2Ftui-studio&type=date&legend=top-left\">\n \u003Cpicture>\n   \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"https:\u002F\u002Fapi.star-history.com\u002Fchart?repos=jalonsogo\u002Ftui-studio&type=date&theme=dark&legend=top-left\" \u002F>\n   \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"https:\u002F\u002Fapi.star-history.com\u002Fchart?repos=jalonsogo\u002Ftui-studio&type=date&legend=top-left\" \u002F>\n   \u003Cimg alt=\"Star History Chart\" src=\"https:\u002F\u002Fapi.star-history.com\u002Fchart?repos=jalonsogo\u002Ftui-studio&type=date&legend=top-left\" \u002F>\n \u003C\u002Fpicture>\n\u003C\u002Fa>\n\n## Quick Start\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fjalonsogo\u002Ftui-studio.git\ncd tui-studio\nnpm install\nnpm run dev\n```\n\nOpen `http:\u002F\u002Flocalhost:5173`.\n\n## Keyboard Shortcuts\n\n| Action          | Shortcut                          |\n| --------------- | --------------------------------- |\n| Command Palette | `Cmd\u002FCtrl+P`                      |\n| Save            | `Cmd\u002FCtrl+S`                      |\n| Open            | `Cmd\u002FCtrl+O`                      |\n| Export          | `Cmd\u002FCtrl+E`                      |\n| Copy            | `Cmd\u002FCtrl+C`                      |\n| Paste           | `Cmd\u002FCtrl+V`                      |\n| Delete          | `Backspace` \u002F `Delete`            |\n| Undo            | `Cmd\u002FCtrl+Z`                      |\n| Redo            | `Cmd\u002FCtrl+Shift+Z` \u002F `Cmd\u002FCtrl+Y` |\n\n**Component hotkeys** (when not typing):\n\n| Key | Component | Key | Component   |\n| --- | --------- | --- | ----------- |\n| `b` | Button    | `t` | Tabs        |\n| `r` | Box       | `l` | List        |\n| `k` | Checkbox  | `e` | Tree        |\n| `a` | Radio     | `m` | Menu        |\n| `s` | Select    | `i` | TextInput   |\n| `o` | Toggle    | `p` | ProgressBar |\n| `n` | Spinner   | `y` | Text        |\n| `j` | Spacer    |     |             |\n\n## File Format\n\nProjects are saved as `.tui` files (JSON):\n\n```json\n{\n  \"version\": \"1\",\n  \"meta\": { \"name\": \"My Screen\", \"theme\": \"dracula\", \"savedAt\": \"...\" },\n  \"tree\": { ... }\n}\n```\n\n## Export Frameworks\n\n| Framework                                               | Language           |\n| ------------------------------------------------------- | ------------------ |\n| [Ink](https:\u002F\u002Fgithub.com\u002Fvadimdemedes\u002Fink)              | TypeScript \u002F React |\n| [BubbleTea](https:\u002F\u002Fgithub.com\u002Fcharmbracelet\u002Fbubbletea) | Go                 |\n| [Blessed](https:\u002F\u002Fgithub.com\u002Fchjj\u002Fblessed)              | JavaScript         |\n| [Textual](https:\u002F\u002Fgithub.com\u002FTextualize\u002Ftextual)        | Python             |\n| [OpenTUI](https:\u002F\u002Fopentui.js.org\u002F)                      | TypeScript         |\n| [Tview](https:\u002F\u002Fgithub.com\u002Frivo\u002Ftview)                  | Go                 |\n\n## Tech Stack\n\n- **React 19**, TypeScript 5.8, Vite 7\n- **Zustand 5** — state management\n- **Tailwind CSS** — editor UI styling\n- **Lucide React** — icons\n\n## Commands\n\n```bash\nnpm run dev      # Start dev server\nnpm run build    # TypeScript compile + production build\nnpm run lint     # ESLint\nnpm run preview  # Preview production build\n```\n\n---\n\n**Issues**: [GitHub Issues](https:\u002F\u002Fgithub.com\u002Fjalonsogo\u002Ftui-studio\u002Fissues)\n\n## LOLcense\n\nFor {root} sake I'm a designer. Mostly all the code has been written by Claude and ad latere.\n","TUIStudio 是一个用于构建终端用户界面的可视化设计工具。它提供了拖放组件、实时ANSI预览、多种布局模式以及20多个TUI组件等功能，支持绝对定位、Flexbox和Grid布局，并且可以导出到Ink、BubbleTea等多个TUI框架。此外，TUIStudio还具备颜色主题切换、暗黑\u002F亮色模式、层次化组件树等特性，以增强开发体验。该工具非常适合需要创建美观且功能丰富的命令行界面的应用场景，如系统管理工具、数据展示平台或任何希望在终端环境中提供良好用户体验的项目。",2,"2026-06-11 03:51:52","high_star"]