abdelfattahradwan/svelte-image-viewer

A couple of simple components for displaying content with pan and zoom capabilities.

svelte-image-viewer

A couple of simple components for displaying content with pan and zoom capabilities.

Features

• Pan and zoom capabilities
• Works with any HTML element
• Supports mouse and touchscreen interactions

Demo

Live

https://svelte-image-viewer.vercel.app/

Desktop

msedge_jx2Xc9iyyG.mp4

Mobile

Screen_Recording_20240928_130651_Chrome.2.mp4

Installation

npm

npm install svelte-image-viewer

pnpm

pnpm add svelte-image-viewer

bun

bun add svelte-image-viewer

Getting Started

ImageViewer component

The ImageViewer component is a simple image viewer that displays an image with pan and zoom capabilities.

<script>
  import { ImageViewer } from "svelte-image-viewer";
</script>

<div
  style="position: relative; height: 512px; user-select: none; border: 1px solid white;"
>
  <ImageViewer src="https://picsum.photos/256" />
</div>

Viewer component

The Viewer component displays its children inside a container with pan and zoom capabilities.

<script>
  import { Viewer } from "svelte-image-viewer";
</script>

<div
  style="position: relative; height: 512px; user-select: none; border: 1px solid white;"
>
  <Viewer>
    <img src="https://picsum.photos/256" alt="" />
  </Viewer>
</div>

Support

If you find this project useful, consider supporting it by buying me a coffee:

Your support is appreciated. Thank you!