Simple and extendable pan and zoom library for 1D and 2D content and visualizations, on mobile and desktop.

Usage no npm install needed!

<script type="module">
  import easypzAs from 'https://cdn.skypack.dev/easypz-as';



Notice: This is an unofficial extension of EasyPZ by asmape0104. EasyPZ is originally provided by michaschwab

New Feature

ver 1.0.0

  • CommonJS style export
  • Zoom speed adjustment
  • Rotate (Beta)

ver 1.0.1

  • Rotate (Stable)

The following is the original readme.


Use this Javascript library to make your web visualization interactive via pan and zoom, for mobile and desktop!

EasyPZ supports many interactions for panning and zooming, including wheel, pinch, double click, hold, brush, rub, and dynamic zoom, panning methods including default, flick, and many variations.

Many examples can be found at easypz.io, including examples using d3, and examples that use canvas instead of SVG. Examples from the d3 gallery that just magically turn into navigatable visualizations without a single line of code can be found at demos.easypz.io.

Instructions on how to use EasyPZ, explanations for the many options, as well as how to extend EasyPZ with your own pan or zoom method, can be found in the Wiki!



  • Basic support for rotate, skewX and skewY, and two different scales for X and Y.
  • Add a new zoom method: shift drag zoom.


  • Allowed switching between mouse- and touch-based interactions on hybrid devices.


  • EasyPZ instances now check if new modes of pan and zoom are available when settings change.


  • Allowed disabling EasyPZ by setting the enabled modes to an empty list.


  • Added a .setSettings method to EasyPZ to allow changing settings.
  • Changes in the settings set via HTML are now detected and applied to EasyPZ using the .setSettings method.
  • Increased the frequency of the settings observation from 2s to 0.5s.


  • Made the default functionality to be applyTransformTo: "svg > *" for when the easypz attribute is not set.

Known Issues

Currently none.