Introduction to Zoom Image
Zoom Image is a lightweight yet powerful framework-agnostic headless library that brings professional image zooming capabilities to your web applications. Perfect for e-commerce sites, product galleries, and any application requiring detailed image inspection.Quickstart
Get up and running in minutes with our quickstart guide
API Reference
Explore the complete API documentation
Examples
Browse real-world examples and use cases
Framework Adapters
Use pre-built adapters for your favorite framework
Key Features
Zoom Image provides multiple interaction patterns to suit your needs:Zoom on Wheel
Support for scroll wheel and pinch gestures with smooth zooming, panning, and rotation capabilities. Ideal for detailed image inspection.- Mouse wheel zoom with customizable zoom ratios
- Touch pinch-to-zoom support
- Pan and drag when zoomed in
- Double-tap to zoom on mobile devices
- Rotation support with state management
- Image cropping at current zoom level
Zoom on Hover
Display a magnified view in a separate target element when hovering over an image. Perfect for product detail pages.- Customizable zoom target positioning
- Adjustable zoom scale and lens size
- High-resolution image support
- Custom styling options
- Smooth lens tracking
Zoom on Move
Follow the cursor with a magnified view directly on the image. Great for precision work.- Magnified region follows cursor
- No separate zoom target needed
- Lightweight and performant
- Custom zoom source support
Zoom on Click
Toggle zoom in/out on click for touch-friendly interfaces.- Click to zoom in/out
- Touch-friendly interaction
- Simple toggle behavior
- Smooth transitions
Headless & Framework-Agnostic
Zoom Image is built as a headless library, meaning it provides the core functionality without imposing any specific UI or styling. This approach gives you complete control over:- Appearance: Style the zoom components exactly how you want
- Behavior: Customize interaction patterns to match your UX
- Integration: Use with any framework or vanilla JavaScript
@zoom-image/core) works with vanilla JavaScript and can be integrated into any web application. For popular frameworks, we provide convenient adapters that wrap the core functionality with framework-specific patterns:
React
Hooks-based adapter
Vue
Composition API support
Svelte
Store-based integration
Angular
Directive-based approach
Solid
Reactive primitives
Qwik
Resumable components
Architecture
Zoom Image is inspired by leading headless UI libraries:- TanStack: Headless UI pattern for maximum flexibility
- Zag.js: Clean architecture and state machine approach
- React Zoomable Media: Proven zoom interaction patterns
@namnode/store) to provide reactive state updates across all zoom modes, ensuring smooth performance even with complex interactions.
All zoom functions return a cleanup method and state management utilities, making it easy to integrate into any application lifecycle.
Why Choose Zoom Image?
- Tiny bundle size: Optimized for performance without sacrificing features
- TypeScript support: Fully typed for excellent developer experience
- Zero dependencies: Core library has minimal dependencies
- Mobile-first: Touch gestures and mobile interactions built-in
- Accessible: Keyboard and screen reader friendly
- Well-tested: Comprehensive test coverage
- Active maintenance: Regular updates and improvements
Browser Support
Zoom Image works in all modern browsers:- Chrome, Edge, Safari, Firefox (latest versions)
- iOS Safari 12+
- Android Chrome 88+