Installation
Zoom Image can be installed via npm, yarn, or pnpm. You can also use it directly from a CDN for quick prototyping.
Package Manager Installation
Choose your preferred package manager below. All examples use the same API.
Core Library
The core library provides vanilla JavaScript functions that work in any environment:
npm install @zoom-image/core
Framework Adapters
For framework-specific integrations, install the appropriate adapter along with the core library:
React
Vue
Svelte
Angular
Solid
Qwik
Preact
npm install @zoom-image/core @zoom-image/react
React adapter requires React 18.0.0 or higher.
npm install @zoom-image/core @zoom-image/vue
npm install @zoom-image/core @zoom-image/svelte
npm install @zoom-image/core @zoom-image/angular
npm install @zoom-image/core @zoom-image/solid
npm install @zoom-image/core @zoom-image/qwik
npm install @zoom-image/core @zoom-image/preact
CDN Usage
For quick prototyping or simple projects, you can load Zoom Image directly from a CDN:
unpkg
<script src="https://unpkg.com/@zoom-image/core@latest/dist/index.global.js"></script>
jsDelivr
<script src="https://cdn.jsdelivr.net/npm/@zoom-image/core@latest/dist/index.global.js"></script>
CDN Example
Here’s a complete example using the CDN:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zoom Image CDN Example</title>
<style>
.zoom-container {
width: 400px;
height: 400px;
cursor: crosshair;
overflow: hidden;
}
.zoom-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div id="zoom-container" class="zoom-container">
<img src="your-image.jpg" alt="Zoomable image">
</div>
<script src="https://unpkg.com/@zoom-image/core@latest/dist/index.global.js"></script>
<script>
const container = document.getElementById('zoom-container');
const zoomImage = ZoomImage.createZoomImageWheel(container, {
maxZoom: 4,
wheelZoomRatio: 0.1
});
</script>
</body>
</html>
When using the CDN, all exports are available under the global ZoomImage namespace.
Version Pinning
For production applications, it’s recommended to pin to a specific version:
TypeScript Support
Zoom Image is written in TypeScript and includes type definitions out of the box. No additional @types packages are needed:
import { createZoomImageWheel, type ZoomImageWheelOptions } from '@zoom-image/core';
const options: ZoomImageWheelOptions = {
maxZoom: 4,
wheelZoomRatio: 0.1
};
const container = document.getElementById('zoom-container') as HTMLElement;
const zoomImage = createZoomImageWheel(container, options);
Next Steps
Quickstart Guide
Build your first zoom implementation
Core API Reference
Explore all available options
Examples
See real-world implementations
React Guide
Learn about the React adapter
Examples
See real-world implementations