Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/backtest-kit/backtest-kit-docs/llms.txt

Use this file to discover all available pages before exploring further.

@backtest-kit/ui is a web-based dashboard for monitoring Backtest Kit strategies in both backtest and live trading modes. It combines a Node.js backend server with a React frontend — one package that ships a complete visualization layer. Instead of spending weeks building custom dashboards, add --ui to your CLI command and get interactive charts, signal tracking, risk rejection logs, and a real-time notification feed out of the box.

​
Install and Launch

npm install @backtest-kit/ui backtest-kit ccxt
The fastest way to start the dashboard is via @backtest-kit/cli: 
npx @backtest-kit/cli --backtest ./src/index.ts --ui
Or start the server programmatically: 
import { serve } from '@backtest-kit/ui';

serve('0.0.0.0', 60050);
Once running, open the dashboard at: 
http://localhost:60050

​
Dashboard Features

Interactive Candlestick Charts

Price charts for 1m, 15m, and 1h timeframes rendered with Lightweight Charts. Signal entry and exit markers are overlaid directly on the candles.

Signal Tracking

Full lifecycle visibility — opened, closed, scheduled, and cancelled signals with entry price, TP/SL levels, and PnL details for each position.

Risk Rejection Monitoring

See every signal that was blocked by your risk rules. Each rejection shows the symbol, reason, and the current market price at rejection time.

Trailing Stop / Breakeven

Visualize trailing stop and take-profit adjustments and breakeven level changes as they happen during live or backtest runs.

Real-Time Notifications

A notification feed for all trading events — signal opens, closes, risk rejections, partial fills, errors, and strategy commits.

Material Design UI

Built with MUI 5 and Mantine components. Clean, responsive interface with i18n support built in.
Each signal view includes:
  • A detailed information form with all position parameters
  • 1m, 15m, and 1h candlestick charts with entry/exit markers
  • JSON export for the full event payload

​
Symbol List Configuration

By default the dashboard shows all symbols from the exchange. To restrict or reorder the list, create a config/symbol.config.ts file in your strategy directory: 
// config/symbol.config.ts
export const symbol_list = [
  {
    icon: '/icon/btc.png',
    logo: '/icon/128/btc.png',
    symbol: 'BTCUSDT',
    displayName: 'Bitcoin',
    color: '#F7931A',
    priority: 50,
    description: 'Bitcoin - the first and most popular cryptocurrency',
  },
  {
    icon: '/icon/eth.png',
    logo: '/icon/128/eth.png',
    symbol: 'ETHUSDT',
    displayName: 'Ethereum',
    color: '#6F42C1',
    priority: 50,
    description: 'Ethereum - a blockchain platform for smart contracts',
  },
];
The CLI resolves the config in priority order: strategy directory → project root → built-in package default. The first match wins.

​
Notification Filter Configuration

Control which notification categories appear in the dashboard by creating a config/notification.config.ts file: 
// config/notification.config.ts
export default {
  signal: true,             // Signal lifecycle: opened, scheduled, closed, cancelled
  risk: true,               // Risk manager rejection notifications
  info: true,               // Informational messages attached to an active signal
  breakeven: true,          // Breakeven level reached
  common_error: true,       // Non-fatal runtime errors
  critical_error: true,     // Fatal errors that terminate the session
  validation_error: true,   // Strategy config / input validation errors
  strategy_commit: true,    // All committed actions (partial close, DCA, trailing, etc.)
  partial_loss: false,      // Partial loss level reached (before commit)
  partial_profit: false,    // Partial profit level reached (before commit)
  signal_sync: false,       // Live order fill / exit confirmations from exchange sync
};
Resolution order is the same as symbol.config: strategy directory → project root → package default.

​
Environment Variables

VariableDefaultDescription
CC_WWWROOT_HOST0.0.0.0UI server bind address
CC_WWWROOT_PORT60050UI server port
CC_WWWROOT_HOST=0.0.0.0
CC_WWWROOT_PORT=60050
The visual Pine Script editor is accessible directly from the UI via the --editor flag. Run npx @backtest-kit/cli --editor to start the server and automatically open http://localhost:60050?pine=1 in your browser. The editor lets you write, run, and iterate on indicators interactively against live exchange data.

Build docs developers (and LLMs) love

Get started for freeTalk to us