Data Display

ZoomPanViewer

Interactive viewport for zooming and panning images, diagrams, and rendered Mermaid content.

import { ZoomPanViewer } from '@lostgradient/cinder/zoom-pan-viewer';
zoom-pan-viewer
01

Overview

An accessible viewport for panning and zooming images, SVGs, and Mermaid diagrams.

Usage

svelte 
<script lang="ts">
  import { ZoomPanViewer } from '@lostgradient/cinder/zoom-pan-viewer';
</script>

<ZoomPanViewer ariaLabel="Architecture diagram">
  {#snippet children()}
    <div
      style="min-width: 36rem; min-height: 12rem; padding: 3rem; background: var(--cinder-surface-raised);"
    >
      Architecture diagram
    </div>
  {/snippet}
</ZoomPanViewer>
Live preview
Architecture diagram
02

When to use

Use when
  • Viewing large images or SVG diagrams that need pointer and keyboard navigation.
Avoid when
  • Showing ordinary responsive media that does not need a viewport transform.
03

Examples

Basic zoom and pan viewer

Inspect a large surface with pointer zoom and pan controls.

04

Props

Props for zoom-pan-viewer
Name
Type
Default
Description
children required snippet
scale bindable number 1
onTransformChange (transform: { scale: number; x: number; y: number }) => void
ariaLabel text 'Zoomable viewer'
onkeydown KeyboardEventHandler<T>undefinednull
onwheel WheelEventHandler<T> | undefined | null
onpointerdown PointerEventHandler<T>undefinednull
onpointermove PointerEventHandler<T>undefinednull
onpointerup PointerEventHandler<T>undefinednull
onpointercancel PointerEventHandler<T>undefinednull