CodeLab Overview

CodeLab is ChartLabs' built-in script editor for creating custom technical indicators using TypeScript.

Features

• Monaco Editor -- Full code editor with syntax highlighting, IntelliSense, and error diagnostics
• Script SDK -- TypeScript SDK providing OHLCV data, built-in math functions, and plot utilities
• Live Preview -- See your indicator on the chart as you develop
• Templates -- Start from pre-built templates for common patterns
• Publish -- Share indicators with the community via the marketplace

Opening CodeLab

Click the CodeLab icon in the left sidebar. The editor opens in the bottom panel.

How It Works

1. Write -- Create a TypeScript class extending Script and implement calculate()
2. Compile -- Real-time TypeScript compilation
3. Run -- calculate() is called once per bar, first bar to most recent
4. Plot -- Use plot(), plotHistogram(), plotColor(), and hline() to render output

Script Structure

import { Script, input, plot, color } from '@chartlabs/script-sdk';

export default class MyIndicator extends Script {
  length = input.number('Period', 14, { min: 1, max: 200 });
  source = input.source('Source', 'close');

  calculate() {
    const ma = this.sma(this.source, this.length);
    plot('MA', ma, { color: color.blue, width: 2 });
  }
}

See the SDK Reference for the complete API.