Core Concepts

Every integration decision in these docs resolves to one question: which side of the boundary owns it. The SDK renders the product surface and holds chart state. Your application supplies market data, trading authority, persistence, and product policy.

Ownership at a glance

The host owns everything on the left and never renders chart internals. The SDK owns everything on the right and never fetches market data, talks to a broker, or persists layouts on its own.

Snippet conventions

Every code sample in these docs assumes three values already exist, created once during application bootstrap:

Value	Where it comes from
sdk	const sdk = await createTradeScriptSdk({ lease: deploymentLease }) — see Production Authorization
datafeed	Your MarketDataFeed implementation — see Datafeeds
chart	const chart = (await mounted.ready()).chart() after a chart mounts

A snippet that starts at sdk.chart.mount(...) is showing one option group, not a complete bootstrap. Pages whose subject is the bootstrap itself — Quickstart, Framework starters, Authorization — always spell it out in full.

The mental model

Concept	What it owns	What it does not own	Start here
Widget	Mount, shared services, optional multi-chart workspace, top-level lifecycle	Market-data credentials, broker risk, backend storage authority	Quickstart
Chart	One symbol/interval view, panes, indicators, drawings, scale and interaction state	Other charts or host application panels	Chart
Controller	Imperative operations for a ready widget/chart	Rendering during construction or server authorization	Chart Controller
Datafeed	Symbol metadata, historical bars, realtime bars, and optional market-data capabilities	Vendor authentication UI or broker state	Datafeeds
Broker adapter	Account, order, position, and execution state plus order intents	Final risk/authorization decisions in the chart	Trading
Storage adapter	Layout, drawing, template, and preference persistence calls	Tenant authorization, database schema, or conflict policy	Storage
Customization	Feature policy, initial appearance, and runtime presentation changes	Market-data or trading semantics	Customization

Lifecycle

Two readiness boundaries separate "the object exists" from "the object is safe to call". Every integration bug in early development is on one side of one of them.

1. The host creates the SDK once from a deployment lease.
2. sdk.chart.mount(...) returns a ChartSdkMount immediately; the surface is still initializing.
3. mounted.ready() resolves with the ChartWidgetApi when widget-level control is available.
4. chart.dataReady() resolves when the chart has usable bars.
5. Controllers perform scoped runtime operations.
6. mounted.destroy() releases chart-owned DOM, subscriptions, and workers.

Do not call chart methods before the relevant readiness boundary. Do not leave a mount alive after its host route or component is destroyed.

Symbols and intervals

A symbol identifies the instrument being rendered. The public metadata type is SymbolInfo; the datafeed resolves strings or partial requests into that canonical form.

An interval is the bar duration used consistently by history, realtime subscriptions, chart controls, and saved state. The public type is ChartInterval.

The datafeed determines which intervals are provided directly and which can be derived. The chart does not invent unsupported market-data semantics.

Widget versus chart

Use the widget for shared services and workspace-level behavior:

const widget = await mounted.ready();
const workspace = widget.workspace();

Use a chart controller for one chart:

const chart = widget.chart();
await chart.dataReady();
await chart.setSymbol('MSFT');

In a multi-chart workspace, address a chart by stable chartId whenever the operation is chart-specific.

Framework integration

Every frontend framework can use the same core lifecycle:

• Use createTradeScriptSdk({ lease }) and a named product module such as sdk.chart.mount(), sdk.marketDepth.mount(), or sdk.tradingTerminal.mount() in Angular, Vue, Nuxt, Svelte, plain JavaScript, React, or Next.js.
• React and Next.js may use TradeScriptWidget from @tradescript/pro/react when a React component is more convenient for the chart surface.

Choose one owner for each mount element and destroy the surface from that framework's component or route teardown.

Next steps

• Production Authorization — exchange your server-side credential for a deployment lease and deliver it safely to the browser.
• Datafeeds — implement MarketDataFeed and connect your own market data.
• Production deployment — bundling, worker assets, CSP, and the production checklist.