Minimap

The Minimap component is a small, floating overview widget that gives users a bird's-eye view of a large virtual canvas. It renders colored rectangles for every item on the board and a white viewport indicator showing the currently visible area.

Users can click or drag anywhere inside the minimap to instantly teleport the main viewport to that region of the canvas.

It's designed to pair perfectly with our DraggableCanvas, PhysicsCanvas, or ForceGraph components, but it works with any scrollable or pannable surface since it uses a fully controlled props API.

Live Preview

Installation

[!TIP] Controlled Architecture: The minimap is fully controlled via props. It does not manage its own scroll state. This makes it trivially composable with any canvas system—just wire up viewportX, viewportY, and onViewportChange.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { Minimap } from "@/components/creative/minimap";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { Minimap } from "@/components/creative/minimap";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <Minimap
        canvasWidth{10}
        canvasHeight{10}
        viewportX{10}
      />
    </div>
  );
}