The minimap is a scaled side-rail showing the full document structure beside the reading view. It gives you spatial orientation in long documents and lets you jump to any section by clicking or dragging.
How it works
The minimap is a scaled visual clone of the rendered document, generated by calling source.cloneNode(true) on the live reading area and inserting it into the minimap rail at the computed preview scale. A viewport indicator overlays the portion currently visible. As you scroll, the indicator moves in lockstep. Clicking anywhere on the minimap scrolls the document to that position; dragging the viewport indicator keeps the handle offset so the document tracks naturally under your pointer.
The minimap uses three CSS custom properties to stay in sync without repainting on every scroll event:
--minimap-preview-top — translates the preview up or down as you scroll--minimap-viewport-top — positions the viewport indicator within the rail--minimap-viewport-height — sizes the indicator proportionally to the reader window
A requestAnimationFrame-throttled loop writes those properties on scroll and resize, so the rail stays fluid without blocking the main thread.
Document model
Internally, build_minimap_model() produces a DocumentMinimap from the raw Markdown source — a series of MinimapSpan entries that record each line’s category and structure without storing any source text:
pub struct DocumentMinimap {
pub line_count: usize,
pub spans: Vec<MinimapSpan>,
}
pub struct MinimapSpan {
pub start_line: usize,
pub line_count: usize,
pub category: MinimapLineCategory,
pub structure: MinimapLineStructure,
}
category is one of Heading, Paragraph, Blank, List, Blockquote, or CodeFence. Adjacent lines that share the same category and structure are compressed into a single span, so even a 20 000-line document produces a compact model. The model is serialized as JSON and handed to the WebView alongside the rendered HTML — the frontend uses it to decide whether to render the minimap at all (an empty or zero-line document skips it).
Responsive behavior
The minimap adjusts its preview lane width depending on the available space:
| Breakpoint | Preview width |
|---|
| > 900 px | 68 px |
| 601–900 px | 46 px |
| ≤ 600 px | 38 px |
Toggling the minimap
The minimap can be toggled from Settings in the app bar. The setting is persisted across restarts via {config_dir}/leaftext/settings.json as the minimap_enabled field, so leaftext reopens in the same state you left it.
When the minimap is off, the reading layout switches from a two-column grid to a centred single-column layout (reader-layout-no-minimap) so no empty gutter remains to the right of the document.
Use the minimap to quickly gauge document length and find dense sections at a glance. Because the minimap is a scaled clone of the rendered document, code blocks, tables, and images all appear as they would in the main reading view — just shrunk to fit the rail.