Showcase

See it run — on Flutter and the web

One drag-and-drop engine, two adapters. The demos below run live in your browser on dnd_kit_jaspr; the same gallery, built with dnd_kit_flutter, is embedded further down running as a real Flutter web app.

Live · Jaspr

A board you can actually move

A cross-column Kanban on the supported multi-container surface, running right here on dnd_kit_jaspr. Drag a card by its handle within a column or across to another — the engine resolves move intent, the board owns the data.

Backlog 7 In progress 2 Review 1 Done 2 moves 0
Backlog7
Axis-locked drag modifier
Press space to pick up, arrow keys to move between cards, space to drop, escape to cancel.
Snap to grid modifier
Press space to pick up, arrow keys to move between cards, space to drop, escape to cancel.
RTL reordering sortable
Press space to pick up, arrow keys to move between cards, space to drop, escape to cancel.
Pointer sensor sensor
Press space to pick up, arrow keys to move between cards, space to drop, escape to cancel.
Collision detection core
Press space to pick up, arrow keys to move between cards, space to drop, escape to cancel.
Restrict to axis modifier
Press space to pick up, arrow keys to move between cards, space to drop, escape to cancel.
Measuring registry core
Press space to pick up, arrow keys to move between cards, space to drop, escape to cancel.
In progress2
Drag overlay portal overlay
Press space to pick up, arrow keys to move between cards, space to drop, escape to cancel.
Keyboard sensor a11y
Press space to pick up, arrow keys to move between cards, space to drop, escape to cancel.
Review1
Edge auto-scroll scroll
Press space to pick up, arrow keys to move between cards, space to drop, escape to cancel.
Done2
Shared engine core
Press space to pick up, arrow keys to move between cards, space to drop, escape to cancel.
SSR hydration jaspr
Press space to pick up, arrow keys to move between cards, space to drop, escape to cancel.
Live · Jaspr

Drop zones with live collision

Drag the tokens from the pool into any bucket. The zones open a gap where the token will land — the same engine as the board, a different shape.

pool · drag into a bucket
1 Press space to pick up, arrow keys to move between tokens and zones, space to drop, escape to cancel.
2 Press space to pick up, arrow keys to move between tokens and zones, space to drop, escape to cancel.
3 Press space to pick up, arrow keys to move between tokens and zones, space to drop, escape to cancel.
4 Press space to pick up, arrow keys to move between tokens and zones, space to drop, escape to cancel.
5 Press space to pick up, arrow keys to move between tokens and zones, space to drop, escape to cancel.
6 Press space to pick up, arrow keys to move between tokens and zones, space to drop, escape to cancel.
Bucket A0
Bucket B0
Bucket C0
Live · Flutter

The same demos, on Flutter

This is the dnd_kit_flutter example gallery compiled to the web and embedded below. Same catalog, same drag engine — running on Flutter instead of Jaspr.

Open the Flutter gallery in a new tab