Build1 distinct publisher2 min readPublished
A canvas JSON viewer stopped dying on real files by materializing only what the camera can see. The cost did not vanish: it moved into a spatial index, 4x overscan, and an edge count that is a sample.
The Engineer · Build desk

Compiled by The EngineerSomething wrong?How this is made
The split does not remove work. It relocates it. Under one-renderable-per-data-node, the per-frame bill scales with document size because hit-testing, layout and paint all walk objects that are nowhere near the screen [4]. After the split, the bill on each camera transform is a spatial index query against an expanded rectangle plus a diff that keeps what stayed, creates what entered, and unmounts or recycles what left [13]. That trade only pays if the query and the diff stay cheaper than the objects they replace, and the post describes the index as lightweight without saying what it costs to build or to rebuild when the layout changes [9].
The overscan factor is where the tuning happens. A default of 0.5 pads each side by half the viewport's width and height [11], which doubles both dimensions and makes the materialized region four times the visible area [1]. The reason to pay that is pop-in flashing during fast panning [12]. With thousands of live display objects already measured in hundreds of megabytes under the naive model [5], four times the visible area is a real number, not a rounding error.
Edge sampling is the technique that changes what the user sees rather than how fast they see it. Take the post's own example of a hub with 2,000 children [17] and the cap of 32 [15]: the stride comes out at 63 and 32 curves get drawn, roughly 1.6 percent of the fan-out [2]. Part of the justification is legibility, since thousands of overlapping curves read as an undifferentiated blob anyway [16]. Fair enough. But the canvas is now a sample, and anyone eyeballing fan-out is eyeballing that sample. The full graph stays queryable in memory [9], so the true degree is answerable; whether the interface answers it is a separate design decision the post does not reach.
One asymmetry worth naming. The failure is quantified: panning from 60 fps into single digits [6], which is a frame budget moving from about 17 ms to something over 100 ms [3], plus multi-second thrashing on zoom [7] and a scene graph of tens of thousands of objects [19]. The fix is not quantified. Nothing in the material states a frame rate or a memory figure after virtualization [4]. The post also announces four techniques and the text available covers culling, edge sampling, and the opening of the flat-thousands-of-keys case [18]. Read it as an architecture worth copying, from a developer describing his own tool [2], and not as a benchmark.
Ranked by verification strength, evidence, and original report placement.
Dropping a real 15 MB API response containing nested objects, deep arrays and hundreds of thousands of key-value pairs into the viewer locked up the browser.
The author describes building the graph visualizer for Treease by separating semantic completeness from visual materialization.
The naive mental model for a canvas or SVG graph is a 1:1 mapping: for every node in the data, instantiate a renderable object in the scene.
Under 1:1 mapping, the cost of hit-testing, layout calculations and paint passes scales linearly with document size even when most content is offscreen.
Holding thousands of active visual display objects consumes hundreds of megabytes of RAM.
Panning dropped from 60 fps to single digits on the large payload.
Follow any of these and your For You feed starts watching them — no settings page required.
Evidence-backed comparisons of source perspectives and observed adoption signals. Read the methodology
Which Builder, Operator, and Investor concerns the observed source mix emphasized—not a truth score.
Evidence, demonstrated adoption, hype gap, incentives, and confidence are assessed independently, each on its own current evidence. How these are measured.
Mechanism published, outcome unmeasured
The architectural claims are unusually legible for a blog post: working TypeScript for overscan bounds, the per-transform reconcile loop, stride-based edge sampling and the visible row range are all shown, and the derived figures (4x materialized area, 32 of 2,000 edges) follow directly from the author's own constants. But the evidence stops at design. Every quantity in the piece describes the pre-fix failure, no profile, trace, heap snapshot or after-state frame rate is offered, the spatial index and reconciler are unimplemented interfaces, and there is one self-published source with no independent replication.
No adoption signal supplied
The supplied source discloses no release, version, deployment, download, user count, benchmark run, pricing or licence fact. Treease is named as the tool the author built the visualizer for, but nothing in the material indicates whether the described virtualization is shipped, in what build, or used by anyone beyond the author, so no adoption value can be assigned without inventing facts.
Headline outruns the reported result
The framing 'How I Made a Canvas JSON Viewer Fast' and the narrative arc from lockup to smoothness assert a resolved performance outcome, yet the post supplies numbers only for the broken state and none for the fixed state. The overstatement is moderate rather than severe because the mechanisms are real, standard and legibly published; the gap is that cost was relocated rather than removed, with about four times the visible area materialized, a full in-memory index retained, and a 2,000-edge hub rendered as 32 sampled curves that visually understate the true edge count.
Author promotes own product on self-publishing platform
The piece is written in the first person about the graph visualizer the author built for their own product, Treease, and is published on a platform with no editorial gatekeeping or peer review. That creates a clear interest in the narrative concluding successfully, which aligns with the observed pattern of vivid failure metrics and no verification numbers. The score is moderate rather than high because the author still publishes the concrete constants and code that expose the approach's trade-offs, including the sampling cap that undercuts a purely promotional read.
Mechanism confident, outcome uncertain
Confidence in what the code does is high: the constants, formulas and control flow are quoted verbatim and the derived arithmetic on them is deterministic. Confidence in the story's headline, that the viewer is now fast on real payloads, is low, because it rests on one self-interested source with no after-state measurement, no adoption evidence, and unimplemented dependencies. The blended figure sits below the midpoint to reflect that the durable findings here are structural trade-offs, not a demonstrated performance result.
build
Allow-list the closed set, block-list the open one: 193 thin geo pages, one gate1 distinct publisher
build
A GAN beauty filter is a device budget allocation, not a feature toggle1 distinct publisher
build
Agent memory rots by accumulation, and the missing primitive is a supersession key1 distinct publisher
build
A letter generator with no model call: 200 lines, nine tests, and nothing to hallucinate1 distinct publisher
Distinct publishers with included, body-backed reporting in this cluster.
dev.to
1 article · August 24, 2026