No Framework, No Problem: Building a High-Performance CAD Engine with Vanilla JS

The modern web is built on frameworks. React, Vue, Svelte—they’ve made building UI easier, but they’ve also made us comfortable with a certain amount of "abstraction tax."

When I started building the Schema Editor, a browser-native tool for electrical and architectural schematics, I hit a wall with that tax almost immediately.

CAD tools are different from standard CRUD apps. You aren't just clicking buttons; you're manipulating thousands of SVG elements, running real-time pathfinding algorithms, and handling complex coordinate transformations (Tilt, Yaw, Perspective) all at once.

The Bottleneck of Re-rendering

In a framework-based app, state changes trigger a re-render. If I move a component in a diagram, I have to update its position, recalculate all its connected "Manhattan" wires, and re-draw the selection handles.

Doing this through a virtual DOM or a reactive dependency graph adds milliseconds of latency per frame. On a complex diagram, that’s the difference between 60fps and a stuttering mess.

The Solution: Direct DOM & Specialized Kernels

I decided to build the engine with Zero Dependencies. Just pure Vanilla JS and the SVG DOM.

1. Direct Manipulation: Instead of waiting for a framework to batch updates, we update SVG attributes (x, y, d) directly in the mousemove handler.
2. Spatial Indexing: To handle "hit detection" (knowing which wire you're clicking), we don't iterate through every element. We use a custom KD-Tree spatial index that allows us to query the canvas in O(log n) time.
3. Geometry Pipeline: We built a 4-phase geometry pipeline that handles everything from coordinate snapping to 3D perspective transformations before the data even touches the DOM.

The Result

The result is an editor that feels like a native desktop application. It’s light (under 100KB gzipped), starts instantly, and works perfectly on mobile browsers where CPU resources are limited.

It also makes the code incredibly approachable for contributors. You don’t need to learn a specific framework’s lifecycle or build system to add a new symbol to our Electrical, Software, or Construction kits. You just need to know JavaScript.

Join the Project

Schema Editor is free and open source. We're building a tool that respects the performance requirements of engineering while embracing the accessibility of the web.

Check out the code and the live demo here: github.com/carnworkstudios/schema-editor