Outliner
Tab to indent, drag to reorder, collapse anything.
IntermediateWeb appProductivity12–26hAI-buildable 3/5no setupworth shipping
A nested list editor with the keyboard behaviour people expect from Workflowy or Roam: Tab and Shift-Tab to change depth, Enter to create a sibling, and zoom-into-node navigation. The keyboard model is the entire product and it's harder than it looks.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Items nest to arbitrary depth
- Tab and Shift-Tab indent and outdent
- Enter creates a sibling, Backspace at the start merges upward
- Any node collapses with a child count shown
- Zoom into a node so it becomes the temporary root
- Drag to reorder and reparent
- Full tree persists across reloads
The interesting part
- Caret position and focus management across structural edits
- Backspace-merge semantics when the previous sibling has children
- Reparenting a node without orphaning its subtree
Once it works
- Add a breadcrumb trail for zoomed nodes
- Add search that reveals matches within collapsed branches
- Add markdown formatting within items
Suggested stack
reacttypescripttailwinddnd-kitlocalstorage