WireUp

Free, open-source wireframe editor with AI assistance.
Design interfaces visually with drag-and-drop, dynamic connectors, and an AI copilot — right in your browser.

Features • Getting Started • Usage • Tech Stack • Contributing • License

---

✨ Features

🎨 Visual Canvas

• Drag & drop components — Rectangles, circles, triangles, text, buttons, inputs, images, lines, arrows
• Snap-to-grid — Optional grid alignment with configurable grid size
• Dot grid background — Clean visual reference, toggleable in settings
• Zoom & pan — Ctrl+Wheel to zoom, Wheel to scroll vertically, Shift+Wheel to scroll horizontally
• Marquee selection — Click and drag to select multiple elements with a visual dashed rectangle

🔗 Dynamic Connectors

• Connect elements — Draw orthogonal, straight, or curved connectors between any two elements
• Anchor points — Top, right, bottom, left anchor points on each element
• Smart arrowheads — Arrows render outside the target element pointing in the correct direction
• Select & delete — Click on connectors to select and remove them

👥 Grouping

• Group elements — Select multiple elements and press Ctrl+G to group
• Move together — Grouped elements move as a single unit
• Ungroup — Ctrl+Shift+G to restore individual element control

🧩 Properties Panel

• Full property editing — Name, position, size, rotation, fill, stroke, corners, text, font, opacity
• Color pickers — Native color pickers with hex input for fill and stroke
• Stroke styles — Solid, dashed, dotted, dash-dot border styles
• Border radius — Adjustable corner radius slider
• Layer ordering — Bring to front, forward, backward, send to back
• Type-aware — Only shows relevant fields per element type

🤖 AI Assistant

• OpenAI integration — Chat-based AI copilot in the right sidebar
• Natural language — Create, update, and delete elements through conversation
• Workflow generation — Say "Create a workflow: Start → Load → Parse → Display" and get connected elements automatically
• Smart composition — Generate complete UI mockups from descriptions

🔍 JSON Inspector

• Monaco Editor — Full JSON view of the wireframe document
• Bidirectional editing — Edit JSON to update the canvas, or edit the canvas to update JSON
• Live sync — Inspector stays in sync even when collapsed

---

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm (comes with Node.js)

Installation

# Clone the repository
git clone https://github.com/YOUR_USERNAME/wireup.git
cd wireup

# Install dependencies
npm install

# Start the development server
npm run dev

The app will be available at http://localhost:3000.

Build for Production

npm run build
npm run preview

---

🎯 Usage

Drawing Elements

1. Select a tool from the left toolbar (Rectangle, Circle, Triangle, etc.)
2. Click on the canvas to place the element, or drag from the toolbar to drop
3. Use the Select tool to move, resize, and edit elements

Connecting Elements

1. Select the Connector tool
2. Hover over an element to see anchor points (top, right, bottom, left)
3. Click an anchor on the source element, then click an anchor on the target element

Using the AI Assistant

1. Paste your OpenAI API key in the right sidebar
2. Type natural language commands:
   • "Create a login form with email, password, and submit button"
   • "Create a workflow: Start → Process → Validate → Complete"
   • "Change the color of the header to blue"

Keyboard Shortcuts

Shortcut	Action
Delete / Backspace	Delete selected elements
Ctrl+G	Group selected elements
Ctrl+Shift+G	Ungroup selected elements
Ctrl+A	Select all elements
Ctrl+C / Ctrl+V	Copy / Paste elements
Ctrl+Wheel	Zoom in/out
Wheel	Scroll vertically
Shift+Wheel	Scroll horizontally
Space+Drag	Pan the canvas
?	Show keyboard shortcuts

---

🛠 Tech Stack

Layer	Technology
Build	Vite
Language	Vanilla JavaScript (ES Modules)
Rendering	HTML5 Canvas with requestAnimationFrame
JSON Editor	Monaco Editor (CDN)
AI	OpenAI Chat Completions API
Styling	CSS with custom design tokens (dark theme)
Typography	Inter via Google Fonts

Architecture

src/
├── core/           # State management, data models, utilities
├── canvas/         # Renderer (Canvas 2D) and interaction handler
├── ai/             # OpenAI client, action executor, chat panel
├── inspector/      # Monaco JSON inspector
├── properties/     # Properties panel controller
└── styles/         # CSS design system

• StateManager — Central state with EventEmitter pattern, all mutations go through it
• CanvasRenderer — Draws elements, connectors, selection handles, grid, and overlays
• InteractionHandler — Mouse/keyboard events, hit testing, drag, resize, marquee, grouping
• ActionExecutor — Translates AI JSON actions into state mutations (supports tempId for batch operations)

---

🤝 Contributing

Contributions are welcome! Feel free to:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

📄 License

This project is licensed under the MIT License — see the LICENSE file for details.

---

📬 Contact

Built by eonio — https://eonio.dev

---

_{Made with ❤️ and AI}