@microscope-js/renderer-image

Image renderer for microscope-js. Uses the browser's native <img> element — sub-kilobyte runtime, every codec your browser already ships.

Install

pnpm add @microscope-js/renderer-image

Use

import { createRegistry, mount } from '@microscope-js/core';
import { imageRenderer } from '@microscope-js/renderer-image';

const registry = createRegistry([imageRenderer]);
await mount({ source: file, container, registry });

Format support

| Extension | MIME | | ----------------------------------- | --------------------- | | .png | image/png | | .jpg / .jpeg | image/jpeg | | .gif | image/gif | | .webp | image/webp | | .svg | image/svg+xml | | .avif | image/avif | | .bmp | image/bmp | | .ico | image/vnd.microsoft.icon |

Browser-native decoding — if your target browsers support a format, this renderer supports it.

Security model

• SVGs are mounted via <img src="blob:…">, not inline. Inline <svg> would let arbitrary <script> and event handlers run; <img>-loaded SVGs are sandboxed by the browser and cannot execute scripts or fetch external resources.
• Object URLs created for the source are revoked on destroy().
• No HTML is built from the source — no DOMPurify needed.

See also

• @microscope-js/renderer-video · @microscope-js/renderer-audio — sibling native-element renderers
• @microscope-js/react — React adapter
• Repository · Live demo · API docs

License

MIT