Installation
First complete Package access with the private package name,
version, and npm token supplied for your deployment. The package is installed
locally as @tradescript/pro, so application imports remain stable when a new
deployment-specific build is issued.
The core SDK provides framework-neutral
mount(...), update(...), and destroy() lifecycles for the chart, mobile
chart, market depth, time and sales, watchlist, order ticket, account, options,
layout, and trading-terminal surfaces. React and Next.js applications may add
the included React adapters for those same product surfaces.
What you install
| Package | Required | Contains |
|---|---|---|
@tradescript/pro | Yes | Your deployment-specific package installed under a stable local alias; it contains the neutral SDK, stylesheets, workers, and imperative product modules |
@tradescript/pro/react | Only for React hosts that want components | An included subpath with React adapters for the chart and every standalone product surface; React and ReactDOM come from the host application |
Everything is imported from a small set of stable entry points. Import from these paths, never from a deep file inside the package:
| Entry point | Use it for |
|---|---|
@tradescript/pro/sdk/core | createTradeScriptSdk, mount options, and the core types (MarketDataFeed, Bar, ChartApi, SdkSymbolInfo). This is the entry every application needs. |
@tradescript/pro/sdk | Everything else the neutral SDK exports: caching and session datafeed helpers, storage adapters, theme catalogs, alert stores, TradingBrokerAdapter, trading controllers, and imperative product modules |
@tradescript/pro/react | React providers, components, and render-callback contracts over the neutral SDK lifecycle |
@tradescript/pro/sdk/indicators (+ /ta, /math) | Authoring trusted custom indicators |
@tradescript/pro/style.css, @tradescript/pro/tailwind.css | The two stylesheets, imported once per application |
@tradescript/pro/react/style.css | Additional component styles for React adapter consumers, imported once after the Pro stylesheets |
@tradescript/pro/sdk/core is a small bootstrap: it loads the renderer across an
async boundary the first time you create the SDK, so an application that
code-splits the chart route never ships the engine to pages that do not render a
chart.
Compatibility
| Requirement | Supported |
|---|---|
| Frameworks | React, Next.js, Angular, Vue, Nuxt, Svelte, and plain JavaScript — the core lifecycle is framework-neutral |
| React (optional adapter only) | 18, 19, and 20. @tradescript/pro/react declares React and ReactDOM as peer dependencies and uses the application's instances |
| Bundlers | Vite, webpack, Rspack, esbuild, Turbopack, Rollup — the package ships ESM with type declarations |
| TypeScript | 5.0 or newer. Types ship with the package; no @types install is required |
| Node | 20 or newer, declared as engines.node. Required for building only; the runtime is browser-only |
| Rendering | Client-side only. The chart needs a real DOM element, so keep it off the server-rendering path |
Supported browser versions
These are the minimum browser versions a deployment may run:
| Browser | Minimum version |
|---|---|
| Chrome | 98 |
| Edge | 98 |
| Firefox | 94 |
| Safari (macOS) | 15.4 |
| Safari (iOS/iPadOS) | 15.4 |
Android WebView follows the Chrome minimum, and WKWebView on iOS follows the
Safari minimum.
Older browsers are unsupported. The SDK does not check the browser version at startup, so enforce these minimums at your own entry point.
Verifying the minimums
@tradescript/pro publishes a browserslist key, so your build pipeline can
assert compatibility against the same minimums:
npx browserslist --config=node_modules/@tradescript/pro/package.json
The command lists every supported version, so the lowest entry per browser is that browser's minimum.
A change to these minimums is a breaking change, and is listed in the release notes for your build.
Custom builds
The minimums above apply to the standard published build. TradeScript also produces per-customer builds, in which the browser target is fitted to your environment: a lower minimum for a managed estate on older locked browsers, or a higher one to drop compatibility weight you do not need.
Every production build is licensed, certified, and signed for your build and origins, and the browser target is set as part of that build definition. Send your browser baseline to your TradeScript contact to have it applied.
Every framework
Use this for Angular, Vue, Nuxt, Svelte, plain JavaScript, or direct lifecycle
control in React and Next.js. The private package was already installed under
the @tradescript/pro alias in Package access.
Import the lifecycle and styles:
import { createTradeScriptSdk } from '@tradescript/pro/sdk/core';
import '@tradescript/pro/style.css';
import '@tradescript/pro/tailwind.css';
Continue with the framework and widget starters or the framework-neutral quickstart.
Optional React adapters
React and Next.js applications can use the same framework-neutral lifecycle or the React adapters included in the private package:
npm install react react-dom
import { TradeScriptWidget } from '@tradescript/pro/react';
import '@tradescript/pro/react/style.css';
Your application supplies React and ReactDOM. They are optional peer dependencies, so non-React applications do not install either package and the framework-neutral entry points expose no React types.
Continue with the React starter or the Next.js starter.
Add the chart container
Every chart needs an element with a real height:
<div id="chart" style="height: 640px"></div>
A zero-height container produces a blank page even when installation succeeds.
Where the styles belong
Import the two Pro stylesheets exactly once, from the entry point that owns your
application-wide CSS — not from a component that mounts several times, and not
from a scoped or CSS-module stylesheet. React adapter consumers also import
@tradescript/pro/react/style.css once after those Pro stylesheets.
| Framework | Import them from |
|---|---|
| Plain JavaScript, Vite, webpack | Your application entry module (main.ts, index.tsx) |
| React | The root component or entry module |
| Next.js | app/layout.tsx (App Router) or pages/_app.tsx (Pages Router) |
| Angular | src/styles.css, using @import |
| Vue | The application entry (main.ts) |
| Nuxt | The css array in nuxt.config.ts |
| Svelte / SvelteKit | The root layout or entry module |
Scoped component styles do not reach the chart's own DOM, which is the usual cause of a chart that renders but looks unstyled.
Confirm the installation
Start your application and check that:
- the page builds without an unresolved TradeScript import
- the chart container has a non-zero height
- the TradeScript styles are present in the browser bundle
The chart itself appears after you provide a deployment lease and market data in the Quickstart.
Troubleshooting
| Problem | Fix |
|---|---|
| The TradeScript import does not resolve | Confirm that the package is installed in the application that runs your frontend build, then restart the development server. |
| The page is blank | Give the chart container an explicit height and check the browser console for startup errors. |
| The chart appears without styled controls | Import both Pro stylesheets once from your application-wide entry or root layout; React adapter consumers must also import @tradescript/pro/react/style.css. |
| React reports a peer-dependency warning | Confirm that the application uses React 18, 19, or 20. |
Next steps
- Quickstart — mount a chart and load your first bars.
- Framework and Widget Starters — copy-paste starters for React, Next.js, Angular, Vue, Nuxt, and Svelte.
- Production Authorization — the deployment lease the chart needs before it renders in production.