Render to Match
← Animationsyank.design
PixelOrderBook — DOM + React refs
captured DOM · widget.html
<div class="widget">
<canvas id="orderbook" />
ref
<div class="legend">
<span class="bid">BID</span>
ref
<span class="ask">ASK</span>
</div>
<div class="ticker">$84,231.50</div>
ref
</div>
<PixelOrderBook />client
const canvasRef = useRef(null);
const tickerRef = useRef(null);
const bidRef = useRef(null);
useEffect(() => {
socket.on("tick", t => {
tickerRef.current.textContent = t.price;
bidRef.current.classList.toggle("flash");
});
}, []);
return <div ref={containerRef}
dangerouslySetInnerHTML={{ __html: capturedHTML }} />;⚠ allowed here
BTC/USDlive
BID
ASK
flatrgba(52,199,89,0.18)
50%
50%
84243
84242
84241
84240
84239
84238
84237
84236
84235
84234
84233
84232
84231
84230
84229
84228
84227
84226
84225
84224
84223
84222
84221
84220
last
$84,231.50
trades
09:34:21BUY0.0120$84,231.50
09:34:20SELL0.0150$84,232.00
09:34:19BUY0.0180$84,232.50
09:34:18SELL0.0210$84,233.00
09:34:17BUY0.0240$84,233.50

Render to Match

Canvas-heavy widgets are painful to rewrite. So we don’t. yank injects the captured DOM as-is and wires React refs into specific nodes. Your state lives in React; the original code keeps rendering. Pixel-identical, fully interactive.