Free Browser Electrical Schematic Editor with Auto BOM Generator

TLDR

Drafting quick electrical schematics or reviewing circuit ideas using heavy desktop EDA software like Altium or OrCAD requires long installation times and complex workspace setup. GINEXYS Schema Editor Electrical mode provides a browser canvas with standard electrical symbols, orthogonal Manhattan wire routing, interactive click-to-highlight net tracing, and one-click Bill of Materials (BOM) generation that syncs live to Table Formatter over IPC.

The Search Query: Web Electrical Schematic Editor with BOM

Engineers search for:

• "free browser electrical schematic editor bom generator"
• "online circuit diagram tool with net tracing altium web alternative"
• "schematic capture browser canvas generate bill of materials"

Capturing Electrical Schematics in Browser Canvas

Schema Editor loads an SVG-based interactive canvas backed by spatial hash grid indexing (spatialHashGrid.js) for collision detection.

// Adding electrical symbols to scene graph
import { addSymbol } from '../features/wiringDiagram.js';
const resistor = addSymbol({     type: 'RESISTOR',     x: 100, y: 150,     attributes: { ref: 'R1', value: '10k', footprint: '0805' } });
const icChip = addSymbol({     type: 'IC_8PIN',     x: 250, y: 150,     attributes: { ref: 'U1', partNumber: 'NE555P', footprint: 'DIP-8' } });

Rule of thumb: use spatial hash grid indexing to maintain fast snapping performance when handling schematics with hundreds of component pins.

Interactive Net Tracing with Trace Mode

Activating Trace Mode lets you click any wire segment or component terminal to highlight every connected net trace across the schematic:

// Trace Mode net highlighting logic in wireTracing.js
function highlightConnectedNet(startPinId) {
    const netWireIds = traceNetRecursive(startPinId);
    netWireIds.forEach(wireId => {
        canvas.setElementStyle(wireId, { stroke: '#22c55e', strokeWidth: 3 });
    });
}

Auto-Generating Live BOM and Dispatching over IPC

Clicking Generate BOM parses scene graph component attributes, aggregates part quantities, and dispatches tabular data directly to Table Formatter over OS IPC:

// Exporting schematic BOM to Table Formatter over IPC
import { generateBOM } from '../features/ercEngine.js';
const bom = generateBOM(sceneComponents); window.CwsBridge.offerData(window.CwsContracts.createEnvelope({     contentType: 'tabular-data',     metadata: { source: 'schema-editor', name: 'Circuit BOM' },     hints: { suggestedTarget: 'table_formatter' } }));

Conclusion

Schema Editor brings fast electrical schematic capture, net tracing, and live BOM generation into a zero-install browser interface.