KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#typescript #ai-agents #developer-tools #cli #codex #claude-code #react #mcp #open-source #deepseek-harness #dsh-plugin #ai

codemirror-minimap

★ 71 Open GitHub ↗

Minimap extension for Codemirror 6

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Minimap for Codemirror 6

## Installation

```
bun i @replit/codemirror-minimap
```

## Usage

```typescript
import { basicSetup, EditorView } from 'codemirror';
import { showMinimap } from "@replit/codemirror-minimap"

let create = (v: EditorView) => {
  const dom = document.createElement('div');
  return { dom }
}

let view = new EditorView({
  doc: "",
  extensions: [
    basicSetup,
    showMinimap.compute(['doc'], (state) => {
      return {
        create,
        /* optional */
        displayText: 'blocks',
        showOverlay: 'always',
        gutters: [ { 1: '#00FF00', 2: '#00FF00' } ],
      }
    }),
  ],
  parent: document.querySelector('#editor'),
})
```

## Configuration Options

The minimap extension exposes a few configuration options:

**`displayText`**: customize how the editor text is displayed:

```typescript
/**
 * displayText?: "blocks" | "characters";
 * Defaults to "characters"
 */
{
  displayText: 'blocks'
}
```

**`eventHandlers`**: attach event handlers to the minimap container element

```typescript
/**
 * eventHandlers?: {[event in keyof DOMEventMap]?: EventHandler<event>}
 */
{
  eventHandlers: {
    'contextmenu': (e) => onContextMenu(e)
  }
}
```

**`showOverlay`**: customize when the overlay showing the current viewport is visible

```typescript
/**
 * showOverlay?: "always" | "mouse-over";
 * Defaults to "always"
 */
{
  showOverlay: 'mouse-over'
}
```

**`gutters`**: display a gutter on the left side of the minimap at specific lines

```typescript
/**
 * gutters?: Array<Record<number, string>>
 * Where `number` is line number, and `string` is a color
 */
{
  gutters: [ { 1: '#00FF00', 2: 'green', 3: 'rgb(0, 100, 50)' } ]
}
```

## Build and Publish

To build from source:

```
bun build
```

To publish a new version to NPM registry:

```
npm publish
```

codemirror-minimap

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README