> ## Documentation Index
> Fetch the complete documentation index at: https://svelvet.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Minimap

> Plugin component that displays a map of all nodes on the canvas

## Getting started

The Minimap component can be rendered by either passing the shorthand prop `minimap` to the Svelvet component or by passing the entire Minimap component as a child, allowing further configuration via props.

Nodes can be hidden/unhidden on the Minimap if you pass the `hideable` prop.

<Note>When passing the component to Svelvet, you must specify slot="minimap"</Note>

```HTML App.svelte theme={null}
<script>
  import { Svelvet } from 'svelvet';
</script>

<Svelvet>
  <Minimap width="{100}" corner="NE" mapColor="blue" slot="minimap" />
</Svelvet>
```

## Props

<ResponseField name="corner" type="enum" options="NW | SW" default="SE">
  Controls corner placement of the Minimap component.
</ResponseField>

<ResponseField name="width" type="number" default="100">
  Width dimension of the Minimap component.
</ResponseField>

<ResponseField name="height" type="number" default="0">
  Height dimension of the Minimap component. If not passed, Minimap will render out as a square with
  both dimensions equal to the width value.
</ResponseField>

<ResponseField name="hideable" type="boolean" default="false">
  Boolean controlling whether Nodes can be hidden by clicking on their Minimap representation.
</ResponseField>

<ResponseField name="mapColor" type="CSS Color String" default="theme dependent">
  Background color of minimap.
</ResponseField>

<ResponseField name="nodeColor" type="CSS Color String" default="Node Color">
  Color of the minimap node elements. Defaults to actual node color.
</ResponseField>

<ResponseField name="borderColor" type="CSS Color String" default="theme dependent">
  Border color of the Minimap wrapper.
</ResponseField>