A live market depth viewer.
- Markets: BTC/USDT, ETH/USDT, SOL/USDT
- Data: Binance public WebSocket API, top-20 depth and aggregate trades
- Built with: React, TypeScript, Vite
- Live bids and asks for BTC/USDT, ETH/USDT, and SOL/USDT using Binance WebSocket streams.
- Market-specific price grouping, compact number formatting, and Amount or Cumulative depth views.
- Optional Buy/Sell ratio and center-outward row highlighting on hover.
- Aggregate-trade Last Price with tick direction and optional row-update animations.
- Binance-inspired desktop layout, colors, and BinanceNova typography.
- React, TypeScript, and Vite for the application and build setup.
- Tailwind CSS and shadcn / Base UI for styling and interactive controls.
- Vitest and Testing Library for book calculations and WebSocket lifecycle tests.
Requires Node.js 22.13+ and pnpm.
pnpm install
pnpm dev # Dev server at http://localhost:5173
pnpm build # Type-check and create the production build
pnpm preview # Preview the build at http://localhost:4173
pnpm test # Run the test suite
pnpm lint # Run oxlint- The order book uses Binance's top 20 levels. Larger price groupings may show fewer rows because several levels can fall into the same bucket. Supporting a deeper book would require a REST snapshot and the diff-depth stream.
- Settings are stored for the current session only. Switching markets resets the price grouping.
- The interface is designed primarily for desktop.
- The WebSocket does not reconnect automatically, so prices may become stale if the connection drops.