Architecture overview

Package graph, runtime model, and the contracts that hold ChartForge together.

ChartForge is structured as a small monorepo of single-purpose packages, glued together by stable runtime contracts (Bar, Datafeed, Theme, IndicatorPlugin, DrawingTool). Every public surface is independently versioned; every contract is documented as a TypeScript interface.

Package graph

code

@elitechart/elitechart  ──depends on──┬──> @elitechart/core
                                       ├──> @elitechart/indicators
                                       ├──> @elitechart/drawings
                                       └──> @elitechart/themes

@elitechart/react  ──depends on──> @elitechart/core (peer)
@elitechart/indicators ─peer──> @elitechart/core
@elitechart/drawings   ─peer──> @elitechart/core
@elitechart/themes     ─peer──> @elitechart/core

@elitechart/core — rendering engine, scene graph, branded primitive types, the public Datafeed / Theme contracts.
@elitechart/react — React adapter. Thin: a <Chart /> component plus useChart() and useChartTheme() hooks.
@elitechart/indicators — pure-function technical indicators. Each indicator is its own subpath import for tree-shaking.
@elitechart/drawings — drawing-tool primitives (trend lines, channels, Fibonacci, rectangles, etc.).
@elitechart/themes — darkTheme, lightTheme, plus token helpers.
@elitechart/elitechart — the all-in-one workspace component.

Runtime model

The library is client-only. Anything that mounts a chart needs to do so inside a browser — directly or via a Next.js Client Component.

Rendering runs entirely on the main thread today. The scene graph is designed to allow off-thread vectoring, but a Worker is not yet wired in. Indicator math is pure and synchronous, which keeps the boundary moveable when we ship Workers in a later release.

State lives in three Zustand stores re-exported from @elitechart/elitechart:

useChartStore — symbol, timeframe, kind, drawings, indicators.
useUIStore — bottom-tab selection, sidebar visibility, modals.
useThemeStore — theme overrides, grid visibility.

These stores are SSR-safe — they hydrate from localStorage only on the first client tick. See persistence for the on-disk JSON format.

Contracts

The five contracts below are the API freeze line. Anything else may change between minor releases.

Contract	Defined in	Implemented by
`Bar`	`@elitechart/core`	every datafeed
`Datafeed`	`@elitechart/core`	host app
`Broker`	`@elitechart/core` (preview)	host app
`Theme`	`@elitechart/core`	`@elitechart/themes`
`IndicatorPlugin`	`@elitechart/core`	`@elitechart/indicators` + custom

Module graph at runtime

A typical page using EliteChart pulls in roughly 150 KB gzipped of code (target — see the bundle budget in CLAUDE.md). The breakdown:

Core engine + types: ~80 KB
EliteChart chrome (toolbar, sidebars, modals): ~50 KB
Indicators bundle: ~20 KB (only the ones imported — tree-shaking)
Drawings bundle: ~15 KB (only the ones imported)

Tree-shaking holds because every package uses named exports only and ships ESM-first.

Variations

Adapter packages

The Vue, Svelte, Solid, and Angular adapters are roadmap items in reference/roadmap. Each will mirror the @elitechart/react shape — a thin component + a couple of hooks — so the contracts above don't budge.

API

See the API Reference for the full TypeDoc output, or jump to a contract: