moveable

Moveable is a TypeScript library that adds interactive manipulation controls to elements on a web page. Once you attach it to an element, users can drag it to a new position, resize it by pulling on its edges, rotate it, scale it, or warp it (distort the shape as if bending a piece of paper). Multiple elements can be grouped together and moved as one unit. Snapping to guidelines is also built in, which makes it easier to align things precisely.

The library is primarily built for developers creating canvas-style editors, design tools, or any application where users need to position and resize content on a page. Think of the kind of handles you see around an image in a presentation editor or a photo-editing tool. Moveable gives you that behavior as a library you can wire into your own project.

It works with regular HTML elements, SVG elements, and 3D CSS transforms. You can mix and match the behaviors you need: some projects only need drag and resize, while others might want the full set including warp, clip, and rounded-corner editing. Each capability is opt-in rather than bundled together.

Installation is through npm with a single command. The library also ships a standalone script you can load directly in HTML without a build step. Framework-specific packages are available for React, Preact, Angular, Vue, Vue 3, Svelte, and Lit, so you can use it within any of those component systems without extra wiring.

The repository includes a Storybook demo site where you can try each behavior in isolation before adding it to your project. API documentation and a handbook are linked from the README. Moveable is part of a broader project called Scena, which is a full scene editor built on top of it. The license is MIT.