Vizarr Viewer

vizarr is a minimal, client-side image viewer from Harvard Medical School’s Department of Biomedical Informatics (HMS-DBMI) for Zarr-based images that follow the OME-NGFF (OME-Zarr) specification. Built on Viv for GPU-accelerated rendering, it supports efficient, interactive exploration of large multiscale microscopy datasets in the browser. This package provides an AnyWidget wrapper so you can embed vizarr in any MyST Markdown document or Curvenote article by pointing at a public OME-Zarr source URL.

Live example¶

The viewer below loads a zebrafish embryo dataset from the Image Data Resource (IDR). Tiles are fetched on demand as you pan and zoom.

Code:

:::{any:bundle} https://curvenote.github.io/widgets/widgets/vizarr-viewer.js
{
  "source": "https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/4495402.zarr",
  "height": "600px"
}
:::

Installation¶

Download vizarr-viewer.js from this package and host it where you serve static assets (e.g. a MyST site’s public/ folder or a CDN). In published articles or cross-repo use, you can reference the stable build by ...

Usage¶

Add a vizarr viewer with the any:bundle directive. The directive body is a JSON object; only source is required.

:::{any:bundle} https://curvenote.github.io/widgets/widgets/vizarr-viewer.js
{
  "source": "https://example.com/path/to/your/data.zarr",
  "height": "500px"
}
:::

Data format¶

The viewer expects datasets in OME-NGFF (OME-Zarr) format: chunked, multiscale arrays stored in Zarr, typically on cloud object storage (e.g. S3). Many public repositories (including the IDR) expose OME-Zarr. If your data is in another format (e.g. OME-TIFF), it must be converted to OME-Zarr for use with this widget.

How it works¶

The widget is an ESM module that loads the vizarr library at runtime from HMS-DBMI’s CDN. When the directive is rendered, it creates a viewer container, initializes vizarr with the given source URL, and adds the image layer. All tile loading and rendering happen in the reader’s browser; no proxy or backend is required. The underlying Viv stack uses WebGL for GPU-accelerated multiscale rendering.

Source¶

• Widget: dev.curvenote.components — vizvarr

• vizarr: hms-dbmi/vizarr

• Viv: hms-dbmi/viv

Further reading¶

• vizarr (HMS-DBMI) — client-side Zarr/OME-NGFF viewer

• OME-NGFF — Next Generation File Format for microscopy

• Visualizing OME Microscopy Data using Vizarr (opensci.dev) — article with additional examples and OME-Zarr background

• AnyWidget — widget model used by this package

• MyST Markdown widgets