This is why shared embeds load instantly and securely
Building a lightweight read-only rendering engine for shared links and serializing canvas DOM states into clean SVG vectors.
01The need for lightweight, read-only viewing modes
Sharing an architecture diagram with external stakeholders shouldn't require them to load a heavy editing suite, log in, or risk breaking the layout. Exposing editing controls on public sharing links is a security risk. To solve this, we separate the canvas rendering logic into a lightweight viewer. This viewer reads the diagram data from the database and renders the canvas with all editing tools (dragging, sidebars, context menus, toolbars) completely disabled.
02Designing secure and fast sharing routes
We use dedicated sharing and embed routes that load only the essential rendering components. When a user requests a shared link, the server fetches the diagram state from the database, checks if the document is marked as public, and renders the canvas in read-only mode. This ensures fast page loads and prevents unauthorized modifications, making shared links secure and lightweight.
03Serializing canvas DOM states into static SVG vectors
For users who need to download diagrams for slide decks or documentation, we serialize the canvas into a standalone SVG file. The exporter parses the DOM structure of the active canvas, extracts the HTML and CSS styles for each node, and compiles them into a single SVG string. By bundling custom styling rules directly within the SVG, we ensure the downloaded file renders correctly in any browser or design tool.
04Generating high-resolution PNG and PDF assets
Once the SVG string is compiled, we can easily convert it into high-resolution PNG or PDF assets. The SVG is loaded into an in-memory browser instance or HTML5 canvas context, scaled to the desired resolution, and exported as a binary file. This allows users to download sharp, professional vector assets that can be scaled infinitely without losing quality or pixelating.