Wiretext

Wiretext is a Unicode-first wireframing canvas for building UI mockups and diagrams with box-drawing characters. Design visually, then export clean text for docs, markdown, issues, and PRs.

What's New

• Pencil + Eraser workflow: freehand sketching with Pencil plus cleanup passes with Eraser
• Smart alignment guides and snapping while moving and resizing objects
• Layer grouping workflow (Group/Ungroup) with better ordering controls
• Connector improvements with object anchors and routed connector paths

Core Features

• Drawing tools: Select, Box, Text, Line, Arrow, Connector, Pencil, Eraser
• Drawer mode for fast ideation: sketch organic shapes and refine quickly
• 30+ UI components: input, layout, and display building blocks
• Layer-aware editing: create layers from selection, move items between layers, reorder layers
• Power editing: marquee select, resize handles, undo/redo, copy/cut/paste, duplicate
• Export formats: plain text, Markdown, HTML, and GitHub-ready collapsible snippets
• Share links: compressed URL payloads via lz-string
• Persistent preferences: theme, sidebar state, component visibility, smart guides

Tech Stack

• React 19 + TypeScript
• Vite 7
• Tailwind CSS
• lz-string

Getting Started

Prerequisites

• Node.js 18+
• npm (or your preferred package manager)

Install

npm install

Run locally

npm run dev

Open http://localhost:5173.

Build

npm run build

Preview build

npm run preview

Lint

npm run lint

Keyboard Shortcuts

Key	Action
V	Select tool
B	Box tool
T	Text tool
L	Line tool
A	Arrow tool
C	Connector tool
N	Pencil tool
E	Eraser tool
P	Toggle toolbar collapse
Delete / Backspace	Delete selection
Ctrl/Cmd + Z	Undo
Ctrl/Cmd + Shift + Z	Redo
Ctrl/Cmd + C	Copy
Ctrl/Cmd + X	Cut
Ctrl/Cmd + V	Paste
Ctrl/Cmd + D	Duplicate
Ctrl/Cmd + A	Select all
Ctrl/Cmd + G	Group selection
Ctrl/Cmd + Shift + G	Ungroup to default layer
]	Bring selection forward
[	Send selection backward
Cmd + ]	Bring selection to front
Cmd + [	Send selection to back
Escape	Return to Select tool

Project Structure

src/
├── components/   # Canvas, toolbar, panels, modals
├── hooks/        # useCanvas, useSettings, useKeyboard, useShareUrl
├── types/        # Tool/object/component definitions
├── utils/        # Unicode rendering and canvas math
├── App.tsx
└── main.tsx

License

MIT - see LICENSE.