Building a Fast Web-Based KiCad Schema Viewer Sharing hardware designs often requires desktop software or clunky PDF exports. A web-based viewer solves this problem. It allows users to view KiCad schematics directly in their browsers. This guide covers the steps to build a fast, client-side KiCad schema viewer using modern web technologies. Understanding the KiCad File Format
KiCad v6 and newer versions use an S-expression format for schematic files (.kicad_sch). S-expressions use nested parentheses to structure data. A typical KiCad schematic file includes sections for: Paper size and layout sheets. Global properties like titles and dates.
Component instances with their coordinates, rotations, and values. Wires, buses, and labels connecting the components. Graphic elements like lines, text, and shapes.
Because this format is plain text, browsers can parse it directly without backend processing. Choosing the Tech Stack
To ensure maximum speed, the entire parsing and rendering process should happen on the client side.
[ .kicad_sch File ] ──> [ JavaScript Parser ] ──> [ Canvas / SVG Render ]
Parser: JavaScript or TypeScript using a parser generator like PEG.js, or a custom string tokenizer optimized for S-expressions.
Rendering Engine: HTML5 Canvas or SVG. Canvas is better for massive schematics due to superior rendering performance, while SVG offers easier styling and DOM interaction.
Interactivity Library: Paper.js, PixiJS, or vanilla Canvas wrapper for pan and zoom functionality. Step 1: Parsing S-Expressions in JavaScript
The first step is converting the raw text of a .kicad_sch file into a structured JavaScript object.
A simple recursive descent parser can convert parentheses into nested arrays: javascript
function parseSExpression(text) { const tokens = text.match(/(|)|“[^”]*“|[^\s()]+/g); const root = []; const stack = [root]; for (let token of tokens) { if (token === ‘(’) { const newDoc = []; stack[stack.length - 1].push(newDoc); stack.push(newDoc); } else if (token === ‘)’) { stack.pop(); } else { // Remove quotes from string tokens const cleanToken = token.startsWith(‘”’) ? token.slice(1, -1) : token; stack[stack.length - 1].push(cleanToken); } } return root[0]; } Use code with caution. Step 2: Mapping Coordinates and Symbols
KiCad uses its own coordinate system and internal units (usually millimeters or mils). You must map these coordinates to screen pixels.
Extract Components: Look for elements tagged with symbol. Extract their library IDs, placement coordinates (at), and unit rotations.
Extract Wires: Look for wire nodes. Read the pts (points) array containing the start and end coordinates of the circuit connections.
Load Symbol Libraries: Schematics rely on symbol library files (.kicad_sym) to draw actual components (like resistors or microcontrollers). Your viewer must fetch and parse these libraries to extract graphic shapes, pins, and lines for each component symbol. Step 3: Efficient Rendering
To keep the UI responsive during pan and zoom actions, optimize your rendering loop.
Bounding Boxes: Calculate the bounding box of the entire schematic to set the initial zoom level.
Grid System: KiCad designs align to a grid. Implement a subtle background grid overlay to mimic the desktop software experience.
View Culling: If using HTML5 Canvas, do not render components that fall outside the current browser viewport. This drastically cuts down draw times on large multi-sheet projects. Step 4: Adding Interactivity
A static image is not enough. A usable viewer needs interactive features:
Pan and Zoom: Capture mouse drag and scroll wheel events to update the transformation matrix of your canvas.
Component Inspection: Allow users to click on a component to view its properties, parameters, and datasheet links in a sidebar.
Net Highlighting: Clicking a wire should trace and highlight all connected wires and pins (the entire electrical net) for easy debugging. Conclusion
Building a client-side KiCad schema viewer makes hardware collaboration seamless. By parsing S-expressions directly in the browser and rendering them via Canvas or SVG, you achieve desktop-class performance without server overhead. To help you get started on your implementation, tell me: Do you prefer using HTML5 Canvas or SVG for the graphics?
Will your viewer need to support multi-sheet schematics or just single pages?
Leave a Reply