Live demo · Front-end
Task board
Drag a card, or grab one with the keyboard. Then refresh the page and find it where you left it.
Board JSON
Keyboard: Tab to a card, Space to grab it, arrow keys to move it between columns and positions, Space to drop, Esc to cancel. Ctrl+Z undoes anything.
Why it is built this way
One object, and everything else falls out of it.
Every change here — adding a card, dragging it, renaming a column — is an action dispatched against a single immutable state object. Nothing reads the truth out of the DOM, and the DOM is never the record of what is true.
That one decision is what makes undo a five-line feature instead of a project. The previous state is already a complete, separate object; undo just puts it back. Persistence is the same object serialised. Export is the same object again. There is nothing to convert between them.
The keyboard was the useful constraint
Making drag-and-drop work without a mouse forced move a card from here to there to exist as a real action in the store, rather than as a side effect of a gesture. Once it did, the pointer handler became a thin thing that computes a target and dispatches — and screen-reader announcements had something meaningful to describe.
Need an interface that people actually use?
Tell me who has to use it, and what it has to survive.