Interactive PCB & Schematic Editors

Overview

Two browser-based prototypes: schematic and PCB interaction. I built demonstration versions of schematic and PCB editors for Vectis.ai, a deep-tech electronics company developing AI-assisted hardware-design technology. The objective was to turn structured design outputs into graphical workspaces that engineers could inspect and modify.

What It Delivers

• Two working interface prototypes for schematic and PCB design review.
• Structured engineering data rendered into editable browser canvases.
• JSON-to-interface-to-JSON round-trip interactions.
• A feasible interaction layer for reviewing AI-generated electronics designs.

What I Did

• Developed interactive browser interfaces using React, Next.js and TypeScript.
• Created a schematic canvas showing components, electrical nets, connections, labels and properties.
• Built a PCB-layout view representing board outlines, placement, traces, layers and spatial relationships.
• Implemented selection, drag interactions, zoom, pan, property inspection and controlled editing.
• Parsed structured JSON design records into graphical objects and retained changes in frontend state.
• Implemented save, export and reload workflows to demonstrate round-trip design-data handling.
• Distinguished visual changes from engineering validation, flagging edits that require backend electrical checks.
• Documented the integration points for future simulation, verification and design-generation services.

Why It Matters

These were frontend demonstrations, not full EDA packages or autorouters. The engineering result was proving how complex electronic-design data could be inspected and edited in the browser without losing its structured representation.