Krono

A modular toolkit for building high-performance orderbook visualizations with time travel playback using Kraken's WebSocket API. TypeScript-first, framework-agnostic, production-ready.

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

Getting Started

Prerequisites

• Node.js 20+
• Bun (or npm/yarn/pnpm)

Quick Start

# Clone the repository
git clone https://github.com/fapiper/krono.git

# Navigate to the project directory
cd krono

# Install dependencies
bun install

# Start development server
bun dev

For detailed setup instructions, read the documentation.

Documentation

Full documentation is available at krono.fabianpiper.com/docs.

Project Structure

Krono uses a monorepo structure managed by Turborepo:

krono/
├── apps/           # Deployable applications
│   ├── web/        # Showcase app
│   ├── docs/       # Documentation
│   └── storybook/  # Component library
├── examples/       # Example integrations
│   ├── react/      # React integration
│   └── nextjs/     # Next.js integration
└── packages/       # Shared packages
    ├── core/       # Core orderbook logic
    ├── hooks/      # React hooks
    ├── kit/        # UI components
    ├── tsconfig/   # Shared TypeScript configs
    └── ui/         # Base UI primitives

Each app is self-contained and independently deployable. Packages are shared across apps for consistency and maintainability.

Development

Tools & Stack

• TypeScript - Static type checking
• Biome - Code linting, formatting, and fixing
• Vitest - Unit testing
• Playwright - End-to-end testing
• Storybook - Component development and documentation

Useful Commands

• bun build - Build all apps and packages
• bun dev - Develop all apps and packages
• bun dev:ui - Develop with Turbo's experimental UI
• bun test - Run all tests with Vitest
• bun test:cov - Run tests with coverage report
• bun test:cov:ui - Run tests with Vitest UI
• bun test:e2e - Run end-to-end tests with Playwright
• bun lint - Lint and format all packages
• bun lint:fix - Lint, format, and fix all packages
• bun clean - Clean up all node_modules and dist folders
• bun ui:add:component - Add a shadcn/ui component to @krono/ui
• bun storybook - Run Storybook for component development

CI/CD

We use GitHub Actions for continuous integration. Every push or pull request to the main branch runs:

1. Setup - Checks out code and sets up Bun
2. Install - Installs dependencies
3. Build - Builds all apps and packages
4. Unit Tests - Runs tests with Vitest
5. E2E Tests - Runs tests with Playwright
6. Lint - Performs linting and formatting checks with Biome

Contributing

We welcome contributions! See the contributing guide for details.

Contributors

Made with contrib.rocks.

License

MIT © Fabian Piper