How to build an order book (DoM) visualization using Databento, React, and Rust

CL futures depth of market. Credit: Geoff Young (GitHub: gty3) for the implementation and tutorial.

What is a depth of market (DoM) price ladder?

The DoM price ladder is a common way to visualize a limit order book in market-by-price (L2) form.

In the past, most commercial implementations of the DoM have been on native desktop applications. The origins of this type of visualization can be traced to desktop charting apps like that of Trading Technologies (which held a patent for the design since over 20 years ago, that has since expired). Market depth data is large and difficult to process, and it tended to be easier to implement the DoM visualization with the necessary performance on a native desktop application.

These days, with the speed of modern web browsers and client-side rendering techniques, it’s possible to implement a fast, snappy DoM as a web-based UI. This approach has seen many iterations on different trading platforms, especially seeing a widespread adoption on crypto exchanges like Coinbase.

DoM as browser-based GUI application. Credit: Coinbase Pro.

This post highlights the typical stack you’d use to implement the DoM as a web-based browser application, similar to the one found on Coinbase.

Recommended design and tools

Typical single-page application design with separate frontend and backend, and client-side rendering.

• React.js. For the web frontend with client-side rendering.
• Databento. For simple, fast access to market depth (L2) or full order book (L3) data. This type of data is typically very expensive, due to its size, licensing costs, and scarcity—and Databento’s usage-based pricing plans make it easier to get around these cost constraints.
• Rust. A performant, memory-safe programming language. Databento provides an official Rust client library, which makes it easy to implement the backend in Rust.
• WebSocket, SSE or WebTransport over HTTP/3. To communicate between the backend and frontend. At the time of this writing (Sep 2024), Databento has a raw TCP API for its real-time data and doesn’t expose a WebSocket API. Most web browsers don’t allow you to open raw TCP sockets due to security restrictions, so your frontend won’t be able to get data directly from Databento. But this is not an issue as most browser applications should have backend service layer that fetches the data; the backend service can expose real-time data over WebSocket, SSE, or any protocol that supports streaming.

Code and live demo

The code and implementation for this guide is contributed by Geoff Young (gty3 on GitHub).

See GitHub project for the code: https://github.com/gty3/dom-replay

See live demo: https://orderflowreplay.com/