https://github.com/user-attachments/assets/e575222a-4639-456f-953c-d728c78761e6

Louper is a tiny magnifying loupe for the web. Hold Option/Alt to magnify. Scroll to zoom from 1x to 10x. Zero dependencies.

Usage

Drop in a script tag:

<script src="https://unpkg.com/louper/dist/auto.global.js"></script>

Or install from npm:

npm install louper

import { louper } from 'louper'

louper()

API

import { louper } from 'louper'

const loupe = louper({
  zoomLevel: 2,          // starting zoom (default: 2)
  radius: 80,            // lens radius in px (default: 80)
  borderWidth: 3,        // lens border in px (default: 3)
  borderColor: 'white',  // lens border color (default: 'white')
  hotkey: 'Alt',         // activation key, or false to disable (default: 'Alt')
})

loupe.activate()              // show the loupe programmatically
loupe.deactivate()            // hide the loupe
loupe.update({ radius: 200 }) // change options on the fly
loupe.destroy()               // remove everything, clean up listeners

Development

pnpm install
pnpm dev
open examples/vanilla/index.html

Acknowledgments

Louper takes full inspiration from a tool shown by Adam Wathan on the Tailwind CSS team.

License

MIT