Getting Started

Introduction Quickstart Installation Mental Model

Runtime

CanvasRuntime CanvasSurface registerSurface()paintOnce()Invalidation Cleanup

Guides

Export a PNG Convert coordinates Sync transforms

Examples

Prism Atlantic React Composer Lite Pie Chart

Reference

API Types

Examples

Prism Atlantic

A vanilla TypeScript data-viz example with canvas storm tracks and Prism-managed HTML/CSS surfaces.

Prism Atlantic is a vanilla TypeScript example using real NOAA/NHC HURDAT2 storm-track data.

It renders hurricane tracks on canvas and uses Prism-managed HTML/CSS surfaces for the title, overview, legend, tooltip, detail panel, caption, and export button.

The example demonstrates Prism in a data-viz canvas app: the app owns the data and chart logic, while Prism owns registration, paint lifecycle, readiness, and cleanup for the HTML surfaces.

Sync transforms

Keep app-owned transforms aligned with Prism-managed surface bounds.

React Composer Lite

A React example using component-authored surfaces in a canvas composition.