WSI Studio
A private, in-browser viewer for whole-slide images. Open, annotate and measure pathology slides without uploading them anywhere.
- Role
- Solo, design + code
- Stack
- TypeScript · Vue · OpenLayers · WebAssembly
- Year
- 2025–2026
- Status
- Active
Why
Whole-slide images are the gigapixel scans of glass microscope slides that pathology runs on. Looking at one usually means installing desktop software or uploading the slide to someone's server, and that is a lot to ask when a file is several gigabytes and may come from a patient.
I wanted to open a slide in a browser tab, draw on it, measure it, and know that nothing ever left my machine.
How it works
The browser reads the slide straight from disk. OpenSlide, compiled to WebAssembly, decodes its tiles in Web Workers, and OpenLayers draws and navigates the view. Nothing is uploaded: not the pixels, the file, its metadata or your annotations. The one exception is the sample slide (Tumor_099 from CAMELYON16), which streams from the server in parts and is decoded locally in the same way.
Annotations stay in memory until you export them. The only thing the app remembers between visits is your theme. Help → Privacy and diagnostics spells this out and checks that your browser supports what the reader needs.
What it does
- Opens Aperio SVS, Hamamatsu NDPI, tiled TIFF and brightfield Leica SCN files, and MIRAX MRXS slides from their folder. A folder opens as a case, with several slides at once in a filmstrip.
- Annotates with rectangles, ellipses, polygons, freehand, a brush (with holes), points and comments, grouped into colour-coded classes, with locks and undo.
- Measures lengths and areas in µm, and exports a region of the slide as PNG or JPEG.
- Shows a coverage overlay of what you have already looked at, at 10× or more.
- Adjusts the display for one slide or all of them without touching the file, with rotation, a grid, a scale bar and magnification presets.
- Exports annotations as GeoJSON or in a format QuPath can open, per slide or as a zip for a whole case.
- Works on phones and tablets too: below 1024 px it switches to a touch layout with a bottom toolbar, a menu drawer and the inspector as a bottom sheet.
Built with
TypeScript and Vue for the interface, OpenSlide.js for reading slides, OpenLayers for the viewer, polygon-clipping for brush strokes and holes, Lucide icons, and IBM Plex type.
Screens
