Skip to content

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-charts

Using React? Install it alongside. It is an optional peer dependency, so framework-neutral apps never load it.

With React
npm install @aeristerminal/aeris-charts react

2. 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.

main.ts
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.

Vite
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.