• Zoom Image
• Development
• Commands
  • With Docs
  • With Preact
  • With React
  • With Remix
  • With Next
  • With Svelte
  • With Svelte 5
  • With Vanilla JS
  • With Vue
  • With Solid
  • With Qwik
• Relevant projects
• Sponsor
• License

A little yet powerful framework agnostic headless library to zoom images on the web. It is a typical experience on e-commerce sites. Examples are written with Preact, React, Svelte, Vanilla JS and Vue.

• ✅ Zoom on wheel (scroll & pinch)
• ✅ Zoom on hover
• ✅ Zoom on move
• ✅ Zoom on click

git clone https://github.com/willnguyen1312/zoom-image
cd zoom-image
pnpm install
pnpm build

Please change all versions from "latest" to "workspace:*" inside the example project you want to start, run pnpm install before executing one of the commands below. I wanted to keep those packages for Stackblitz usage so I use "latest", unfortunately pnpm doesn't understand it during local development 🙈

pnpm start-docs

pnpm start-preact

pnpm start-react

pnpm start-remix

pnpm start-next

pnpm start-svelte

pnpm start-svelte-5

pnpm start-vanilla

pnpm start-vue

pnpm start-solid

pnpm start-qwik

• react-zoomable-media - The library I wrote for my previous company
• zagjs - The project's architecture is inspired by this library
• TanStack - The project's core headless pattern is heavily inspired by this project - Headless UI
• js-image-zoom - The internal working of zoom image on hover is inspired by this library

MIT © Nam Nguyen