Getting started
Installation
Install the package from npm and load the engine in your bundler.
Requirements
- Node.js 18 or newer for installing and building.
- A modern browser with WebAssembly. WebGPU is used when available; Canvas2D is the automatic fallback.
- An ES module bundler or runtime, such as Vite, Next.js, webpack, esbuild, or Bun. The package is ESM only.
- React 18.2 or newer, only if you use the React adapter.
1. Install the package
Aeris Charts is open source and published to the public npm registry, with npm provenance. Install it like any other package: no .npmrc, registry setting, or token is needed.
npm install @aeristerminal/aeris-chartsUsing React? Install it alongside. It is an optional peer dependency, so framework-neutral apps never load it.
npm install @aeristerminal/aeris-charts react2. Import the stylesheet
Import the design system once, at your app entry. It styles the chart chrome and carries the light and dark theme variables.
import "@aeristerminal/aeris-charts/design.css";Loading the WebAssembly engine
The engine binary ships next to the JavaScript entry and loads automatically the first time you create a chart. Most bundlers need no setup.
If your bundler moves assets and cannot resolve the binary, import its URL from the /wasm export and pass it to initWasm() once, before the first chart. Later calls do nothing.
import { initWasm } from "@aeristerminal/aeris-charts";
import wasmUrl from "@aeristerminal/aeris-charts/wasm?url";
await initWasm(wasmUrl);Server rendering
Charts need a DOM element, so create them in the browser only. In React, the adapter already does this: importing it on the server is safe, and chart creation starts after the component mounts. In other frameworks, create the chart in your client-side mount hook.