Embeddable Viewer
Interactive microscopy, in any web page.
Drop a full-featured OME-Zarr viewer into journals, data portals, blogs, and wikis with two lines of HTML. No iframe, no build step, no dependencies.
Quickstart
Two lines. That's the install.
<!-- Load once in <head> -->
<script src="https://find-nuclei.github.io/embed/v1/viewer.js"></script>
<!-- Place anywhere in your article -->
<find-nuclei-viewer
url="https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0062A/6001240.zarr"
labels="on"
width="100%"
height="500"
></find-nuclei-viewer>Loads on demand. Each viewer is independent. Shadow DOM keeps your page and the viewer from interfering with each other.
And here it is, running on this page:
Features
Built to drop in.
Two lines of HTML
One script tag, one custom element. No npm, no bundler, no build step.
Shadow DOM isolated
Your page CSS cannot break the viewer. The viewer CSS cannot affect your page.
Versioned and stable
Served from /v1/. Breaking changes ship to /v2/. Your existing embeds keep working.
Multiple per page
Drop in as many viewers as you need. Each one independent, lazy-loaded.
Deep-linkable state
Preset channels, colors, zoom, position, and labels via HTML attributes.
Works with auth
Pass a bearer token attribute to view protected OME-Zarr stores.
Who it's for
Anywhere readers see data.
Journals and preprints
Let readers explore a figure instead of looking at a static screenshot. Works on bioRxiv, medRxiv, and in supplementary HTML.
Data portals and repositories
Replace flat image galleries with live, interactive viewers. Readers navigate full-resolution datasets in context.
Lab wikis and internal docs
Embed live data in Confluence, Notion, or your own documentation. Reviewers see the data, not a screenshot of the data.
Institutional repositories
Add an interactive viewer to your data archive without writing custom frontend code.
Attributes
Control the viewer through HTML.
Every parameter is an HTML attribute. No JavaScript required.
| Attribute | Type | Description |
|---|---|---|
| url | required | URL to the OME-Zarr store (HTTP or S3). |
| channels | string | Compact spec: index:on/off:hexcolor:min:max, comma separated. |
| z, t | number | Initial Z-slice and timepoint. |
| x, y, zoom | number | Position the viewer at a specific region. |
| labels | "on" | Enable segmentation overlays. |
| background | "black" | "white" | White for RGB / brightfield, black for fluorescence (default). |
| token | string | Bearer token for authenticated sources. |
| theme | "dark" | "light" | Viewer theme. |
| controls | "minimal" | "full" | "none" | Control surface density. |
| width, height | CSS value | Dimensions of the viewer frame. |
Full reference in the embedding guide.
Ship interactive data.
Copy the snippet. Paste it in your page. Your readers see the data, not a screenshot of it.