POE2Builds

Free build guides & gear planner for Path of Exile 2

Web App

Artificial Intelligence

Games

Visit WebsiteSee on Product Hunt

I run a free Path of Exile 2 build site (poe2builds.ai), and the feature players use most is the interactive passive tree viewer. Here's how it works under the hood — no three.js, no pixi, just Canvas 2D. ## The data problem GGG publishes an official skill-tree export: node positions, connections, and — the fun part — sprite atlases. frame.webp (~88KB) holds the keystone/notable/small frames in allocated & unallocated states; skills.webp (~436KB) packs 4,500+ individual node icons. A build-time script joins data.json × skills.json into a compact sprite map (id → [x, y, w, h]), so the client never parses GGG's raw export. ## Drawing 1,000+ nodes at 60fps The viewer is a single with pan/zoom transforms. Per frame: 1. Cull nodes outside the viewport. 2. drawImage() the frame sprite (allocated = gold glow, unallocated = grayscale via a filter pass). 3. Clip the skill icon inside the frame circle. 4. Draw edges first, nodes after — allocated paths get a soft glow. Labels only render past a zoom threshold, which keeps the hover path cheap. ## The gotchas that cost me nights • Hashed asset URLs: the atlas must load via dynamic import, or a CDN rename silently kills every icon (learned the hard way). • Wheel zoom needs a non-passive listener or the page scrolls under you. • Snapshot SEO: bots don't run your canvas — we ship the tree data server-side and render real text/links in the fallback. ## Why bother Every build guide on the site shows a per-stage tree (campaign → maps → endgame), so the viewer runs with three datasets per build. Canvas 2D handles it fine — the bottleneck was never rendering, it was data hygiene. Site (free, no login): https://poe2builds.ai — happy to answer anything about the pipeline in the comments.