Perfboard Designer

A web-based perfboard designer for quick circuit layout planning. Design circuits on a virtual perfboard, place components, draw wire connections, and export your designs.

Features

• Component Library: Resistors, capacitors, LEDs, ICs (DIP-8/14/16/20/28), connectors, and more
• Interactive Tools: Select, place, wire, and delete tools with keyboard shortcuts
• Drawing Wires: Multi-point wire routing with color selection
• Customizable Board Size: Create new boards with custom dimensions (10-200 columns/rows)
• Undo/Redo: Full history support with Ctrl+Z/Ctrl+Y
• Pan & Zoom: Navigate large boards easily with mouse controls
• Save/Load: Auto-save to localStorage + JSON file export/import
• PNG Export: Export your design as a high-quality image
• Properties Panel: Edit component labels, values, and rotation

Getting Started

Running the Application

The application requires a local HTTP server (ES modules don't work with file:// protocol).

Option 1: Python

python3 -m http.server 8000

Option 2: Node.js

npx http-server -p 8000

Then open your browser to: http://localhost:8000

Keyboard Shortcuts

Tools:

• S - Select tool
• P - Place tool
• W - Wire tool
• D - Delete tool

Actions:

• R - Rotate selected component or preview
• Delete/Backspace - Delete selected item
• Escape - Cancel current operation / clear selection
• Ctrl+Z - Undo
• Ctrl+Shift+Z or Ctrl+Y - Redo
• Ctrl+S - Save to file
• Ctrl+E - Export to PNG

Navigation:

• Right mouse drag, Middle mouse drag, or Shift+Left mouse drag - Pan view
• Mouse wheel - Zoom in/out

Using the Tools

Select Tool (S):

• Click to select components or wires
• Drag selected components to move them
• Drag wire points to reposition them (when wire is selected)
• Edit properties in the right sidebar
• Press R to rotate selected component
• Press Delete/Backspace to remove selected item

Place Tool (P):

• Click a component in the library sidebar to activate place mode
• Move mouse to preview placement
• Press R to rotate before placing
• Click to place the component
• Press Escape to cancel

Wire Tool (W):

• Click to start a wire at a hole
• Click additional holes to add points
• Click the same hole twice, click the starting hole, or press Enter to finish
• Press Backspace to remove last point
• Press Escape to cancel
• Select wire color from the status bar dropdown

Delete Tool (D):

• Click on components or wires to delete them
• Press Escape to return to select tool

Board Size

Default: 60 columns × 40 rows

When creating a new board (File → New), you can specify custom dimensions:

• Minimum: 10 × 10
• Maximum: 200 × 200
• Saved designs remember their custom size

File Format

Designs are saved as .perfboard.json files with the following structure:

{
  "version": 1,
  "cols": 60,
  "rows": 40,
  "name": "My Design",
  "components": [...],
  "wires": [...]
}

Browser Compatibility

Requires a modern browser with ES6 module support:

• Chrome/Edge 61+
• Firefox 60+
• Safari 11+

Project Structure

perfboard-designer/
├── index.html              # Main HTML page
├── css/
│   └── style.css          # Application styles
└── js/
    ├── app.js             # Application entry point
    ├── model/             # Data models
    │   ├── board.js
    │   ├── component.js
    │   ├── wire.js
    │   └── history.js
    ├── view/              # Rendering
    │   ├── renderer.js
    │   └── camera.js
    ├── controller/        # User interaction
    │   ├── toolManager.js
    │   └── tools/
    │       ├── selectTool.js
    │       ├── placeTool.js
    │       ├── wireTool.js
    │       └── deleteTool.js
    ├── components/        # Component library
    │   ├── library.js
    │   └── definitions.js
    ├── io/                # File operations
    │   ├── storage.js
    │   └── export.js
    └── ui/                # UI components
        ├── toolbar.js
        ├── sidebar.js
        └── statusBar.js

License

MIT License - feel free to use and modify!