interact.js offers two sets of packages that you can add to your project:

  1. To get started quickly, you can use the package named interactjs on npm. This package contains all the features of the library already pre-bundled.
  2. If you'd like to keep your JS payload small, there are npm packages under the @interactjs/ scope which let you choose which features to include. These packages are distributed as ES6 modules and may need to be transpiled for older browsers.

npm pre-bundled

# install pre-bundled package with all features
$ npm install --save interactjs
// es6 import
import interact from 'interactjs'
// or if using commonjs or AMD
const interact = require('interactjs')

To use the pre-bundled package with npm, install the package as a dependency with npm install interactjs then import or require the package in your JavaScript files.

CDN pre-bundled

<script src=""></script>
<!-- or -->
<script src=""></script>

You can also use the jsDelivr or unpkg CDNs by adding a <script> tag pointing to their servers.

interact is exposed as a CommonJS module, an AMD module, or a global variable depending on what the environment supports.

# install just the type definitions
$ npm install --save-dev @interactjs/types

If you're using the library only through a CDN and want the TypeScript type definitions for development, you can install the @interactjs/types package as a dev dependency.

npm streamlined

# install only the features you need
$ npm install --save @interactjs/interact \
  @interactjs/auto-start \
  @interactjs/actions \
  @interactjs/modifiers \
import '@interactjs/auto-start'
import '@interactjs/actions/drag'
import '@interactjs/actions/resize'
import '@interactjs/modifiers'
import '@interactjs/dev-tools'
import interact from '@interactjs/interact'

  listeners: {
    move (event) {
      console.log(event.pageX, event.pageY)

For a more streamlined JS payload, you can install and import the package for each feature you need:

Package nameDescription
@interactjs/interact(required) provides the interact() method
@interactjs/actionsDrag, resize, gesture actions
@interactjs/auto-startStart actions with pointer down, move sequence
@interactjs/modifiersSnap, restrict, etc. modifiers
@interactjs/snappersProvides interact.snappers.grid() utility
@interactjs/inertiaDrag and resize inertia-like throwing
@interactjs/reflowinteractable.reflow(action) method to trigger modifiers and event listeners
@interactjs/dev-toolsConsole warnings for common mistakes (optimized out when NODE_ENV === 'production') and a babel plugin for optimized production builds

CDN streamlined

<script type="module">
import ''
import ''
import ''
import ''
import ''
import interact from ''

  onmove(event) {

The packages above are also available on[VERSION]/[UNSCOPED_NAME]. You can import them in modern browser which support ES6 imports.

Ruby on Rails

Rails 5.1+ supports the yarn package manager, so you can add interact.js to you app by running yarn add interactjs. Then require the library with:

//= require interactjs/interact