component

Pan Zoom

A pan and zoom viewport for images, SVG, and any DOM content — shared across Astro, Svelte, and React from one framework-agnostic core. It supports mouse-drag and touch panning, pinch and wheel zooming, keyboard navigation, a live zoom readout, fit modes, fullscreen, and an optional minimap.

Overview

Drag to pan, Ctrl/⌘ + scroll (or pinch) to zoom, and double-click to reset. Focus the viewport for full keyboard control: arrow keys pan, +/- zoom, and 0 resets. The built-in controls zoom in/out, reset, and toggle fullscreen.

AstroReactSvelteVue

PreviewCode

Large content

Set maxZoom to bound how far the user can zoom in. The view always opens fitted to the content with padding.

AstroReactSvelteVue

PreviewCode

---
import PanZoom from "../PanZoom.astro";
import Content from "./_content.astro";
---

<!-- A larger surface that benefits from a max zoom of 3. -->
<PanZoom size="lg" maxZoom={3}>
  <Content />
</PanZoom>

import { PanZoom } from "../PanZoom";
import { Content } from "./_content";

export default function ImageDemo() {
  return (
    <PanZoom size="lg" maxZoom={3}>
      <Content />
    </PanZoom>
  );
}

<script setup lang="ts">
import { PanZoom } from "@pindoba/vue-pan-zoom";
import Content from "./_content.vue";
</script>

<template>
  <PanZoom size="lg" :maxZoom="3">
    <Content />
  </PanZoom>
</template>

SVG content

Any DOM works as content, including inline SVG. Use minZoom/maxZoom to frame the useful zoom range.

AstroReactSvelteVue

PreviewCode

---
import PanZoom from "../PanZoom.astro";
---

<PanZoom size="md" minZoom={0.5} maxZoom={4}>
  <svg
    width="480"
    height="320"
    viewBox="0 0 480 320"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect width="480" height="320" fill="#1e293b"></rect>
    <circle cx="160" cy="160" r="90" fill="#38bdf8"></circle>
    <rect x="260" y="80" width="140" height="140" rx="16" fill="#f472b6"></rect>
    <path
      d="M40 280 L240 40 L440 280 Z"
      fill="none"
      stroke="#fde047"
      stroke-width="4"></path>
  </svg>
</PanZoom>

import { PanZoom } from "../PanZoom";

export default function SvgDemo() {
  return (
    <PanZoom size="md" minZoom={0.5} maxZoom={4}>
      <svg
        width="480"
        height="320"
        viewBox="0 0 480 320"
        xmlns="http://www.w3.org/2000/svg"
      >
        <rect width="480" height="320" fill="#1e293b" />
        <circle cx="160" cy="160" r="90" fill="#38bdf8" />
        <rect x="260" y="80" width="140" height="140" rx="16" fill="#f472b6" />
        <path
          d="M40 280 L240 40 L440 280 Z"
          fill="none"
          stroke="#fde047"
          strokeWidth="4"
        />
      </svg>
    </PanZoom>
  );
}

<script lang="ts">
  import PanZoom from "../pan-zoom.svelte";
</script>

<PanZoom size="md" minZoom={0.5} maxZoom={4}>
  <svg
    width="480"
    height="320"
    viewBox="0 0 480 320"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect width="480" height="320" fill="#1e293b" />
    <circle cx="160" cy="160" r="90" fill="#38bdf8" />
    <rect x="260" y="80" width="140" height="140" rx="16" fill="#f472b6" />
    <path
      d="M40 280 L240 40 L440 280 Z"
      fill="none"
      stroke="#fde047"
      stroke-width="4"
    />
  </svg>
</PanZoom>

<script setup lang="ts">
import { PanZoom } from "@pindoba/vue-pan-zoom";
</script>

<template>
  <PanZoom size="md" :minZoom="0.5" :maxZoom="4">
    <svg
      width="480"
      height="320"
      viewBox="0 0 480 320"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect width="480" height="320" fill="#1e293b" />
      <circle cx="160" cy="160" r="90" fill="#38bdf8" />
      <rect x="260" y="80" width="140" height="140" rx="16" fill="#f472b6" />
      <path
        d="M40 280 L240 40 L440 280 Z"
        fill="none"
        stroke="#fde047"
        stroke-width="4"
      />
    </svg>
  </PanZoom>
</template>

Fit modes

fitMode controls how the view lays content out on open and reset: contain (default, fit with padding), cover (fill the viewport), or actual-size (1:1). Enable showZoomIndicator for a live zoom-percentage readout.

AstroReactSvelteVue

PreviewCode

100%

---
import PanZoom from "../PanZoom.astro";
import Content from "./_content.astro";
---

<!-- `cover` fills the viewport instead of fitting with padding. -->
<PanZoom size="md" fitMode="cover" showZoomIndicator>
  <Content />
</PanZoom>

100%

import { PanZoom } from "../PanZoom";
import { Content } from "./_content";

export default function FitModesDemo() {
  return (
    <PanZoom size="md" fitMode="cover" showZoomIndicator>
      <Content />
    </PanZoom>
  );
}

100%

<script setup lang="ts">
import { PanZoom } from "@pindoba/vue-pan-zoom";
import Content from "./_content.vue";
</script>

<template>
  <PanZoom size="md" fitMode="cover" showZoomIndicator>
    <Content />
  </PanZoom>
</template>

Minimap

showMinimap adds an overview in the corner with a draggable rectangle marking the visible region — drag it to pan large content quickly.

AstroReactSvelteVue

PreviewCode

100%

---
import PanZoom from "../PanZoom.astro";
import Content from "./_content.astro";
---

<!-- The minimap shows the visible slice and is draggable to pan. -->
<PanZoom size="lg" showMinimap showZoomIndicator>
  <Content />
</PanZoom>

100%

import { PanZoom } from "../PanZoom";
import { Content } from "./_content";

export default function MinimapDemo() {
  return (
    <PanZoom size="lg" showMinimap showZoomIndicator>
      <Content />
    </PanZoom>
  );
}

100%

<script setup lang="ts">
import { PanZoom } from "@pindoba/vue-pan-zoom";
import Content from "./_content.vue";
</script>

<template>
  <PanZoom size="lg" showMinimap showZoomIndicator>
    <Content />
  </PanZoom>
</template>

Controlled zoom

The zoom level is controllable and observable. In Svelte use bind:zoom; in React pass zoom + onZoomChange; in Astro seed the initial level with the zoom prop. onPanChange and onFullscreenChange are also available.

AstroReactSvelteVue

PreviewCode

150%

---
import PanZoom from "../PanZoom.astro";
import Content from "./_content.astro";
---

<!-- Seeded at 1.5x with a live zoom-percentage readout. -->
<PanZoom size="md" zoom={1.5} showZoomIndicator>
  <Content />
</PanZoom>

150%

import { useState } from "react";
import { PanZoom } from "../PanZoom";
import { Content } from "./_content";

export default function ControlledDemo() {
  const [zoom, setZoom] = useState(1.5);
  return (
    <PanZoom zoom={zoom} onZoomChange={setZoom} size="md" showZoomIndicator>
      <Content />
    </PanZoom>
  );
}

150%

<script lang="ts">
  import PanZoom from "../pan-zoom.svelte";
  import Content from "./_content.svelte";

  let zoom = $state(1.5);
</script>

<!-- Two-way bound zoom with a live readout. -->
<PanZoom bind:zoom size="md" showZoomIndicator>
  <Content />
</PanZoom>

150%

<script setup lang="ts">
import { ref } from "vue";
import { PanZoom } from "@pindoba/vue-pan-zoom";
import Content from "./_content.vue";

const zoom = ref(1.5);
const onZoomChange = (s: number) => {
  zoom.value = s;
};
</script>

<!-- Controlled zoom with a live readout. -->
<template>
  <PanZoom
    :zoom="zoom"
    :onZoomChange="onZoomChange"
    size="md"
    showZoomIndicator
  >
    <Content />
  </PanZoom>
</template>

Keyboard & accessibility

The viewport is a focusable region with an accessible label. Once focused, arrow keys pan, +/- zoom, and 0 resets. Smooth zoom transitions are skipped automatically under prefers-reduced-motion.

AstroReactSvelteVue

PreviewCode

100%

---
import PanZoom from "../PanZoom.astro";
import Content from "./_content.astro";
---

<!-- Focus the viewport, then use arrows to pan, +/- to zoom, 0 to reset. -->
<PanZoom size="md" showZoomIndicator label="Keyboard-navigable diagram">
  <Content />
</PanZoom>

100%

import { PanZoom } from "../PanZoom";
import { Content } from "./_content";

export default function KeyboardDemo() {
  return (
    <PanZoom size="md" showZoomIndicator label="Keyboard-navigable diagram">
      <Content />
    </PanZoom>
  );
}

100%

<script lang="ts">
  import PanZoom from "../pan-zoom.svelte";
  import Content from "./_content.svelte";
</script>

<!-- Focus the viewport, then arrows pan, +/- zoom, 0 resets. -->
<PanZoom size="md" showZoomIndicator label="Keyboard-navigable diagram">
  <Content />
</PanZoom>

100%

<script setup lang="ts">
import { PanZoom } from "@pindoba/vue-pan-zoom";
import Content from "./_content.vue";
</script>

<!-- Focus the viewport, then arrows pan, +/- zoom, 0 resets. -->
<template>
  <PanZoom size="md" showZoomIndicator label="Keyboard-navigable diagram">
    <Content />
  </PanZoom>
</template>

Custom styling

Every slot is restylable through passThrough, and behavior is tunable via wheelZoomSpeed, pinchSensitivity, constrainToBounds, and more.

AstroReactSvelteVue

PreviewCode

---
import PanZoom from "../PanZoom.astro";
import Content from "./_content.astro";
---

<!-- passThrough restyles slots; wheel zoom is faster and bounds are constrained. -->
<PanZoom
  size="md"
  wheelZoomSpeed={0.15}
  maxZoom={8}
  constrainToBounds
  passThrough={{
    container: {
      style: { borderColor: "primary.border.accent", borderRadius: "lg" },
    },
    controls: { style: { bottom: "lg", right: "lg" } },
  }}
>
  <Content />
</PanZoom>

import { PanZoom } from "../PanZoom";
import { Content } from "./_content";

export default function CustomConfigDemo() {
  return (
    <PanZoom
      size="md"
      wheelZoomSpeed={0.15}
      maxZoom={8}
      constrainToBounds
      passThrough={{
        container: {
          style: { borderColor: "primary.border.accent", borderRadius: "lg" },
        },
        controls: { style: { bottom: "lg", right: "lg" } },
      }}
    >
      <Content />
    </PanZoom>
  );
}

<script lang="ts">
  import PanZoom from "../pan-zoom.svelte";
  import Content from "./_content.svelte";
</script>

<PanZoom
  size="md"
  wheelZoomSpeed={0.15}
  maxZoom={8}
  constrainToBounds
  passThrough={{
    container: {
      style: { borderColor: "primary.border.accent", borderRadius: "lg" },
    },
    controls: { style: { bottom: "lg", right: "lg" } },
  }}
>
  <Content />
</PanZoom>

<script setup lang="ts">
import { PanZoom } from "@pindoba/vue-pan-zoom";
import Content from "./_content.vue";

const passThrough = {
  container: {
    style: { borderColor: "primary.border.accent", borderRadius: "lg" },
  },
  controls: { style: { bottom: "lg", right: "lg" } },
} as const;
</script>

<template>
  <PanZoom
    size="md"
    :wheelZoomSpeed="0.15"
    :maxZoom="8"
    constrainToBounds
    :passThrough="passThrough"
  >
    <Content />
  </PanZoom>
</template>

#Overview

#Large content

#SVG content

#Fit modes

#Minimap

#Controlled zoom

#Keyboard & accessibility

#Custom styling

Overview

Large content

SVG content

Fit modes

Minimap

Controlled zoom

Keyboard & accessibility

Custom styling