Guide · Open source

How to use Moveable: drag, resize and rotate elements

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Moveable is an open-source TypeScript library that lets a page visitor move, resize, scale, rotate and warp HTML or SVG elements using on-screen handles. This guide explains what it does, how to install it from npm, how to attach it to an element and turn on the behaviors you need. It is written for developers; the library itself is not a finished design tool.

Moveabledaybrush/moveable · ★ 10.8k · MIT Install options & downloads

Quick start

1Install the package. Run npm i moveable in your project folder. You need Node.js and npm, or a bundler.
2Import Moveable. Add import Moveable from "moveable" to the file where you control the element.
3Choose a container. Pass a container element as the first argument. Use document.body if you are not sure.
4Set the target. Pass the element you want to manipulate as the target option.
5Enable behaviors. Set draggable, resizable, scalable, rotatable or warpable to true for the actions you want.
6Test in the browser. Open the page and check the on-screen handles on the target element.

What Moveable does

Moveable attaches a control box with handles to an element you choose, called the target. Each behavior is a switch you turn on: draggable, resizable, scalable, rotatable, warpable and pinchable, among others. The README also lists grouping of multiple targets, snapping to guidelines, dragging the origin, clipping, and rounding corners with border-radius.

Draggable: move targets around the page
Resizable: change the width and height of targets
Scalable: change x and y scale via transform
Rotatable: rotate targets
Warpable: distort or bend targets
Snappable: snap to guidelines when positioning
Groupable: move several targets together
Supports SVG elements and 3D transforms

Install Moveable with npm

The npm route needs Node.js and npm, or a bundler. Install the package from your project folder with the command from the README. If you cannot add a JavaScript dependency, the README also offers a script tag that loads a built file from the project's release path.

$ npm i moveable

Create a Moveable instance on an element

Import Moveable, pass a container element as the first argument, and give an options object with a target. The container sets the coordinate space; if it is null, the position is fixed. The README uses document.body as the default parent. Then enable the behaviors you want as true. Keep in mind that the library adds classes starting with moveable- to its control box, so do not use that prefix for your own class names on the target.

Pass the element to move as target
Set draggable, resizable, scalable, rotatable or warpable to true for the behaviors you need
Enable pinchable to use pinch gestures alongside the other behaviors

import Moveable from "moveable";

const moveable = new Moveable(document.body, {
    target: document.querySelector(".target"),
    container: document.body,
    draggable: true,
    resizable: true,
    scalable: true,
    rotatable: true,
    warpable: true,
});

Use the script tag instead of npm

If your page has no build step, you can load Moveable with a script tag from the URL given in the README. This is the other installation method the project documents. Use the npm route if you are working with a bundler or a framework.

<script src="//daybrush.com/moveable/release/latest/dist/moveable.min.js"></script>

Use framework wrappers and the documentation

The README lists wrapper packages for React, Preact, Angular, Vue, Vue 3, Svelte and Lit. If your team uses one of these frameworks, check the wrapper package for its own usage. For grouping, custom CSS and writing your own behaviors, the project maintains a handbook and an API reference, linked from the README.

Moveable Handbook for general usage
How to use Group
How to use custom CSS
API documentation for every option

What people use it for

Building a simple visual editor where users move and resize boxes
Making SVG shapes manipulable in an interactive canvas
Positioning elements with snapping guidelines
Letting users rotate or warp images or panels in a browser app

Frequently asked questions

Is Moveable free to use?

Yes. The repository is released under the MIT licence, as shown in the README. Check the LICENSE file in the repository for the full terms.

Do I need Node.js to use Moveable?

For the npm install route, yes: the README lists Node.js and npm, or a bundler, as prerequisites. Alternatively, you can load the library with a script tag, which the README also documents.

Does Moveable work with SVG elements?

Yes. The README says it supports SVG elements such as svg, path, line, ellipse, g and rect.

Can I use Moveable with React or Vue?

The README lists wrapper packages for React, Preact, Angular, Vue, Vue 3, Svelte and Lit. Use the wrapper that matches your framework.

What are good alternatives to Moveable?

The project compares itself with interact.js, Konva, Fabric.js and react-rnd. Choose based on whether you need only drag and resize, a full canvas drawing model, or framework-specific components.

Why are my handles not showing up?

Check that the target option points to an element that exists when the instance is created, and that at least one behavior such as draggable or resizable is set to true. Also avoid giving your own elements class names starting with moveable-, since the library uses that prefix.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Moveable suits front-end developers building editors, interactive canvases or SVG tools who are comfortable writing JavaScript. If you only need a simple hover effect or a static page, a plain CSS transition is enough, and if you want a finished design tool without coding, pick a different product.

Install options & downloads