I Built a Vanilla JS Schematic Editor With Intelligent Manhattan Routing and Wire Tracing

TLDR

Most web-based drawing tools are either too generic or too heavy. We wanted a high-performance vector canvas specifically built for engineering diagrams, electrical schematics, software architecture, and floorplans, that felt fast, fluid, and domain-aware. We open-sourced Schema Editor: a zero-dependency, Vanilla JS + SVG canvas featuring intelligent orthogonal routing and instant net connectivity tracing.

Engine Aspect	Generic Canvas Tools	Schema Editor Architecture
Dependencies	Heavy framework bundles (React/Vue/Canvas wrappers)	Zero dependencies (Pure Vanilla JS + SVG)
Wire Routing	Free-form diagonal paths	Intelligent Manhattan (Orthogonal) Routing
Connectivity Queries	Manual visual inspection	Instant $O(1)$ Union-Find Path Tracing

---

Technical highlights & features

1. Intelligent Manhattan Routing: Wires maintain orthogonal horizontal/vertical paths automatically as components are moved.
2. Interactive Net Tracing: Clicking any wire segment instantly highlights its entire electrical net path across the canvas.
3. Domain-Specific Kits: Built-in symbol libraries for Electrical Schematics, Software UML/ERD, and AEC Floorplans.
4. Zero-Dependency Performance: Direct DOM manipulation maintains fluid 60fps rendering even with thousands of canvas elements.

// Example: Instant Union-Find Net Highlight Query
function highlightNet(clickedWire) {
  const targetNetId = clickedWire.dataset.netId;
  
  // Highlight all connected wires in the same net
  document.querySelectorAll([data-net-id="${targetNetId}"])
    .forEach(el => el.classList.add('net-highlighted'));
}

Check out the open-source repository on GitHub: github.com/carnworkstudios/schema-editor

Rule of thumb: Building domain-specific visual editors on raw Vanilla JS and SVG DOM provides desktop-class performance without framework overhead.