# Code minimap
> Syntax-coloured pixel minimap beside a code view with the visible window outlined; search hits pulse in the margin and dragging scrolls.
- Element: `<px-minimap>`
- React: `import { PxMinimap } from "@/components/lumesec/px-minimap"`
- Collection: Pixel Lab (https://elements.lumesec.ai/components/pixel-lab)
- Registry item: https://elements.lumesec.ai/r/px-minimap.json
- Page: https://elements.lumesec.ai/components/pixel-lab/minimap



Live preview: https://elements.lumesec.ai/view/px-minimap

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-minimap.js"></script>

<px-minimap></px-minimap>
```

## Installation

```bash
npx shadcn@latest add @lumesec/px-minimap
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/px-minimap.json
```

## Usage

React:

```tsx
import { PxMinimap } from "@/components/lumesec/px-minimap";

export function Example() {
  return (
    <PxMinimap />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-minimap.js"></script>

<px-minimap></px-minimap>
```

## Behaviour

A syntax-coloured pixel minimap beside a code file, with the visible window outlined. Search results pulse in the margin; drag the minimap to scroll.

## API reference

### Methods

Call them on the element, for example through a React ref.

| Method                | Description                                                                              |
| --------------------- | ---------------------------------------------------------------------------------------- |
| `find(query: string)` | Highlights every line containing `query` (case-insensitive) and marks it in the minimap. |
| `next()`              | Scrolls to the next match, wrapping around.                                              |

## Keyboard

| Keys                      | Action                  |
| ------------------------- | ----------------------- |
| Enter (in the search box) | Jump to the next match. |

## Accessibility

* The search field is a `type="search"` input with `aria-label="Find in file"`; the match count is an `aria-live="polite"` region.
* The code view is focusable (`tabindex="0"`) with `aria-label="Sample code"`, so it can be scrolled with the keyboard.
* The minimap canvas is a pointer shortcut and is hidden from assistive technology (`aria-hidden`); the code view itself is focusable and scrolls with the keyboard.
* Reduced motion: jumps scroll instantly instead of smoothly and the match markers stop pulsing.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--border`, `--card`, `--foreground`, `--lumesec`, `--lumesec-success`, `--lumesec-warning`, `--muted` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-border`, `--ui-fg`, `--ui-mono`, `--ui-muted`, `--ui-ok`, `--ui-surface`, `--ui-track` and `--ui-warn`.

## Notes

* The code is 140 lines of generated sample JavaScript; there is no attribute for your own source. The search box starts with `flush`.
* The code view and minimap are 220px tall; the minimap is 66px wide.