1# numbl figure viewer
3A small browser app that opens a `.h5` **figure file** exported from
4[numbl](https://numbl.org) and renders it — reusing numbl's own figure
5components via the `numbl/graphics` package export.
7In numbl (or its IDE / plot viewer) you can download any figure's data as a
8self-describing HDF5 file (numeric data as gzip-compressed datasets, styling as
9attributes). Drop that file here to view it again outside numbl.
11## How it works
13```ts
14import { importFigureHdf5, FigureView } from "numbl/graphics";
16const figure = await importFigureHdf5(bytes); // .h5 → FigureState
17// <FigureView figure={figure} />
18```
20`importFigureHdf5` parses the HDF5 file (via lazily-loaded h5wasm) into the same
21`FigureState` numbl renders internally, and `FigureView` draws it.
23## Develop
25```bash
26npm install # numbl is a local file: dependency (../../numbl)
27npm run dev
28```
30> This app consumes `numbl` as `file:../../numbl`. Build the numbl graphics
31> bundle first (`npm run build:graphics` in the numbl repo) so
32> `numbl/graphics` resolves.
34## Build
36```bash
37npm run build # → dist/
38npm run build:pages # base path for GitHub Pages project site
39```