# Minimap

::alert
This guide is based on the [Basic](https://retejs.org/docs/guides/basic) guide. It is recommended to review it for a comprehensive understanding of this guide.
::

::references
  :::ref-example{link="/examples/minimap" title="Minimap"}
  :::

  :::ref-github{link="https://github.com/retejs/minimap-plugin" title="Plugin"}
  :::
::

## Install dependencies

::kit
::

```bash
npm i rete-minimap-plugin
```

## Prepare nodes

Predefined node sizes are necessary for the minimap plugin as they are displayed on the minimap with their respective dimensions.

```ts
class Node extends ClassicPreset.Node {
  width = 190;
  height = 120;
}
class Connection<N extends Node> extends ClassicPreset.Connection<N, N> {}

type Schemes = GetSchemes<Node, Connection<Node>>;
```

## Plugin connection

```ts
import { MinimapExtra, MinimapPlugin } from "rete-minimap-plugin";

type AreaExtra =
  // ...
  | MinimapExtra

const minimap = new MinimapPlugin<Schemes>()();

area.use(minimap);
```

But this is not sufficient as the render plugin is responsible for visualization

## Rendering the minimap

Currently, the visualization of the minimap is possible using rendering plugins for **React.js**, **Vue.js**, **Angular**, **Svelte** and **Lit**.

```ts
import { Presets } from "rete-react-plugin"; // or  rete-vue-plugin, rete-angular-plugin, rete-svelte-plugin, @retejs/lit-plugin

render.addPreset(Presets.minimap.setup({ size: 200 }));
```

For a comprehensive guide on how to connect a specific renderer plugin to your stack version, please follow the guide for
[React.js](https://retejs.org/docs/guides/renderers/react), [Vue.js](https://retejs.org/docs/guides/renderers/vue), [Angular](https://retejs.org/docs/guides/renderers/angular), [Svelte](https://retejs.org/docs/guides/renderers/svelte) or [Lit](https://retejs.org/docs/guides/renderers/lit)

The minimap is automatically inserted into your editor and has absolute positioning. If your editor is smaller than the viewport, your editor's container should have `position: relative`.

Check out the complete result on the [Minimap](https://retejs.org/examples/minimap) example page.