Krono

Problem Statement

Building real-time orderbook visualizations requires tackling WebSocket management, state synchronization, performance optimization, and UI implementation simultaneously. This complexity creates a barrier for traders, analysts, and developers who want to visualize market depth and analyze orderbook dynamics. 

Introducing Krono

Krono solves this by providing a complete, production-ready toolkit that abstracts away the complexity while maintaining the performance and flexibility needed for many trading use cases. 

Designed to empower the community, Krono's modular architecture enables developers to build sophisticated orderbook visualizations with ease. Beyond using Krono's built-in tools, developers can contribute their own specialized components, data plugins (custom exchange adapters, historical data importers), and storage solutions, creating a shared ecosystem that benefits all traders, analysts, and the Kraken ecosystem.

Krono consists of three packages:

1. Core: The @krono/core package provides framework-agnostic orderbook logic with WebSocket management
2. Hooks: The @krono/hooks package provides a react integration library with composable hooks
3. Kit: The @krono/kit package provides pre-built UI components using shadcn/ui and Tailwind CSS

Krono features a comprehensive documentation, for core, hooks, and kit packages.
It leverages a sophisticated tech stack integrating Next.js and React+Vite showcases, Turborepo, Bun, Biome, Playwright, Vitest, Storybook, shadcn/ui, Tailwind CSS and automated CI/CD with live deployments.
For a deeper look at Krono’s architecture, such as the update pipeline and design patterns, see the architecture guide.

Features

• Ready-to-use Components: Based on shadcn/ui and Tailwind CSS for orderbook visualization, configuration, and asset pair selection
• Time Travel Playback: Replay and analyze historical orderbook states
• High-Performance WebSocket: Optimized Kraken WS integration with throttling and debouncing
• 7+ React Hooks: Composable hooks for orderbook data, subscriptions, and state management
• Framework Agnostic: Use with React, or build for vanilla JS and your favorite framework
• TypeScript First: Full type safety across core, hooks, and UI kit

Installation

For installation and setup instructions refer to the development guide.

Basic Usage

Use the following code snippet to get a live orderbook with time travel capabilities using @krono/kit (Note: This example is rather basic. Krono's components are highly customizable so you can pass a variety of props and compose them as granularly as needed with multiple sub-components, tailored to your specific requirements):

import {
  formatDigits,
  formatPrice,
  Orderbook,
  OrderbookControls,
  OrderbookTable,
} from '@krono/kit';


export function OrderbookPanel() {
  return (
      <Orderbook.Root 
          config={{ symbol: 'BTC/USD' }}
          renderTable={(props) => (
             <OrderbookTable.Root
                columns={{
                  total: {
                    label: 'Total',
                    children: ({ value }) => formatDigits(value.total),
                  },
                  quantity: {
                    label: 'Quantity',
                    children: ({ value }) => formatDigits(value.quantity),
                  },
                  price: {
                    label: 'Price',
                    className: 'font-semibold',
                    children: ({ value }) => formatPrice(value.price, 4),
                  },
                }}
                {...props}
             />
          )}
        >
          <OrderbookControls.Root> 
            <OrderbookControls.LiveBadge /> 
            <OrderbookControls.Toolbar> 
            <OrderbookControls.PlaybackButtons /> 
            <OrderbookControls.Timeline /> 
           </OrderbookControls.Toolbar> 
         </OrderbookControls.Root> 
       </Orderbook.Root> 
  );
}

Workflow

Refer to the documentation for comprehensive technical details and workflow descriptions.

Future Enhancements

With additional development time, I would expand Krono's capabilities as follows:

• Expanded Component Library: The current visualizations showcase Krono's potential, but represent just the beginning. With more time, a diverse set of specialized components could be build, such as heatmaps, depth charts, flow visualizations, and trade activity overlays, leveraging Krono's performance improvements and modular architecture for rapid development
• Import Plugins: Enable historical orderbook analysis by importing data from multiple sources, such as CSV/JSON snapshots, external APIs like CoinAPI (since Kraken doesn't provide historical orderbook data), or custom data feeds. This would unlock backtesting and historical analysis capabilities
• Export Plugins: Save orderbook snapshots and session recordings to CSV, JSON, Parquet, or stream directly to external analytics platforms and data warehouses
• Storage Plugins: Allow plugging in different storage providers, for example IndexedDB, PostgreSQL, or time-series databases

The components and plugins could be provided by the community, enabling everyone to hook in customized functionality and share it with each other!

• Web Workers: Offload WebSocket message processing, orderbook calculations, and snapshot management to background threads, keeping the UI thread responsive
• WebAssembly Core: Port performance-critical parts (snapshot compression, order matching simulation) to WASM for faster processing and reduced memory overhead
• Real-Time Collaboration: Share live orderbook sessions with team members, enabling collaborative analysis, synchronized time travel playback, and shared annotations
• Strategy Backtesting: Integrate time travel with a simulated order execution engine, allowing traders to test strategies against historical orderbook states with realistic slippage and fill simulation
• Unified Exchange Interface: Extend beyond Kraken to support Binance, Coinbase, Bybit, and other major exchanges through a normalized API
  
  

Krono? Krono = Kraken + Chronos (Χρόνος, personification of time) or Kronos (Κρόνος, Greek Titan of time). A nod to the time travel feature that lets you replay market history.