Find Nuclei Viewer

Appearance

Embedding in Publications ​

Embed an interactive OME-ZARR viewer in any web page with two lines of HTML. Designed for journals, data portals, and institutional repositories.

Quick Start ​

Add the script once in your page <head>, then place the viewer element anywhere in your content:

html
<!-- 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>

Try it — this is a live viewer:

Pan, zoom, toggle channels, adjust intensity — all interactive. That's it. No build step, no npm, no framework required.

Attribute Reference ​

AttributeRequiredDefaultDescription
urlYes—ZARR store URL (HTTP or S3)
zNo0Initial Z-slice index
tNo0Initial timepoint index
channelsNoautoChannel config (see below)
xNocenterInitial X position (pixels)
yNocenterInitial Y position (pixels)
zoomNofitInitial zoom level (0 = 1:1, negative = zoomed out)
widthNo100%CSS width
heightNoauto (16:9)CSS height
labelsNooff"on" to enable all label overlays, or a label name
imageNo"0"Image/series index for multi-image ZARR stores
backgroundNoblackCanvas background color (black, white, or any CSS color)
controlsNominimal"minimal", "full", or "none"
tokenNo—Bearer token for authenticated sources
themeNodark"dark" or "light"

Channel Configuration ​

The channels attribute uses a compact string format:

index:on/off:hexcolor:min:max

Multiple channels are comma-separated:

html
<find-nuclei-viewer
  url="https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0079A/idr0079_images.zarr"
  channels="0:on:00FF00:8:90,1:on:FF0000:7:80"
></find-nuclei-viewer>

Live — green (lynEGFP) and red (NLStdTomato) channels with custom intensity ranges:

If omitted, channels are auto-detected from the OME-ZARR metadata.

Setting the Initial View ​

Use x, y, and zoom to point the reader at a specific region of interest:

html
<find-nuclei-viewer
  url="https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0079A/idr0079_images.zarr"
  x="500" y="350" zoom="-0.5"
  labels="on"
  width="100%"
  height="350"
></find-nuclei-viewer>

Live — zoomed into the center of the zebrafish embryo with labels enabled:

Finding coordinates

Open the image in the full viewer, navigate to the region you want, then check the URL — it contains zm (zoom) and xy (center) parameters you can copy.

Showing Segmentation Labels ​

If the ZARR dataset contains label images (segmentation masks), enable them with labels="on". Each segmented object gets a unique color. The controls panel includes a label toggle and opacity slider.

html
<find-nuclei-viewer
  url="https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0062A/6001240.zarr"
  labels="on"
></find-nuclei-viewer>

See the first example at the top of this page for a live demo with labels.

RGB Images ​

For RGB brightfield images, set a white background:

html
<find-nuclei-viewer
  url="https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0073A/9798462.zarr"
  background="white"
  width="100%"
  height="350"
></find-nuclei-viewer>

Live — RGB zebrafish brain section with white background and unified brightness slider:

The viewer auto-detects RGB data and shows a unified brightness slider instead of per-channel controls.

Multiple Viewers on One Page ​

You can embed multiple viewers on the same page. Each is independent. Viewers use lazy loading — they only fetch data when scrolled into the viewport.

WebGL Context Limits

Browsers allow ~8–16 WebGL contexts per page. If you embed more than 8 viewers, some may fail to render. The lazy loading behavior (default) helps mitigate this.

Interactive Controls ​

The embedded viewer provides these interactive controls:

  • Channel dots — Click to toggle channels on/off
  • Channel name ▾ — Click to open a color picker (12 scientific color presets)
  • Intensity sliders — Dual-thumb range sliders per channel (min/max)
  • Z-slider — Navigate through Z-slices (if multi-Z)
  • T-slider — Navigate through timepoints (if time series)
  • Labels toggle — Show/hide segmentation overlays with opacity control
  • Fullscreen — Expand the viewer to fill the screen
  • "Open in Find Nuclei Viewer" — Link to the full app with the same view

JavaScript API ​

For programmatic control from your page:

js
const viewer = document.querySelector('find-nuclei-viewer');

// Navigate
viewer.viewer.setZ(10);
viewer.viewer.panTo(500, 300, true);
viewer.viewer.zoomTo(-1, true);

// Change channels
viewer.viewer.updateChannelSettings(0, 100, 3000, true, '00FF00');

// Listen to events
viewer.viewer.on('z-changed', (data) => {
  console.log('Z-slice:', data.z);
});

Style Isolation ​

The embed uses Shadow DOM for complete style isolation. Your page CSS cannot break the viewer, and the viewer CSS cannot affect your page. This is safe to use in any CMS.

More Examples ​

See the Publications Demo for a full showcase with four IDR studies.

CDN & Versioning ​

The embed script is served from:

https://find-nuclei.github.io/embed/v1/viewer.js

The /v1/ path is versioned — future breaking changes will use /v2/, so existing embeds continue to work.

Free. Private. Browser-based.

© 2025-2026 Find Nuclei