Design For The

The visual IDE and AI Architect for modern engineering. Build, theme, and bind logic to CLI apps without the grid-math headaches.

>npx tomcs init

>npx tomcs designer

Commands

initInitialize project

addAdd component

designerLaunch Visual Editor

helpShow help

~/install-dependencies.sh

npm install ink react react-dom ink-gradient ink-big-text sharp groq-sdk dotenv tsx import-jsx figlet --save

npm install -D @types/react @types/node @types/figlet typescript --save-dev

System Capabilities

Core Modules

Tomcs provides a complete toolchain for building high-fidelity terminal interfaces. /usr/bin/tomcs_core

Live Sync

Live Sync Protocol

Bidirectional design bridge. Canvas manipulations write directly to src/app.tsx in real-time, eliminating the design-code gap.

ID: 01

Performance: esbuild

AI Porter

AI Architect

Turns text prompts into layouts. Paste web code or just describe what you want, and the AI builds the terminal grid for you.

ID: 02

Performance: Groq AI

Logic Bind

Logic Engine

Connect UI elements to live bash streams. Bind badges to 'uptime', tables to 'ps aux'.

ID: 03

Performance: child_process.spawn

Pixel Matrix

Converts images into text and texts into Banners. upload a PNG or JPG, and it transforms into high-quality ASCII art for your terminal.

ID: 04

Performance: figlet

Start Building
in Minutes.

Get from zero to a full visual designer environment with just a few commands.

Prerequisites:

Node.js 18+ (Required for Ink)
Groq API Key (for Neural Architect, it's free)
NPM or PNPM Package Manager

01. Initialize tomcs

Initialize a new tomcs project and configuration.

npx tomcs init

02. Install Dependencies

Install required packages for the Ink environment.

npm install ink react react-dom ink-gradient ink-big-text sharp groq-sdk dotenv tsx import-jsx figlet --save && npm install -D @types/react @types/node @types/figlet typescript --save-dev

03. Launch the Designer

Start the visual interface overlay in your terminal.

npx tomcs designer

04. Start Live Preview

Open a second terminal window to watch your compiled app concurrently.

npx tsx watch src/app.tsx

The Designer Manual

Master the controls. Tomcs is styled like a professional design tool, adapted for the constraints of the terminal.

Interface Overview

Canvas & Fluid Viewport

The central infinite drawing area maps 100x30 virtual coordinates to your actual terminal size. It handles the math to ensure your TUI looks consistent on any display.

Toolbar & Layers

Quick access primitives at the top. Select components using the Layers panel on the left, or use keys [1-9] to fast-select.

Controls & Shortcuts

Key	Action	Description
[A]	Registry	Opens the Component Library popup.
[P]	AI Porter	Natural language layout generation.
[K]	Logic Bind	Connect elements to bash commands (e.g. date).
[E]	Export	Dumps current layout as raw React code.
[Del]	Remove	Deletes the currently selected component.

Component Registry

Everything you need to build rich Terminal User Interfaces.

Rectangle

A bordered box for grouping layout elements

Line

A horizontal separator

Text

Simple, editable text strings

Image

Container that renders ASCII art

Banner

Large, decorative header text

Shell

The root application frame

Card

Content container with title bar

Button

A pressable element

Badge

Status indicators (Online, Error)

List

Vertical list of items

Tabs

Horizontal navigation bar

Icon

Vector-like symbols

Spinner

Animated loader for active processes