Built a multi-pane financial charting terminal with React 19, TypeScript, and HTML5 Canvas 2D primitives (Open-Source)
Hey r/reactjs,
I recently open-sourced OrderCraft, a local-first multi-chart technical analysis terminal built with React 19, TypeScript, Vite, and lightweight-charts (backed by a local Go WebSocket server).
Interesting frontend challenges we solved:
- Custom HTML5 Canvas 2D Drawing Engine (
ISeriesPrimitive):lightweight-chartsrenders candlesticks quickly on Canvas, but doesn't ship with interactive drawing tools. We built a custom Canvas 2D primitive engine from scratch in TypeScript supporting interactive Trendlines, Fibonacci Retracements, Parallel Channels, Rectangles, and Long/Short Position calculators with drag handles and OHLC magnet snapping. - High-Frequency WebSocket State Without Re-Render Storms: Streaming live ticks across 4 synchronized split-screen chart panes (
1x1,2V,2H,3,4layouts) with synced crosshairs, symbols, and timeframes without triggering full React component tree re-renders on every tick. - Single-Binary Embedding + PWA Standalone Mode: The Vite production bundle is embedded into a single ~14MB Go executable and includes a Web App Manifest so launching with
--app-modeopens a native frameless desktop window.
GitHub Repo: https://github.com/ordercraft-hq/terminal
Would love any feedback from fellow React/TypeScript devs on the frontend architecture and Canvas primitive implementation!
[link] [comments]