> ## Documentation Index
> Fetch the complete documentation index at: https://krono.fabianpiper.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> A type-safe, modular toolkit for building high-performance orderbook visualizations with Kraken WebSocket API

<Note>
  A project built for the [Kraken Forge Hackathon](https://taikai.network/kraken/hackathons/kraken-forge) (Track #2: Orderbook Visualizer) by [Fabian Piper](https://fabianpiper.com)
</Note>

<img className="block dark:hidden rounded-lg h-32 w-auto" src="https://mintcdn.com/fabianpiper/rfzlcAPUVIDGRlHO/logo/light.png?fit=max&auto=format&n=rfzlcAPUVIDGRlHO&q=85&s=c845e4e4b073ef8f5b37757ed22b63d9" alt="Krono Hero Light" width="512" height="512" data-path="logo/light.png" />

<img className="hidden dark:block rounded-lg h-32 w-auto" src="https://mintcdn.com/fabianpiper/rfzlcAPUVIDGRlHO/logo/dark.png?fit=max&auto=format&n=rfzlcAPUVIDGRlHO&q=85&s=88857589f2b964e11d3e8bcc5c278e9e" alt="Krono Hero Dark" width="512" height="512" data-path="logo/dark.png" />

# Krono

Krono provides a complete solution for visualizing cryptocurrency orderbook data from Kraken's WebSocket API.
Built with a modular architecture, it consists of three packages:

<Columns cols={1}>
  <Card title="Core" icon="toy-brick" href={"/core/getting-started"} horizontal>
    The `@krono/core` package provides framework-agnostic orderbook logic with WebSocket management.
  </Card>

  <Card title="Hooks" icon="square-function" href={"/hooks/getting-started"} horizontal>
    The `@krono/hooks` package provides a react integration library with composable hooks.
  </Card>

  <Card title="Kit" icon="puzzle" href={"/kit/getting-started"} horizontal>
    The `@krono/kit` package provides pre-built UI components using shadcn/ui and Tailwind CSS.
  </Card>
</Columns>

<Tip>For a deeper look at Krono’s architecture, such as the update pipeline and design patterns, see the [Architecture guide](/docs/architecture/overview)</Tip>

## Features

* **Ready-to-use components:** Pre-built UI based on [shadcn/ui](https://ui.shadcn.com/) and [Tailwind CSS](https://tailwindcss.com/) for orderbook visualization, configuration panels, and asset pair selection
* **Time travel playback:** Replay historical orderbook states with frame-accurate precision for debugging, backtesting, and market analysis
* **High-performance WebSocket:** Optimized Kraken WebSocket integration with intelligent throttling and debouncing to keep your UI responsive
* **7+ React hooks:** Composable hooks for orderbook data, subscriptions, and state management with full control over data flow
* **Framework-agnostic:** Core package works with any framework, including React, Vue, Svelte, Angular, or vanilla JavaScript
* **TypeScript first:** End-to-end type safety with excellent IDE autocomplete and compile-time error detection

## Usage

Use the following code snippet to get a live orderbook with time travel capabilities:

```tsx theme={null}
import {
  formatDigits,
  formatPrice,
  Orderbook,
  OrderbookControls,
  OrderbookTable,
} from '@krono/kit';

export function OrderbookPanel() {
  return (
      <Orderbook.Root config={{ symbol: 'BTC/USD' }}>
        <Orderbook.Panel
          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.Panel>
    </Orderbook.Root>
  );
}
```

<Warning>
  The examples above assume local packages. Krono is not yet available on the npm registry.
  See the <a href="development/getting-started">development guide</a> for setup instructions.
</Warning>

## Browser Support

<Info>
  Krono works in all modern browsers that support WebSocket and ES2020+ features:
</Info>

* **Chrome/Edge** 90+
* **Firefox** 88+
* **Safari** 14+
* Modern mobile browsers (iOS Safari 14+, Chrome Mobile)

## What's Next?

<CardGroup cols={2}>
  <Card title="Development Guide" icon="tv-minimal-play" href="/docs/development/getting-started">
    Follow our step-by-step local installation guide
  </Card>

  <Card title="Browse Examples" icon="folder-code" href="/docs/examples">
    See implementation examples
  </Card>

  <Card title="Architecture Overview" icon="blocks" href="/docs/architecture/overview">
    Explore Krono's core architecture
  </Card>

  <Card title="View Source" icon="github" href="https://github.com/fapiper/krono">
    Check out the code on GitHub
  </Card>
</CardGroup>