Current example demonstrates multi level file tree with default options, initialized from an <ul> element. The markup also contains elements in custom styling

In this example multi level file tree initialized from JSON data type and attached to <div> block element. The element itself is empty, all markup comes from json file

To embed JSON data in the markup, specify data type via data-type attribute and hide it using .d-none class to avoid flashing of unstyled/unloaded content before initialization

Fancytree supports drag'n'drop of tree nodes based on native HTML5 API. Any element that has the draggable="true" attribute set may be dropped over a Fancytree node

This tree has multi selection enabled: a single-click handler selects the node; a keydown handler selects on space. In this mode all nodes have inline checkboxes

You can turn off a node selection by adding .hideCheckbox class to it or disable it using .unselectable class. All other interactions with the node will remain enabled

Store and restore tree status using cookies or local storage: click, expand or select nodes and reload the page. To see it in action, select or unselect nodes and reload the page

Change checkboxes state programmatically using setSelected() parameter with true or false properties. Use Select all checkbox to check or uncheck all nodes

Hierarchical multi selection example. A single-click handler selects the node; a keydown handler selects on space. All parent nodes get indeterminate checkbox state

Single select example. Although functionality wise there's no other changes, all checkboxes are displayed as radio buttons with corresponding styling. Markup is still the same

Node titles can be changed via inline editing using dblclick, Shift + click [F2] or Enter (on Mac only). Press Enter or Tab key to save your changes

The following example demonstrates optional tiny badges that display count of children elements at parent node. It's controlled by childcounter extension stored in a separate file

This example demonstrates the usage of some Fancytree API functions, such as disabling and enabling file tree. Check Disable checkbox to see it in action

This example demonstrates a sorting feature of child list by title in 2 ways: full tree and in active nodes only. Set deep option to true to sort all descendant nodes