JavaScript Tree UI widget

JavaScript Tree allows you to present hierarchically organized data in a nice and logical manner. With the help of this Webix UI framework widget you can clearly see all levels of dependency within the data in your web app.

Expand/Collapse by Click

JavaScript Tree nodes containing child nodes can be easily expanded or collapsed with a single click in order to keep the screen clear of superfluous information.

Dynamic Data LoadingView Demo

Dynamic data loading allows of asynchronous JS Tree level loading. Initially, only first-level items are loaded. Then when you open the next treemenu branch, the ID of the branch is sent to the server and the related data is dynamically loaded.

Two/Three State CheckboxesView Demo

The widget has two- and three-state checkboxes modes. The latter mode provides additional checkbox state. It allows selecting all JavaScript Tree subitems by checking the parent checkbox and indicating whether some of the nested checkboxes are selected.

Keyboard Navigation

This JavaScript widget provides you with keyboard navigation and hotkey management, which allows you to make fewer manipulations while you are working with the widget.

CRUD OperationsView Demo

Widget allows making a great number of CRUD operations with data: adding, deleting, copying, pasting and even in-line node editing.

IconsView Demo

The design of the widget is entirely defined with CSS which makes working on apps quicker and simpler. You can use a set of icons to decorate the Tree JS.

Drag-and-DropView Demo

Advanced JavaScript Treemenu drag-and-drop properties enable you to drag tree items (columns) not only between component and JavaScript Table, JavaScript List, Dataview and TreeTable, but even between different Trees.

(Re)Storing the Javascript Tree StateView Demo

This widget allows you to save and then restore the state of the treemenu to cookie, local or session storage. This state object contains data concerning opened and selected nodes significantly simplifying the end user’s work with it.

ClipboardView Demo

You can use clipboard while working with this component. This feature can be used in several modes. When you select a particular item and press Ctrl+C, you copy the title of the selected node. When you press Ctrl+V, according to the chosen mode, you can either paste the text as the title of the selected node or as its child item. Besides, you can specify a custom logic for the paste operation.

FilteringView Demo

The JavaScript Tree component supports different filtering modes. You can define whether children of the filtered items will be displayed. Also, you can specify that the parents of the filtered items will be expanded. Finally, you can set the nesting level for filtering. Combining these three options, you can define filtering rules that suit you in the best way.

SortingView Demo

The parent and child nodes of the widget can be sorted. You can define custom sorting logic to meet your particular requirements. For example, It's possible to sort only the parent nodes keeping the children as they are.

Easy Styling with CSS

The design of the widget is entirely defined with CSS which makes working on apps quicker and simpler. Moreover you can use a set of icons to decorate the JS Tree.

Browsers Compatibility

The widget works equally well in major up-to-date browsers, such as IE10, Mozilla Firefox, Opera, Chrome and Safari.

Ready for Touch Devices

JavaScript Treemenu is ready for operating properly as a part of mobile apps on touch devices. The library automatically chooses the most suitable touch event mechanism for each device.

Support for Popular Data Formats

DataView allows loading data in XML, JSON, JSArray and CSV formats and then using them freely with your existing web-services.

Integration with Frameworks

JavaScript Tree can be integrated with jQuery, Angular, React, Vue.js, Backbone.


The widget meets the main requirements of the WAI standards and presupposes equal access to web resources for people with diverse abilities.

Windows and Popups