[{"data":1,"prerenderedAt":823},["ShallowReactive",2],{"post:\u002Fblog\u002Fgpui-rust-charting-library-gex-heatmap":3,"blog-all-posts":700},{"id":4,"title":5,"author":6,"body":7,"category":671,"coverAlt":672,"coverImage":50,"date":673,"dateModified":673,"description":674,"draft":675,"extension":676,"faqs":677,"meta":690,"navigation":158,"ogImage":691,"ogImageAlt":692,"order":671,"path":693,"readTime":694,"section":671,"sectionOrder":671,"seo":695,"seoTitle":696,"stem":697,"tag":698,"__hash__":699},"content\u002Fblog\u002Fgpui-rust-charting-library-gex-heatmap.md","Building a Native GPUI Chart in Rust: A GEX Gamma Heatmap","Tape Delta",{"type":8,"value":9,"toc":661},"minimark",[10,32,44,54,59,62,74,78,89,99,116,125,129,132,271,293,297,312,428,441,445,456,477,481,484,530,533,537,543,577,580,584,645,648,657],[11,12,13,14,26,27,31],"p",{},"Most charting libraries answer one question: \"how do I put a chart on a web page?\" This post answers a different one: ",[15,16,17,18,25],"strong",{},"\"how do I embed a real trading chart — candlesticks, an orderbook heatmap, and a GEX gamma-exposure heatmap — inside a native ",[19,20,24],"a",{"href":21,"rel":22},"https:\u002F\u002Fwww.gpui.rs\u002F",[23],"nofollow","GPUI"," desktop app in Rust?\""," And it shows that the ",[28,29,30],"em",{},"same"," engine also runs on the web, so you build once and ship to both.",[11,33,34,35,43],{},"We build ",[19,36,39],{"href":37,"rel":38},"https:\u002F\u002Fgithub.com\u002Ftapedelta\u002Fkline-orderbook-chart",[23],[40,41,42],"code",{},"kline-orderbook-chart",". It started as a web chart engine and grew a native path, because a serious trading terminal eventually wants to leave the browser: lower latency, no tab throttling, direct GPU access, and a single binary you control. This is how it works.",[11,45,46,51],{},[47,48],"img",{"alt":49,"src":50},"Native trading terminal: an options GEX gamma-exposure heatmap on the left, a BTCUSDT kline chart with orderbook heatmap and RSI on the right, both rendered by one Rust engine","\u002Fblog\u002Fgpui\u002Foptions-gex-heatmap-terminal.png",[28,52,53],{},"A native terminal: the GEX gamma heatmap (left) and the kline + orderbook-heatmap chart (right), one engine driving both panes.",[55,56,58],"h2",{"id":57},"why-a-native-chart-at-all","Why a native chart at all?",[11,60,61],{},"The web is a great distribution channel and a hostile runtime for a chart. Background tabs get throttled to 1 fps. Garbage-collection pauses land mid-pan. Canvas is a single-threaded raster target with no direct GPU control. For a chart a trader stares at for eight hours, those tradeoffs add up.",[11,63,64,65,69,70,73],{},"A native build removes them: predictable frame pacing, real threads, GPU-backed painting through ",[19,66,24],{"href":67,"rel":68},"https:\u002F\u002Fgithub.com\u002Fzed-industries\u002Fzed",[23]," \u002F wgpu \u002F skia, and no browser sandbox between you and the metal. The catch has always been that going native meant ",[28,71,72],{},"rewriting your chart",". It does not have to.",[55,75,77],{"id":76},"one-engine-one-command-buffer","One engine, one command buffer",[11,79,80,81,84,85,88],{},"The core idea that makes web-and-native possible with no rewrite: ",[15,82,83],{},"the engine never touches a canvas or a GPU directly."," Each frame it computes a ",[28,86,87],{},"command buffer"," — a compact, renderer-agnostic list of typed draw commands:",[90,91,96],"pre",{"className":92,"code":94,"language":95},[93],"language-text","FillRect { x, y, w, h, color }\nLine { x0, y0, x1, y1, color, width }\nText { x, y, text, size, color }\nHeatmapWorld { … }        \u002F\u002F the depth \u002F GEX raster in world coordinates\nCircle { … } · Polyline { … } · GradientRect { … } · ClipRect { … } · …\n","text",[40,97,94],{"__ignoreMap":98},"",[11,100,101,102,105,106,105,109,112,113,115],{},"On the web, a thin layer reads that buffer and calls ",[40,103,104],{},"ctx.fillRect",", ",[40,107,108],{},"ctx.stroke",[40,110,111],{},"ctx.fillText",". Natively, you read the ",[28,114,30],{}," buffer and call your painter. The engine does not know or care which one it is.",[11,117,118,122],{},[47,119],{"alt":120,"src":121},"One engine, two front-ends: a browser window and a native desktop window drawing the identical candlestick-plus-heatmap chart from a single shared engine core","\u002Fblog\u002Fgpui\u002Fweb-native-one-engine.png",[28,123,124],{},"Same command stream, two dispatchers — a browser canvas and a native GPUI window.",[55,126,128],{"id":127},"the-native-rust-api","The native Rust API",[11,130,131],{},"No JavaScript, no WASM, no bridge. You use the crate directly:",[90,133,137],{"className":134,"code":135,"language":136,"meta":98,"style":98},"language-rust shiki shiki-themes github-dark github-light","use chart_engine::ChartEngine;\nuse chart_engine::render::Paint;\n\n\u002F\u002F 1. Create the engine at a logical (CSS-pixel) size.\nlet mut engine = ChartEngine::new(960.0, 600.0);\n\n\u002F\u002F 2. Activate your licence (native tokens skip the web domain check).\nengine.set_license(include_str!(\"..\u002Flicense.mrd\").trim());\n\n\u002F\u002F 3. Feed columnar OHLCV (timestamps in ms).\nengine.set_klines(&ts, &open, &high, &low, &close, &volume);\n\n\u002F\u002F 4. Render one frame, then walk its command buffer.\nfor cmd in engine.commands() {\n    match cmd {\n        Paint::FillRect { x, y, w, h, color } => painter.fill_rect(x, y, w, h, color),\n        Paint::Line { x0, y0, x1, y1, color, width } => painter.line(x0, y0, x1, y1, color, width),\n        Paint::Text { x, y, text, size, color, .. } => painter.text(x, y, text, size, color),\n        Paint::HeatmapWorld { .. } => painter.heatmap(cmd),   \u002F\u002F depth \u002F GEX raster\n        _ => {}\n    }\n}\n","rust",[40,138,139,147,153,160,166,172,177,183,189,194,200,206,211,217,223,229,235,241,247,253,259,265],{"__ignoreMap":98},[140,141,144],"span",{"class":142,"line":143},"line",1,[140,145,146],{},"use chart_engine::ChartEngine;\n",[140,148,150],{"class":142,"line":149},2,[140,151,152],{},"use chart_engine::render::Paint;\n",[140,154,156],{"class":142,"line":155},3,[140,157,159],{"emptyLinePlaceholder":158},true,"\n",[140,161,163],{"class":142,"line":162},4,[140,164,165],{},"\u002F\u002F 1. Create the engine at a logical (CSS-pixel) size.\n",[140,167,169],{"class":142,"line":168},5,[140,170,171],{},"let mut engine = ChartEngine::new(960.0, 600.0);\n",[140,173,175],{"class":142,"line":174},6,[140,176,159],{"emptyLinePlaceholder":158},[140,178,180],{"class":142,"line":179},7,[140,181,182],{},"\u002F\u002F 2. Activate your licence (native tokens skip the web domain check).\n",[140,184,186],{"class":142,"line":185},8,[140,187,188],{},"engine.set_license(include_str!(\"..\u002Flicense.mrd\").trim());\n",[140,190,192],{"class":142,"line":191},9,[140,193,159],{"emptyLinePlaceholder":158},[140,195,197],{"class":142,"line":196},10,[140,198,199],{},"\u002F\u002F 3. Feed columnar OHLCV (timestamps in ms).\n",[140,201,203],{"class":142,"line":202},11,[140,204,205],{},"engine.set_klines(&ts, &open, &high, &low, &close, &volume);\n",[140,207,209],{"class":142,"line":208},12,[140,210,159],{"emptyLinePlaceholder":158},[140,212,214],{"class":142,"line":213},13,[140,215,216],{},"\u002F\u002F 4. Render one frame, then walk its command buffer.\n",[140,218,220],{"class":142,"line":219},14,[140,221,222],{},"for cmd in engine.commands() {\n",[140,224,226],{"class":142,"line":225},15,[140,227,228],{},"    match cmd {\n",[140,230,232],{"class":142,"line":231},16,[140,233,234],{},"        Paint::FillRect { x, y, w, h, color } => painter.fill_rect(x, y, w, h, color),\n",[140,236,238],{"class":142,"line":237},17,[140,239,240],{},"        Paint::Line { x0, y0, x1, y1, color, width } => painter.line(x0, y0, x1, y1, color, width),\n",[140,242,244],{"class":142,"line":243},18,[140,245,246],{},"        Paint::Text { x, y, text, size, color, .. } => painter.text(x, y, text, size, color),\n",[140,248,250],{"class":142,"line":249},19,[140,251,252],{},"        Paint::HeatmapWorld { .. } => painter.heatmap(cmd),   \u002F\u002F depth \u002F GEX raster\n",[140,254,256],{"class":142,"line":255},20,[140,257,258],{},"        _ => {}\n",[140,260,262],{"class":142,"line":261},21,[140,263,264],{},"    }\n",[140,266,268],{"class":142,"line":267},22,[140,269,270],{},"}\n",[11,272,273,276,277,280,281,284,285,288,289,292],{},[40,274,275],{},"engine.render_frame()"," renders and returns the raw bytes; ",[40,278,279],{},"engine.commands()"," gives you a streaming iterator of typed ",[40,282,283],{},"Paint"," values over the last frame. That ",[40,286,287],{},"match"," block ",[28,290,291],{},"is"," your renderer adapter — a couple hundred lines mapping ~30 command variants to your backend.",[55,294,296],{"id":295},"wiring-it-into-gpui","Wiring it into GPUI",[11,298,299,302,303,307,308,311],{},[19,300,24],{"href":21,"rel":301},[23]," is the Rust UI framework behind the ",[19,304,306],{"href":67,"rel":305},[23],"Zed editor",": retained-mode elements, a GPU-backed painter, and a tight frame loop. The chart becomes a single custom element whose ",[40,309,310],{},"paint"," pass drains the command buffer:",[90,313,315],{"className":134,"code":314,"language":136,"meta":98,"style":98},"impl Element for ChartElement {\n    fn paint(&mut self, bounds: Bounds\u003CPixels>, _: &mut (), cx: &mut WindowContext) {\n        let mut engine = self.engine.borrow_mut();\n        engine.set_size(bounds.size.width.into(), bounds.size.height.into());\n        engine.render();\n\n        for cmd in engine.commands() {\n            match cmd {\n                Paint::FillRect { x, y, w, h, color } => {\n                    cx.paint_quad(fill(rect(x, y, w, h, bounds), rgba(color)));\n                }\n                Paint::Line { x0, y0, x1, y1, color, width } => {\n                    cx.paint_path(line_path(x0, y0, x1, y1, bounds), rgba(color), width);\n                }\n                Paint::Text { x, y, text, size, color, .. } => {\n                    cx.paint_text(point(x, y, bounds), text, size, rgba(color));\n                }\n                Paint::HeatmapWorld { .. } => paint_heatmap(cx, &cmd, bounds),\n                _ => {}\n            }\n        }\n    }\n}\n",[40,316,317,322,327,332,337,342,346,351,356,361,366,371,376,381,385,390,395,399,404,409,414,419,423],{"__ignoreMap":98},[140,318,319],{"class":142,"line":143},[140,320,321],{},"impl Element for ChartElement {\n",[140,323,324],{"class":142,"line":149},[140,325,326],{},"    fn paint(&mut self, bounds: Bounds\u003CPixels>, _: &mut (), cx: &mut WindowContext) {\n",[140,328,329],{"class":142,"line":155},[140,330,331],{},"        let mut engine = self.engine.borrow_mut();\n",[140,333,334],{"class":142,"line":162},[140,335,336],{},"        engine.set_size(bounds.size.width.into(), bounds.size.height.into());\n",[140,338,339],{"class":142,"line":168},[140,340,341],{},"        engine.render();\n",[140,343,344],{"class":142,"line":174},[140,345,159],{"emptyLinePlaceholder":158},[140,347,348],{"class":142,"line":179},[140,349,350],{},"        for cmd in engine.commands() {\n",[140,352,353],{"class":142,"line":185},[140,354,355],{},"            match cmd {\n",[140,357,358],{"class":142,"line":191},[140,359,360],{},"                Paint::FillRect { x, y, w, h, color } => {\n",[140,362,363],{"class":142,"line":196},[140,364,365],{},"                    cx.paint_quad(fill(rect(x, y, w, h, bounds), rgba(color)));\n",[140,367,368],{"class":142,"line":202},[140,369,370],{},"                }\n",[140,372,373],{"class":142,"line":208},[140,374,375],{},"                Paint::Line { x0, y0, x1, y1, color, width } => {\n",[140,377,378],{"class":142,"line":213},[140,379,380],{},"                    cx.paint_path(line_path(x0, y0, x1, y1, bounds), rgba(color), width);\n",[140,382,383],{"class":142,"line":219},[140,384,370],{},[140,386,387],{"class":142,"line":225},[140,388,389],{},"                Paint::Text { x, y, text, size, color, .. } => {\n",[140,391,392],{"class":142,"line":231},[140,393,394],{},"                    cx.paint_text(point(x, y, bounds), text, size, rgba(color));\n",[140,396,397],{"class":142,"line":237},[140,398,370],{},[140,400,401],{"class":142,"line":243},[140,402,403],{},"                Paint::HeatmapWorld { .. } => paint_heatmap(cx, &cmd, bounds),\n",[140,405,406],{"class":142,"line":249},[140,407,408],{},"                _ => {}\n",[140,410,411],{"class":142,"line":255},[140,412,413],{},"            }\n",[140,415,416],{"class":142,"line":261},[140,417,418],{},"        }\n",[140,420,421],{"class":142,"line":267},[140,422,264],{},[140,424,426],{"class":142,"line":425},23,[140,427,270],{},[11,429,430,431,105,434,437,438,440],{},"Feed pan\u002Fzoom\u002Fcrosshair from GPUI's input events into the engine's viewport setters (",[40,432,433],{},"set_viewport",[40,435,436],{},"set_crosshair","), request a repaint, and you have a native, GPU-painted trading chart. A reference adapter ships in the repo — start there instead of writing the ",[40,439,287],{}," from scratch.",[55,442,444],{"id":443},"the-gex-gamma-exposure-heatmap","The GEX gamma-exposure heatmap",[11,446,447,448,451,452,455],{},"GEX (gamma exposure) turns the options chain into a map of where dealers are forced to hedge. From the open interest at each strike you estimate dealers' net gamma; positive-gamma zones tend to ",[28,449,450],{},"pin"," price (dealers sell rallies, buy dips), negative-gamma zones tend to ",[28,453,454],{},"accelerate"," it. Rendered as a heatmap — price on Y, time on X, cell color by dealer gamma — you can see those magnet and accelerant zones at a glance, and line them up against the spot candles in the next pane.",[11,457,458,459,462,463,469,470,476],{},"Mechanically it is the same ",[40,460,461],{},"HeatmapWorld"," raster path as the orderbook depth heatmap; only the input matrix differs (dealer gamma per strike instead of resting size per price). The engine renders both the same way, natively and on the web, so the GEX pane in the screenshot above is the identical code path as the depth heatmap in the chart pane. New to GEX? Start with ",[15,464,465],{},[19,466,468],{"href":467},"\u002Fblog\u002Fwhat-is-gex-gamma-exposure-guide","What Is Gamma Exposure (GEX)? A Trader's Guide"," and ",[15,471,472],{},[19,473,475],{"href":474},"\u002Fblog\u002Fgex-heatmap-explained","GEX Heatmap Explained",".",[55,478,480],{"id":479},"what-you-get-in-the-box","What you get in the box",[11,482,483],{},"The native crate is not a candle-only stub — it is the full engine:",[485,486,487,494,500,506,512,518,524],"ul",{},[488,489,490,493],"li",{},[15,491,492],{},"Candlesticks"," with O(1) amortised appends for live bars.",[488,495,496,499],{},[15,497,498],{},"Orderbook depth heatmap"," — resting liquidity behind the candles.",[488,501,502,505],{},[15,503,504],{},"GEX gamma heatmap"," — dealer gamma by strike over time.",[488,507,508,511],{},[15,509,510],{},"Footprint cells"," — bid×ask executed volume, POC, delta, stacked imbalances.",[488,513,514,517],{},[15,515,516],{},"Liquidation heatmap"," — force-close clusters as an overlay.",[488,519,520,523],{},[15,521,522],{},"18+ indicators"," — VRVP, CVD, TPO, RSI, MACD, Open Interest, Funding, and more.",[488,525,526,529],{},[15,527,528],{},"Custom indicators"," — a sandboxed scripting language, no fork required.",[11,531,532],{},"Every one of those is a command-buffer producer, so every one renders identically on the web and in your GPUI window.",[55,534,536],{"id":535},"web-and-native-from-one-build","Web and native, from one build",[11,538,539,540],{},"To be explicit, because this is the part that is genuinely rare: ",[15,541,542],{},"the same source produces both targets.",[485,544,545,568],{},[488,546,547,550,551,557,558,561,562,476],{},[15,548,549],{},"Web"," — install ",[19,552,555],{"href":553,"rel":554},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fkline-orderbook-chart",[23],[40,556,42],{}," from npm, hand it a ",[40,559,560],{},"\u003Ccanvas>",", feed OHLCV, done. See ",[15,563,564],{},[19,565,567],{"href":566},"\u002Fblog\u002Fkline-chart-orderbook-heatmap-library","Kline Chart With Orderbook Heatmap: A Library Guide",[488,569,570,573,574,576],{},[15,571,572],{},"Native"," — add the licensed native crate (a precompiled engine plus an open decoder\u002Fadapter — you licence the binary, the same model as the web build; the engine source is not sold), implement the ~30-variant ",[40,575,283],{}," adapter for GPUI \u002F wgpu \u002F skia (a reference GPUI adapter is provided), done.",[11,578,579],{},"Same candles, same heatmaps, same numbers, same drawing tools. You do not maintain two charts; you maintain one engine and two thin dispatchers.",[55,581,583],{"id":582},"where-to-go-next","Where to go next",[485,585,586,593,602,615,629],{},[488,587,588,592],{},[15,589,590],{},[19,591,567],{"href":566}," — the web side, with install + streaming code.",[488,594,595,601],{},[15,596,597],{},[19,598,600],{"href":599},"\u002Fblog\u002Forderbook-heatmap-chart-library-comparison-2026","Choosing an Orderbook Heatmap Chart Library: A Buyer's Guide"," — how to score any candidate.",[488,603,604,609,610,614],{},[15,605,606],{},[19,607,608],{"href":467},"What Is Gamma Exposure (GEX)?"," · ",[15,611,612],{},[19,613,475],{"href":474}," — the concept.",[488,616,617,620,621,609,625],{},[15,618,619],{},"Docs:"," ",[19,622,624],{"href":623},"\u002Fdocs\u002Fcharting-library\u002Fintroduction","Charting Library",[19,626,628],{"href":627},"\u002Fdocs\u002Fcharting-library\u002Fgetting-started","Getting Started",[488,630,631,620,634,609,638,609,642],{},[15,632,633],{},"Code:",[19,635,637],{"href":37,"rel":636},[23],"GitHub — kline-orderbook-chart",[19,639,641],{"href":553,"rel":640},[23],"npm",[19,643,24],{"href":67,"rel":644},[23],[646,647],"hr",{},[11,649,650],{},[28,651,652,653,656],{},"Built with ",[19,654,42],{"href":37,"rel":655},[23]," — a Rust chart engine for web and native. Free for development, commercial licences for production. This article is engineering documentation, not financial advice. Trading involves risk.",[658,659,660],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}",{"title":98,"searchDepth":149,"depth":149,"links":662},[663,664,665,666,667,668,669,670],{"id":57,"depth":149,"text":58},{"id":76,"depth":149,"text":77},{"id":127,"depth":149,"text":128},{"id":295,"depth":149,"text":296},{"id":443,"depth":149,"text":444},{"id":479,"depth":149,"text":480},{"id":535,"depth":149,"text":536},{"id":582,"depth":149,"text":583},null,"Options GEX gamma-exposure heatmap beside a kline + orderbook-heatmap chart, both rendered by one native Rust engine","2026-07-16","A production Rust charting library that renders candlesticks, an orderbook heatmap, and a GEX gamma-exposure heatmap natively — the same engine embeds in a GPUI desktop app and on the web.",false,"md",[678,681,684,687],{"q":679,"a":680},"Is there a Rust charting library for candlesticks, orderbook heatmap, and GEX?","Yes. kline-orderbook-chart is a Rust chart engine that renders candlesticks, a real-time orderbook depth heatmap, footprint cells, a liquidation heatmap, 18+ indicators, and an options GEX (gamma exposure) heatmap. It ships both as a web package and as a native Rust crate you can embed in a desktop app.",{"q":682,"a":683},"Can I use this chart engine inside a GPUI (Zed) app?","Yes. The engine produces a renderer-agnostic command buffer each frame — a stream of typed Paint commands (FillRect, Line, Text, HeatmapWorld, and so on). A GPUI adapter iterates that buffer in your element's paint pass and translates each command into GPUI primitives, so the chart draws natively with no browser, no canvas, and no JavaScript runtime.",{"q":685,"a":686},"What is a GEX gamma-exposure heatmap?","GEX (gamma exposure) estimates dealers' net gamma at each strike from the options open interest. Rendered as a heatmap, price runs on the Y axis and time on the X axis, and each cell is colored by dealer gamma at that level — positive-gamma zones tend to pin price, negative-gamma zones tend to accelerate it. It is a distinct layer from the orderbook depth heatmap.",{"q":688,"a":689},"Does the native build and the web build produce identical charts?","Yes. Both call the same engine core; only the final paint dispatch differs — a canvas on the web, your painter (GPUI, wgpu, or skia) natively. The command buffer wire format is identical, so a bar drawn on the web is the same bar drawn on the desktop.",{},"https:\u002F\u002Ftapedelta.com\u002Fblog\u002Fgpui\u002Foptions-gex-heatmap-terminal.png","Native trading terminal rendering an options GEX gamma-exposure heatmap on the left and a BTCUSDT candlestick chart with orderbook heatmap and RSI on the right, drawn by one Rust chart engine","\u002Fblog\u002Fgpui-rust-charting-library-gex-heatmap","13 min read",{"title":5,"description":674},"GPUI Chart in Rust — Native GEX Gamma Heatmap | Tape Delta","blog\u002Fgpui-rust-charting-library-gex-heatmap","ENGINEERING","FH0dE6M6CgpdVx73hH4Dvg3gshqU9iC1vwQFoxE4HJw",[701,702,708,716,723,731,737,744,751,759,768,775,782,790,797,804,811,817],{"path":693,"title":5,"description":674,"tag":698,"date":673,"readTime":694,"coverImage":50,"coverAlt":672},{"path":566,"title":567,"description":703,"tag":704,"date":673,"readTime":705,"coverImage":706,"coverAlt":707},"How to render a kline candlestick chart with a real-time orderbook depth heatmap behind the candles — in one canvas, at native speed. Install, code, and streaming.","CHARTING","12 min read","\u002Fblog\u002Fkline-heatmap\u002Fbtcusdt-orderbook-heatmap-chart.png","BTCUSDT kline chart with orderbook heatmap behind the candles — resting liquidity bands by price and time, rendered in one canvas",{"path":709,"title":710,"description":711,"tag":712,"date":713,"readTime":705,"coverImage":714,"coverAlt":715},"\u002Fblog\u002Fopen-interest-reversal-continuation-patterns","Open Interest Patterns: Reversal & Continuation","How open interest confirms continuation or warns of reversals — the four OI scenarios, divergence, squeeze exhaustion and climax spikes, with chart illustrations.","ORDER FLOW","2026-06-25","\u002Fblog\u002Foi\u002Foi-patterns-cover.png","Price uptrend rolling over into a reversal at a highlighted pivot, with an open interest column histogram peaking and fading underneath",{"path":717,"title":718,"description":719,"tag":712,"date":720,"readTime":694,"coverImage":721,"coverAlt":722},"\u002Fblog\u002Fwhat-is-open-interest-trading-oi-cvd-guide","What Is Open Interest? Trading OI with CVD","What open interest is, how it differs from volume, the four OI flow buckets, and how to pair OI with CVD to read squeezes, traps and stealth accumulation.","2026-06-24","\u002Fblog\u002Foi\u002Fopen-interest-cover.png","Open Interest sub-pane below a BTC\u002FUSDT chart with bull\u002Fbear inflow columns and a trapped-trader spike halo on the candles",{"path":467,"title":724,"description":725,"tag":726,"date":727,"readTime":728,"coverImage":729,"coverAlt":730},"What Is GEX? Gamma Exposure Explained for Traders","GEX (gamma exposure) measures dealer hedging pressure and signals whether the market will pin or trend. Learn gamma flip, max pain, and call and put walls.","OPTIONS GEX","2026-06-15","17 min read","\u002Fblog\u002Fgex\u002Fgex-options-terminal.png","Options GEX panel with net GEX, gamma flip and max pain tiles, a GEX-by-strike profile, and call\u002Fput walls drawn on the price chart",{"path":474,"title":732,"description":733,"tag":726,"date":734,"readTime":705,"coverImage":735,"coverAlt":736},"GEX Heatmap Explained: Reading Dealer Gamma by Strike","A GEX heatmap maps gamma exposure across time and strike. Read the signed call\u002Fput-wall and |GEX| intensity views, and trade walls as they build and drain.","2026-06-14","\u002Fblog\u002Fgex\u002Fgex-heatmap-signed.png","Signed GEX heatmap with green call-wall bands above price and red put-wall bands below, dealer gamma mapped by strike across time",{"path":738,"title":739,"description":740,"tag":726,"date":741,"readTime":705,"coverImage":742,"coverAlt":743},"\u002Fblog\u002Fgex-indicator-chart-overlay","GEX Indicator: Trading Options Gamma Levels on Your Chart","A GEX indicator draws dealer gamma levels — gamma flip, max pain, call and put walls — straight onto your candles, with a live regime read. How to read and trade the overlay.","2026-06-13","\u002Fblog\u002Fgex\u002Fgex-walls-surface.png","GEX indicator drawing gamma flip, max pain and call\u002Fput walls as labelled levels on a price chart with a live regime read box",{"path":745,"title":746,"description":747,"tag":712,"date":748,"readTime":694,"coverImage":749,"coverAlt":750},"\u002Fblog\u002Fhow-to-read-dom-ladder-trading","How to Read the DOM Ladder: An Order-Flow Trading Guide","The DOM ladder (depth of market) shows resting bid\u002Fask size, aggressive buy and sell volume, and per-level delta live. Learn to read walls and absorption.","2026-06-03","\u002Fblog\u002Fdom-ladder-hero.png","Real-time DOM ladder with green resting bid bars below price, red resting ask bars above, aggressive buy and sell volume columns and a signed delta column",{"path":752,"title":753,"description":754,"tag":712,"date":755,"readTime":756,"coverImage":757,"coverAlt":758},"\u002Fblog\u002Fliquidation-heatmap-trend-trading-guide","Liquidation Heatmap + RSI: Trading Long-Term Trend Waves","Combine the liquidation heatmap with RSI to ride long-term trend waves: forced-deleveraging mechanics, an RSI regime filter, and a swing framework across 500+ Binance altcoin pairs.","2026-06-02","16 min read","\u002Fblog\u002Fliq\u002Fliquidation-heatmap-cover.png","Liquidation heatmap and RSI on a BTC\u002FUSDT chart in a downtrend, bright clusters marking estimated force-liquidation zones above and below price",{"path":760,"title":761,"description":762,"tag":763,"date":764,"readTime":765,"coverImage":766,"coverAlt":767},"\u002Fblog\u002Frsi-momentum-value-and-structure-guide","RSI as a Momentum Instrument: Value and Structure","What RSI really measures: momentum, not overbought\u002Foversold. RSI momentum value (Cardwell range rules), structure (Baeyens), and why momentum leads price.","RSI","2026-05-31","28 min read","\u002Fblog\u002Frsi\u002Frsi-cover.png","RSI panel showing the momentum line, bull and bear range zones, and a multi-timeframe RSI table — the value and structure dimensions of RSI momentum",{"path":769,"title":770,"description":771,"tag":712,"date":772,"readTime":705,"coverImage":773,"coverAlt":774},"\u002Fblog\u002Ftrading-with-cvd-profile","Trading with CVD Profile: A Practical Guide","How to read a CVD Profile and trade four repeatable setups — trapped traders, distribution top, accumulation bottom, and absorption resolution — with clear entry rules.","2026-05-24","\u002Fblog\u002Fcvd-profile-og.png","BTC\u002FUSDT chart with CVD Profile — buy vs sell volume at each price, POC highlight, and delta share for order-flow trading",{"path":776,"title":777,"description":778,"tag":712,"date":779,"readTime":705,"coverImage":780,"coverAlt":781},"\u002Fblog\u002Ftrading-chart-with-depth-heatmap-guide","Trading Chart with Depth Heatmap: Complete Guide [2026]","Learn how a trading chart with depth heatmap visualises real-time orderbook liquidity behind candlesticks. Patterns to read, tools that support it, and a 50-line JavaScript implementation.","2026-05-15","\u002Fblog\u002Ftrading-chart-with-depth-heatmap-hero.png","BTC\u002FUSDT chart with orderbook depth heatmap, footprint, liquidation overlay, and RSI",{"path":783,"title":784,"description":785,"tag":712,"date":786,"readTime":787,"coverImage":788,"coverAlt":789},"\u002Fblog\u002Fhow-to-read-orderbook-heatmap-trading","How to Read an Orderbook Heatmap for Trading: 5 Patterns That Print Money","Five orderbook heatmap patterns every trader should recognise on sight: resting walls, spoofing flashes, iceberg refresh, liquidity vacuums, and stacked accumulation. With real BTC\u002FUSDT examples.","2026-05-12","10 min read","\u002Fblog\u002Forderbook-heatmap-patterns.png","Orderbook heatmap on a candlestick chart, with bright bid stripes below and ask stripes above price",{"path":599,"title":791,"description":792,"tag":704,"date":793,"readTime":794,"coverImage":795,"coverAlt":796},"Choosing an Orderbook Heatmap Chart Library: A Practical Buyer's Guide for 2026","A practical buyer's guide for picking a JavaScript orderbook heatmap chart library. The technical requirements that actually matter, the questions to ask, the build-it-yourself cost estimate, and a checklist you can run on any candidate.","2026-05-10","11 min read","\u002Fblog\u002Ffootprint-chart-advanced.png","Footprint chart with bid\u002Fask volume at every price level, delta coloring, imbalance detection, and POC highlighting",{"path":798,"title":799,"description":800,"tag":801,"date":802,"readTime":787,"coverImage":795,"coverAlt":803},"\u002Fblog\u002Fwhat-is-a-footprint-chart-complete-guide","What Is a Footprint Chart? The Complete Guide for 2026","A footprint chart shows trade volume at every price inside a candle — bid vs ask, delta, and POC. The complete beginner's guide with the three display modes, how aggressor classification works, and how to start reading order flow.","FOOTPRINT","2026-05-08","Footprint chart with bid volume on left, ask volume on right, delta coloring, and POC highlight",{"path":805,"title":806,"description":807,"tag":801,"date":808,"readTime":694,"coverImage":809,"coverAlt":810},"\u002Fblog\u002Fhow-to-read-footprint-chart-patterns","How to Read a Footprint Chart: 8 Patterns Every Trader Must Know","Learn how to read a footprint chart in practice. Eight order-flow patterns — absorption, stacked imbalance, delta divergence, exhaustion, unfinished auction, HVN, POC rotation, and supportive-vs-fading delta — with examples and trader interpretation.","2026-05-06","\u002Fblog\u002Ffootprint-chart-settings.png","Footprint chart with delta-colored cells, POC highlight, and stacked imbalance markers",{"path":812,"title":813,"description":814,"tag":801,"date":815,"readTime":794,"coverImage":795,"coverAlt":816},"\u002Fblog\u002Fstacked-imbalances-footprint-chart-guide","Stacked Imbalances on a Footprint Chart: Setup, Reading, and Trading","Stacked imbalances are the most-watched footprint signal. Learn the diagonal vs horizontal detection methods, how to calibrate ratio and min rows, what bullish and bearish stacks mean, and how traders use them in practice.","2026-05-04","Footprint chart showing stacked imbalance zones with bracket markers and tinted cells",{"path":818,"title":819,"description":820,"tag":801,"date":821,"readTime":787,"coverImage":780,"coverAlt":822},"\u002Fblog\u002Ffootprint-chart-vs-candlestick-chart","Footprint Chart vs Candlestick Chart: Why You Need Both","A head-to-head comparison of footprint and candlestick charts. What each one shows, what each one hides, the data each requires, and how to combine them in one workflow. With concrete examples of when the footprint changes your read.","2026-05-02","Trading chart with candlesticks, depth heatmap, and footprint cells visible inline",1784209303534]