@wick/order-book
Order Book
A headless bid/ask ladder with cumulative depth visualization. Feed it a { bids, asks } snapshot and it renders. Style it however you want with CSS parts and custom properties.
Live demo
hover trade → highlight book levelBoth components are subscribed to the same synthetic feed. Open the market pulse below and try Flash Crash.
Install
npm install @wick/order-bookUsage
import '@wick/order-book';
const el = document.querySelector('wick-order-book');
el.data = {
bids: [{ price: 67000, size: 1.2 }, /* ... */],
asks: [{ price: 67010, size: 0.8 }, /* ... */],
};
// In HTML:
// <wick-order-book depth="15" size="md" show-depth></wick-order-book>Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| data | OrderBookData | { bids: [], asks: [] } | Order book snapshot with bid and ask levels. |
| depth | number | 15 | Maximum number of levels to display per side. |
| priceFormat | PriceFormatOptions | {} | Price formatting (precision, locale, symbol). |
| sizePrecision | number | 4 | Decimal precision for size values. |
| showTotal | boolean | false | Show cumulative total column. |
| showDepth | boolean | false | Render cumulative depth bars behind rows. |
| grouping | number | undefined | Group levels by price bucket (e.g. 0.5). |
| size | "sm" | "md" | "lg" | "md" | Preset row height and font size. |
Events
| Event | Detail | Description |
|---|---|---|
| wick-order-book-level-click | { side, price, size } | Fired when the user clicks a bid or ask level row. |
CSS parts
| Part | Description |
|---|---|
| container | Outer wrapper element |
| header | Column headers row |
| bids | Bid side container |
| asks | Ask side container |
| row | Each level row (also bid-row / ask-row variants) |
| price | Price cell |
| size | Size cell |
| spread | Spread indicator between bids and asks |
CSS custom properties
| Variable | Default | Description |
|---|---|---|
| --wick-ob-bid-color | inherit | Color of bid prices |
| --wick-ob-ask-color | inherit | Color of ask prices |
| --wick-ob-bid-depth-color | rgba(34,197,94,0.12) | Cumulative depth bar color on bids |
| --wick-ob-ask-depth-color | rgba(239,68,68,0.12) | Cumulative depth bar color on asks |
| --wick-ob-row-hover | rgba(255,255,255,0.04) | Row hover background |
| --wick-ob-font-size | 13px | Font size for rows |
| --wick-ob-row-height | 24px | Row height |