Monaco editor minimap: add an overview without crowding the source

A developer reviewing a long, generated HTML report may need to move between the page styles near the beginning and repeated sections near the end. A small overview can help on a wide review screen. In a narrow split pane, the same overview can take space away from the lines being inspected.

Configure the overview on the existing editor

Add these options to the application's initialized Monaco instance:

editor.updateOptions({
  minimap: {
    enabled: true,
    side: 'right',
    renderCharacters: false,
    showSlider: 'always',
    maxColumn: 80
  }
});

renderCharacters: false draws blocks instead of tiny characters. showSlider: 'always' keeps the viewport indicator available without requiring a hover first. maxColumn limits how many source columns the minimap renders; it is not a CSS pixel width and does not truncate the document.

The Monaco HTML integration supplies the model, container, and language setup. Its introductory example disables the minimap to preserve editing space. Enable it when the document and available panel width justify the extra navigation surface.

Make visibility an explicit view choice

For a review interface with a visible “Source overview” checkbox, its change handler can use:

function setSourceOverview(visible) {
  editor.updateOptions({
    minimap: { enabled: Boolean(visible) }
  });
}

Keep the current model and editor alive when toggling the option. The source text, current selection, and unsaved changes belong to the open document. A navigation preference should not replace that document with a fresh model.

If your application hides the overview automatically below a particular panel width, measure the editor's container rather than assuming that window width equals available editor space. A sidebar, split view, or neighboring preview can consume much of a large window. Retain an intentional user choice if your product allows one, and keep the checkbox state consistent with the policy actually applied.

Test it with a document long enough to navigate

Use a local development copy containing recognizable beginning, middle, and ending sections. Open the minimap and click near each target. Read the resulting source section in the main pane; do not assume that a small colored region uniquely identifies the section you wanted.

Next, select a phrase in the main editor, make a small unsaved edit, and toggle the overview off and on. Confirm that the edit and selected document remain. Read editor.getModel().getValue() if you need to compare the source before and after the view change.

At the narrow layout, check the main source first. If the overview makes an attribute value difficult to inspect, turn it off or change the layout. Soft wrapping in Monaco addresses long source lines separately. Finish the review by locating the intended source section and reading its actual text at a usable size.