tree-elementTree widget in plain javascript

A dependency-free tree view with drag and drop, keyboard navigation, lazy loading and state persistence.

Getting started

Reference

GitHub

No dependencies

Plain javascript and plain css. Drop in a script tag or import it from your bundler.

Drag and drop

Move nodes with the mouse or by touch, with hooks to allow or veto every move.

Lazy loading

Load the whole tree up front, or fetch subtrees from a url when a folder is opened.

Typed

Written in TypeScript, so options, methods and node data are checked in your editor.

Try it

This is the widget itself, built from src in this repository. Open the folders, select a node, walk through it with the arrow keys, and drag a node somewhere else.

new TreeElement({
  autoOpen: 1,
  data,
  dragAndDrop: true,
  htmlElement: document.getElementById("tree1"),
});

Start with the guide, or go straight to the options.