Getting Started

Follow these steps to create and run a script:

1. Select the script type from the dropdown at the top of the IDE (Indicator, Overlay, or Strategy)
2. The language is auto-selected based on the script type (TypeScript for indicators/overlays, Python for strategies)
3. A starter template will be loaded automatically — modify it to suit your needs
4. Click the ▶ Run button to execute the script on the current chart
5. Use the 💾 Save button to persist the script to the cloud for access across devices

The narrow vertical bar on the far left contains icon buttons:

• 📁 File Explorer — Browse and manage your saved scripts
• 🔍 Search — Search through your scripts and documentation
• 📦 Python Packages — Install packages for Python strategies (e.g., numpy, pandas, ta-lib)
• 📖 Documentation — Open this documentation panel
• ⬅ Toggle Sidebar — Expand/collapse the app sidebar

The sidebar expands when you click an activity bar icon. It shows context-dependent content: file lists, search results, package manager, or documentation.

Shows "Quatick IDE" branding, script type selector (Indicator/Overlay/Strategy), current language badge, undo/redo buttons, and file tabs.

A Monaco-based editor (the same engine as VS Code) with syntax highlighting, IntelliSense, and theme support. It adapts to your app theme automatically.

Tabbed panels at the bottom for Console output, Terminal access, and the Error/Problems list.

TypeScript scripts are transpiled and executed in a sandboxed environment within the chart engine. Output values are plotted on the chart in real-time as new candles arrive.

// After clicking ▶ Run, the chart engine:
// 1. Validates the script exports (metadata, config, calculate/render)
// 2. Initializes the indicator/overlay with current chart data
// 3. Calls calculate() or render() on each bar
// 4. Plots the output on the chart
// 5. Updates in real-time as new data streams in

Python strategies run in Pyodide — a WebAssembly build of CPython 3.11 that runs entirely in the browser. No server needed.

# After clicking ▶ Run, the strategy engine:
# 1. Loads the Python runtime (Pyodide) if not already loaded
# 2. Installs any required packages (numpy, pandas, etc.)
# 3. Passes chart data to the strategy as pandas DataFrames
# 4. Executes the strategy logic
# 5. Collects signals (BUY/SELL/CLOSE) and performance metrics
# 6. Plots signals on the chart and shows backtest results

Scripts are saved to the Quatick backend and synced across devices:

• 💾 Save — Save the current script (Ctrl+S / Cmd+S)
• Scripts are stored with their name, type, language, and content
• Load scripts from the File Explorer in the sidebar
• Double-click a saved script to open it in the editor
• Scripts persist across browser sessions and devices