daybrush/moveable

★ 10,700TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((repo))
    What it does
      Drag to reposition
      Resize and rotate
      Warp and snap
    Use Cases
      Canvas editors
      Design tools
      Presentation builders
    Framework Support
      React and Vue
      Angular and Svelte
      Plain HTML script
    Features
      Multi-element groups
      Snap to guidelines
      SVG and 3D CSS
    Resources
      Storybook demos
      API documentation

mindmap root((repo)) What it does Drag to reposition Resize and rotate Warp and snap Use Cases Canvas editors Design tools Presentation builders Framework Support React and Vue Angular and Svelte Plain HTML script Features Multi-element groups Snap to guidelines SVG and 3D CSS Resources Storybook demos API documentation

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add drag-to-reposition and resize handles to images or cards in a web application

USE CASE 2

Build a slide or document editor where users can place, rotate, and resize objects on a canvas

USE CASE 3

Create a photo editor or mockup tool with snap-to-grid alignment and multi-element grouping

Tech stack

TypeScriptJavaScriptReactVueAngularSvelte

Getting it running

Difficulty · easy Time to first run · 30min

Framework-specific packages available for React, Vue, Angular, Svelte, and Lit, or load the standalone script directly in HTML without a build step.

Use freely for any purpose including commercial projects as long as you include the MIT copyright notice.

In plain English

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.

Copy-paste prompts

Prompt 1

Using the moveable library in React, show me how to make a div element draggable and resizable, and log the new position and size whenever the user stops moving it.

Prompt 2

I'm building a simple presentation editor. Show me how to use moveable to let users drag, resize, and rotate elements on a canvas, with snap-to-grid enabled.

Prompt 3

With moveable, how do I select multiple elements and move them all together as a group? Show a minimal HTML example.

Prompt 4

Show me how to add warp handles to an image element using moveable so users can distort its corners like a perspective transform.

Prompt 5

I want to add moveable to a Vue 3 project. Walk me through installing the Vue-specific package, attaching it to a component element, and handling the drag and resize events.

Open on GitHub → Explain another repo

← daybrush on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.