Overview

Shuffle Demo

Shuffle is a ProseMirror plugin that supports smooth, grid-based reordering, auto-grouping, repositioning, and resizing. Drag this paragraph to see it in action.

ProseMirror has built-in drag-and-drop behavior, but it's limited in functionality and relies on the browser’s native “ghosted” drag thumbnails. Shuffle focuses on clarity: users should be able to see how their actions are affecting their document in real time, and know exactly what the document will look like when they drop.

Reordering

Use Shuffle to drag ProseMirror nodes around the document, automatically swapping positions with other node views, sinking and lifting to arbitrary depths as needed, and giving constant feedback to the user about how their document is changing.

Rows and containers

Rows are horizontal groupings of block nodes. Drag a block next to another and Shuffle wraps them in a row automatically. Drag the last block out and the row disappears.

Containers are an optional vertical grouping of block nodes that behave similarly to rows. Blocks inside of it can be aligned. A container persists after you remove the blocks inside of it.

When you drag a block beside another, Shuffle can automatically create a row. Drag everything out of the row and the row dissolves.

Within a row, blocks can be repositioned independently. Try adjusting the horizontal position of the blocks in this row.

When blocks overlap, the last one you touched sits on top. You can drag and drop the other block in place to bring it forward.

Containment

The card deck below uses containment - its cards can be dragged and reordered within the deck, but they can’t be moved outside of it. The schema defines what is allowed and Shuffle enforces it automatically.

Inflate

New blocks can be dragged into the document directly from the menu. Grab any component from the panel and drop it where you want.