Tool Quick Reference – OpenSeadragon

What is OpenSeadragon?

OpenSeadragon is a web viewer for very large images, especially whole‑slide and “deep zoom” images.

Clinician analogy:

It’s a digital microscope in the browser. You can zoom and pan around a slide on a website, similar to changing objectives and moving the stage.

It doesn’t store/process images itself—it displays image tiles prepared ahead of time (e.g., with libvips).

What can it do?

• Show a whole slide image in a web page.
• Handle very large images smoothly by loading only visible tiles.
• Support overlays/annotations (with extra code), e.g., markers or heatmaps.

Simple example (conceptual)

const viewer = OpenSeadragon({
  id: "wsi-viewer",
  prefixUrl: "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/4.1.0/images/",
  tileSources: "/wsi/breast-idc-2025-03-01/slide.dzi",
});

HTML container:

<div id="wsi-viewer" style="width: 100%; height: 600px;"></div>

When would a clinician want this?

1. Put WSIs on a website for teaching or portfolios.
2. Get a scanner‑like experience (zoom/pan) in the browser.
3. Let learners and reviewers access slides without special software.
4. Combine text + an embedded interactive slide in the same page.

OpenSeadragon is the viewer on your site; libvips prepares the slide tiles; your web framework (Astro/Starlight) embeds it into pages.

Include/use (for IT/tech person)

Option 1 — Script tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/4.1.0/openseadragon.min.js"></script>

Option 2 — npm:

npm install openseadragon

Then import and create the viewer in a component using your framework’s mount lifecycle.