dom-minimap

A true-render minimap for HTML documents — the strip on the right of this page. Unlike canvas-based minimaps that reduce every element to a grey box, dom-minimap scales a live clone of the DOM, so everything below — the Mermaid diagram, the KaTeX equations, the inline SVG, the code — is pixel-faithful in miniature. Click, drag, or scroll the strip to navigate.

Source on GitHub · MIT licensed · no dependencies · one file

Mermaid

Mermaid emits inline SVG with id-scoped styles and url(#…) references. A canvas approximation shows a grey rectangle; here the diagram itself appears in the minimap.

flowchart LR
    E[Editor] -->|markdown| C(Core)
    C -->|HTML| P[Preview]
    P --> M[dom-minimap]
    M -.->|scroll| P

KaTeX

Math renders as styled HTML spans, which canvas minimaps can't draw at all.

Inline SVG

This hand-written SVG uses a marker-end="url(#a)" reference — it regression-tests the clone's id preservation: strip the ids and the arrowhead vanishes in the miniature.

Editor Preview Minimap

A long document

The rest of the page is generated filler so the miniature exceeds the strip height — scroll to see the Monaco-style “fit” behavior, where the miniature slides to keep the visible region in view.