How I Made a Canvas JSON Viewer Fast with Viewport Virtualization

When you build a visual tool for structured data, everything feels instantaneous on toy examples. A 20-line JSON payload renders crisply into an interactive graph with clean nodes, collapsible trees, and smooth connectors. Then you drop in a real-world file: a 15 MB API response containing nested objects, deep arrays, and hundreds of thousands of key-value pairs. Suddenly, the browser locks up. The DOM or Canvas scene graph explodes with tens of thousands of objects. Panning drops from 60 fps to single digits, and zooming triggers multi-second layout thrashing. Here is how I tackled this problem when building the graph visualizer for Treease by separating semantic completeness from visual materialization . The Core Dilemma: Completeness vs. Canvas Weight The naive mental model for a canvas or SVG graph is 1:1 mapping: for every node in the data, instantiate a renderable object in the scene. [Full JSON AST] -> [Canvas Scene Graph / DOM Nodes] This model breaks down quickly because: Scene Graph Bloat: The cost of hit-testing, layout calculations, and paint passes scales linearly with document size, even when most content is offscreen. Memory Overhead: Holding thousands of active visual display objects consumes hundreds of megabytes of RAM. The intuitive workaround is aggressive lazy loading, for example parsing only what is expanded. But that breaks critical user workflows: How do you search across the entire document? How do you jump to a deeply nested path? How do you show global error indicators or relationship highlights? The Architectural Shift The solution was to decouple the data model from the render surface : [ Full Semantic Graph (In-Memory / Fast Lookups) ] | v Viewport Frustum Culling [ Materialized Scene (Only Visible Nodes + Overscan) ] Semantic Completeness: Keep the entire document parsed, indexed, and queryable in memory. Global search, tree navigation, and path queries run against the lightweight in-memory structure. Visual Materialization: Only inst