WiringWorkbench

WiringWorkbench is a visual wiring-planning tool for Arduino and microcontroller projects. It lets you place boards and components on a canvas, connect them at the node level, mark active ports, and export the result as machine-readable mappings or Arduino-friendly scaffolding.

It is not a simulator. There is no electrical analysis, no runtime execution, and no physics model. The goal is to help programmers plan connections clearly and generate useful output from that plan.

If Domain expire use vercel

Website vercel

---

Features

• Visual wiring canvas: Drag boards and sensors from a component library onto a shared canvas.
• Node-to-node wiring: One wire connects one sensor node to one board node. No per-pin cable dragging.
• Tick-based port assignment: Mark active ports with checkboxes directly on the node or in the inspector.
• Mismatch warnings: Wires show a warning badge when sensor and board assignment counts do not line up.
• Inspector workflow: Rename nodes, review active ports, inspect connected devices, and reconfigure board port layouts.
• Custom components: Create your own reusable components with custom port definitions.
• Persistent diagrams: Save diagrams locally in the browser and restore them on reload.
• Shareable URLs: Encode the current diagram into a URL for easy sharing.
• Export options:
  • JSON pin mapping
  • Arduino .ino stub
  • Markdown prompt for AI-assisted Arduino IDE code generation
• Undo / redo: Diagram history is tracked in the app state.
• Dark / light theme: Theme toggle with persistent preference.

---

How It Works

WiringWorkbench uses a simplified planning model:

• A single wire represents a relationship between a sensor/component and a board.
• Ports are assigned by selection, not by dragging separate wires.
• Export mapping is generated by comparing the active sensor ports with the active board ports in definition order.
• When counts do not match, the UI still exports what it can and marks unmatched entries as null.

This keeps the interaction fast and practical for programmers who want a clean connection plan instead of a schematic editor.

---

Built-In Components

Boards

• Arduino Uno
• Arduino Nano
• ESP32
• Raspberry Pi Pico

Components / Sensors

• DHT11
• HC-SR04
• MPU6050
• SSD1306 OLED
• Relay Module
• IR Receiver
• Servo Motor
• NeoPixel Strip
• Soil Moisture Sensor
• MQ-2 Gas Sensor

You can also define your own custom components inside the app.

---

Quick Start

Clone

git clone https://github.com/DraSoGo/WiringWorkbench.git
cd WiringWorkbench

Run Locally

npm install
npm run dev

Then open the Vite dev server URL shown in the terminal.

Build

npm run build

This runs TypeScript build checks and produces a production bundle in dist/.

Preview Production Build

npm run preview

Lint

npm run lint

---

Export Formats

JSON Mapping

Exports a mapping like:

{
  "DHT11.DATA": "ARDUINO_UNO.D3",
  "DHT11.VCC": "ARDUINO_UNO.5V",
  "DHT11.GND": "ARDUINO_UNO.GND1"
}

If a sensor has more active ports than the target board has assigned slots, unmatched entries are exported as null.

Arduino Stub

Generates a starter .ino file with #define values for matched board assignments.

AI Prompt Markdown

Generates a structured Markdown prompt describing:

• selected board(s)
• selected components
• resolved pin mapping
• missing assignments

This is intended to be pasted into an AI coding tool to generate Arduino IDE code more reliably.

Share URL

The full diagram can be encoded into a URL query parameter and copied to the clipboard from the toolbar.

---

Deployment

This app is a static React SPA and can be deployed to any static hosting provider.

The repo includes:

• vercel.json for SPA route rewrites on Vercel

Typical deployment flow:

npm run build

Deploy the contents of dist/.

---

Technical Stack

• React 19
• TypeScript
• Vite
• Zustand for application state
• @xyflow/react for the interactive node/edge canvas
• Tailwind CSS Vite plugin with custom CSS-variable theming

State is split conceptually between:

• Zustand store as the application source of truth
• React Flow as the rendering and interaction layer

---

Project Layout

.
├── README.md                  # project overview
├── LICENSE
├── index.html
├── package.json
├── vercel.json
├── src/
│   ├── main.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── store/diagram.ts
│   ├── lib/
│   │   ├── export.ts
│   │   ├── portMapping.ts
│   │   └── storage.ts
│   ├── data/
│   │   ├── boards.ts
│   │   └── sensors.ts
│   └── components/
│       ├── Toolbar/
│       ├── Library/
│       ├── Canvas/
│       └── Inspector/
└── dist/                      # production build output

---

Development Notes

• This project is intentionally a planner, not a simulator.
• There is currently no automated test suite.
• Type checking is part of npm run build.
• The diagram snapshot is stored in browser localStorage.
• Renaming the localStorage keys will reset saved diagrams/themes for existing users.

---

Support

If WiringWorkbench is useful to you, you can support the project here:

Support Me

---

License

This project is licensed under the GPL-3.0 License. See LICENSE for details.

---

WiringWorkbench — plan the wiring first, write the code second.