If you are looking for HOWTOs, tutorials, or general Micrio help, please check out our searchable Knowledge Base at:
This application is open source and is available on GitHub:
https://github.com/Q42/Micrio.Client
If you are using Micrio inside your project, and have custom CSS and/or using the JS API, check out this document which has all changes from earlier versions:
https://doc.micr.io/client/v7/changes.html
For the npm package @micrio/client, see https://www.npmjs.com/package/@micrio/client
This repository contains the source code for the Micrio Client — a pure Web Component (<micr-io>) built with TypeScript. It renders high-resolution zoomable images using WebGL, manages state via a custom store API, and handles user input (mouse, touch, keyboard, gesture) through its own event system.
Key source directories under ./src/:
| Directory | Purpose |
|---|---|
core/ |
Element definition, image model, camera, state management, store API |
render/ |
WebGL engine, canvas management, tiling |
ui/ |
UI component definitions and icon set |
grid/ |
Grid layout and interaction |
gallery/ |
Gallery (swipe/switch) controller |
media/ |
Video tour and embedded video controllers |
types/ |
TypeScript type definitions and models |
Make sure you have Node >= 18.17 and pnpm installed.
From this directory, run:
$ pnpm iTo start the dev server:
$ pnpm run devThis starts Vite on http://localhost:2000/. Changes to ./src/ are picked up via hot reload.
$ pnpm run typecheckThis runs tsc with the project's tsconfig.json.
$ pnpm run buildThis will:
- Bundle the source with Vite (IIFE, minified via Terser)
- Generate TypeScript declaration files from the docs entry point
- Assemble CSS from component static styles
Output lands in ./public/dist/:
micrio.min.jsmicrio.min.d.ts
To test the compiled version, edit ./index.html to load the production JS rather than the dev module.
- Technical documentation: https://doc.micr.io/
- Reproducible issues: https://support.micr.io/
- General inquiries: support@micr.io
Good luck!