Design perfboard and stripboard layouts, check the wiring and get a link to open them in the editor.
Perfboard Designer is a free, open-source perfboard layout tool and stripboard (Veroboard) planner that runs in your web browser. Lay out resistors, capacitors, LEDs, transistors, MOSFETs, potentiometers, header pins and ICs (NE555, ATmega328P, Arduino Nano or your own custom chip) on a protoboard hole grid. Draw jumper wires the way you'll solder them, cut stripboard tracks where you need a break, and see the finished board in 3D. You catch mistakes on screen instead of at the soldering iron.
There's nothing to install, no account, and nothing is uploaded: your designs stay on your own device.
▶ Try it now: perfboarddesigner.com/app · 📖 User guide · 🤖 Design boards with AI
4.7k, get yellow-violet-red), ceramic and electrolytic capacitors, inductors, diodes,
colored LEDs, transistors, MOSFETs, potentiometers and header pins.R1 10k).+9V, GND or TP1 so the layout still makes sense
months later.Switch any layout between Perfboard and Stripboard with one click. On a stripboard the copper strips run along every row (or every column), so parts on the same strip are already connected. Use the Cut tool to break a strip at a hole, for example under a DIP chip so its two rows of pins don't short. Click a cut again to mend it.
One click on 3D View turns the layout into a 3D model of the finished board: resistors with their color bands, ICs with labeled pins, LEDs, capacitors, transistors, pots, headers and every jumper wire, on a perfboard or stripboard sized to match yours.
Component variants use the board's 2.54 mm hole grid. Check the component footprint notes for package details, pin labels, and parts whose leads must be formed to fit the grid. The models are layout previews, not manufacturing drawings. To explore the expanded catalog in 2D and 3D, import one of the component galleries: connectors, batteries, switches, displays and LEDs, passives and sensors and DIP chips. They show parts, not working circuits.
R and draw wires between pins with the Wire Tool (W).| Action | Shortcut / gesture |
|---|---|
| Toggle the wire tool | W |
| Rotate the selected chip or part | R |
| Add a note to the selected hole | D |
| Remove a hole's note | Shift + D |
| Change the selected hole's color | C |
| Delete the selected part or wire | Delete |
| Undo / redo | Ctrl + Z / Ctrl + Y |
| Deselect, or step back out of a tool | Esc |
| Fullscreen | F |
| Download the board as an image | P |
| Zoom (20% to 300%, around the cursor) | Mouse wheel, or the 🔍 buttons |
| Pan | Left-drag empty space, Space + drag, or middle-mouse drag |
| Rotate, recolor, add a note, set a value or delete | Right-click |
Yes. It's completely free and open source, with no account, ads or limits.
No. It runs in any modern web browser, and works best on a desktop or laptop with a mouse.
On your own device. Your projects are saved in this browser automatically as you edit: open,
rename, duplicate or delete them from File → Open Project. Save Project to File downloads a
project file you can import again or share, and Share makes a link with the board inside
the link itself. Nothing is uploaded to a server, unless you ask Share for a short link: then
a copy of that board is stored at projects.perfboarddesigner.com so the short link can open
it, and deleted after a year unopened.
Yes. Switch the board to Stripboard and copper strips run along every row or column. Use the Cut tool to cut a strip at any hole; the cuts are saved with your project and shown on the copper side of the 3D view.
Yes. The custom IC editor lets you set the size and label every pin, and you can edit a custom chip again after creating it.
It checks the wiring, not the circuit. The Nets panel shows which pins are connected to which, and points out pins left unconnected and wires that connect nothing, so you can compare the board with your schematic. It doesn't simulate how the circuit behaves.
Yes: the user guide walks through every tool, panel and shortcut. It's also under Help in the editor.
You need Node.js 16 or newer.
git clone https://github.com/MaurerKrisztian/perfboard-designer.git
cd perfboard-designer
npm install
npm run start
Then open http://localhost:3000/app/ for the editor (http://localhost:3000/ is the landing page).
| Command | What it does |
|---|---|
npm run start | Dev server with hot reload |
npm run build | Type-check and build the site into dist/ |
npm run serve | Preview the production build |
npm run lint | Lint src/ with ESLint |
It's built with vanilla TypeScript and the HTML5 Canvas API, with no UI framework. Vite bundles it, and three.js powers the 3D view (it's lazy-loaded, so the editor itself stays small).
Projects are saved as plain, readable JSON (format version 3): the board type and size, strip
cuts, wires, and every part with its reference designator, all as [column, row] grid positions
rather than pixels. Files from older versions still open. The format is documented field by field
in src/project-file/project-file.ts, and the
examples/ folder has sample projects to open with File → Import Project from File.
Share links carry the same file, and can be made by other programs (an AI agent designing a board,
say): see docs/share-links.md.
Describe a circuit to your AI assistant and get back a board that opens in the editor. The
mcp/ folder is an MCP server that lets Claude,
ChatGPT, Cursor, VS Code and other AI assistants design boards. It's free and needs no account.
What the assistant can do with it:
Use the hosted server: add this address to your assistant as a remote MCP server (connector), with no authentication:
https://mcp.perfboarddesigner.com/mcp
Or run it on your own computer from npm
(perfboard-designer-mcp, Node.js 22+).
In Claude Code:
claude mcp add --scope user perfboard -- npx -y perfboard-designer-mcp
It's also listed in the MCP Registry as
com.perfboarddesigner/mcp. Step-by-step setup for each assistant is on the
MCP server page, and
mcp/README.md covers the tools, settings and hosting your own copy.
Bug reports, ideas and pull requests are welcome:
If Perfboard Designer saved you a desoldering session, a ⭐ on GitHub helps other makers find it.
Distributed under the ISC License.
Source-derived launch command. Check the maintainer’s required arguments and credentials before running:
npx -y perfboard-designer-mcpMerge this template into ~/Library/Application Support/Claude/claude_desktop_config.json. Keep existing servers. Add any arguments, credentials, and permissions required by the maintainer; this template has not been install-tested.
{
"mcpServers": {
"com-perfboarddesigner-mcp": {
"command": "npx",
"args": [
"-y",
"perfboard-designer-mcp"
]
}
}
}Restart Claude Desktop completely for changes to take effect. Confirm the server appears connected in the client’s tool list, then try a read-only example from its documentation.
Claude Desktop setup referenceperfboard-designer-mcpnpmPerfboard Designer works with any MCP-compatible client. Copy the config snippet from the Configuration section above and add it to the file shown for your client, then restart the application.
~/Library/Application Support/Claude/claude_desktop_config.jsonRestart Claude Desktop completely for changes to take effect.~/.cursor/mcp.jsonRestart Cursor for changes to take effect..vscode/mcp.jsonReload VS Code window for changes to take effect.~/.codeium/windsurf/mcp_config.jsonRestart Windsurf for changes to take effect..mcp.jsonSave at the project root, then start Claude Code in that project and review the MCP server approval prompt. Keep real credentials out of shared files.