01. Overview of the In-Browser Quant Editor
While pre-built indicators serve general needs, proprietary desks often require bespoke algorithmic filters, customized moving average bands, and unique order flow signals.
The Arkenwell Quant Editor provides a professional-grade, in-browser development environment powered by the Monaco editor (the engine behind modern IDEs) with native TypeScript compilation and ambient type declarations for
@arkenwell/quant.Scripts compile in real time and execute inside isolated background Web Workers, guaranteeing that intensive numeric calculations never freeze or disrupt live charting and market data streaming.
02. The @arkenwell/quant Core Architecture
The Quant SDK is designed around strict deterministic execution. Every custom script exports a default function conforming to the standard indicator lifecycle:
The runtime provides a
QuantContext object containing historical OHLCV candle arrays, user input parameters, the active ticker symbol, and current timeframe. The script returns an IndicatorResult containing rendered visual series and optional trade signal markers.03. The QuantContext & CandleData Interfaces
The runtime environment exposes the following data types:
•
CandleData: { time: number | string, open: number, high: number, low: number, close: number, volume?: number }•
QuantContext: { candles: CandleData[], inputs: InputValues, symbol?: string, timeframe?: string }•
TimeSeriesPoint: { time: number | string, value: number, color?: string }04. Constructing Custom Series Specs
Scripts can render multiple visual layers directly on charts via
QuantSeriesSpec:•
Type Options:
'line', 'histogram', 'area', 'bar', 'scatter'.•
Pane Targeting: Target
'overlay' to render directly on the primary price chart, or 'new' to create an independent sub-panel below the main candles.•
Styling: Configure custom line widths, color schemes, and series titles for legends.
05. Generating Execution Signals & Buy/Sell Markers
Beyond line series, scripts can emit discrete signal objects rendered as visual markers:
•
signals: [{ time: candle.time, type: 'buy' | 'sell', price: candle.close, label: 'RSI OVERSOLD' }]•
Markers render directly at the specified price and timestamp on the main chart, allowing traders to backtest and visually audit trigger precision.
06. Defining Dynamic Input Configurations
To make scripts reusable across different market environments, developers define an
inputs manifest:•
Number Inputs:
{ kind: 'number', default: 20, min: 2, max: 200, step: 1, label: 'Period' }•
Select Dropdowns:
{ kind: 'select', default: 'SMA', options: ['SMA', 'EMA', 'WMA'], label: 'Method' }•
Boolean Toggles:
{ kind: 'boolean', default: true, label: 'Show Bands' }•
Users can adjust these inputs via an interactive UI settings drawer without editing the underlying code.
07. Complete Code Example: Dynamic Volatility Bands
Below is a complete, deployable indicator script implementing dynamic volatility bands:
import { QuantContext, IndicatorResult } from '@arkenwell/quant';
export const manifest = {
name: 'Dynamic Volatility Bands',
inputs: {
period: { kind: 'number', default: 20, min: 5, max: 100, label: 'Lookback' },
multiplier: { kind: 'number', default: 2.0, min: 0.5, max: 5.0, step: 0.1, label: 'StdDev Mult' }
}
};
export default function calculate(ctx: QuantContext): IndicatorResult {
const { candles, inputs } = ctx;
const period = Number(inputs.period || 20);
const mult = Number(inputs.multiplier || 2.0);
const upper = [];
const lower = [];
const basis = [];
for (let i = period - 1; i < candles.length; i++) {
const slice = candles.slice(i - period + 1, i + 1);
const mean = slice.reduce((sum, c) => sum + c.close, 0) / period;
const variance = slice.reduce((sum, c) => sum + Math.pow(c.close - mean, 2), 0) / period;
const stdDev = Math.sqrt(variance);
const t = candles[i].time;
basis.push({ time: t, value: mean });
upper.push({ time: t, value: mean + mult * stdDev });
lower.push({ time: t, value: mean - mult * stdDev });
}
return {
series: {
upper: { type: 'line', data: upper, color: '#10B981', lineWidth: 1, title: 'Upper Band', pane: 'overlay' },
basis: { type: 'line', data: basis, color: '#D48A1F', lineWidth: 1, title: 'Basis', pane: 'overlay' },
lower: { type: 'line', data: lower, color: '#EF4444', lineWidth: 1, title: 'Lower Band', pane: 'overlay' }
}
};
}
08. Performance Constraints & Sandboxing
To preserve terminal stability, scripts execute under strict runtime constraints:
•
Worker Thread Sandboxing: Scripts have no access to the DOM, network
fetch, or storage APIs.•
Execution Timeout (500ms): Scripts exceeding 500 milliseconds are terminated to prevent infinite loops.
•
Memory Ceiling (50MB): Prevents runaway memory leaks during high-frequency recalculation.
09. Arkenwell Terminal Integration
To use the Quant Editor:
1. Open the Interactive Advanced Charting window from any symbol view.
2. Click the Quant Editor (</>) button in the top toolbar to launch the Monaco IDE drawer.
3. Write or paste your script, configure default inputs, and click Run Script.
4. Click Save to Registry to persist the script in your personal workspace profile across sessions.
10. Professional Takeaways
•
The in-browser Quant Editor empowers quantitative desks to build proprietary indicators with native TypeScript typing.
•
Execution in background Web Workers ensures live market data feeds remain smooth and uninterrupted.
•
Deterministic inputs allow rapid scenario testing without modifying underlying script logic.
•
Built-in memory and execution guardrails prevent rogue scripts from destabilizing the trading workspace.
RELATED READING