React Arborist Style Demo

Heads up!
This site works best on a desktop screen.

React Arborist can be used to create something like the gmail sidebar.

The tree is fully functional. Try the following:

  • Drag the items around
  • Try to drag Inbox into Categories (not allowed)
  • Move focus with the arrow keys
  • Toggle folders (press spacebar)
  • Rename (press enter, only allowed on items in 'Categories')
  • Create a new item (press A)
  • Create a new folder (press shift+A)
  • Delete items (press delete)
  • Select multiple items with shift or meta
  • Filter the tree by typing in this text box:

Star it on Github (The docs are there too).

Follow updates on Twitter.

Back to Demos