Changelog

All notable changes to tree-element are documented here. The format is based on Keep a Changelog, and the project follows Semantic Versioning.

Unreleased

Added

• multiSelect can be turned on or off with setOption.
• Vertical lines from a folder to its children. Their color is the --tree-element-line-color custom property; set it to transparent to hide them.
• The --tree-element-toggler-size custom property: the width of the toggler. The indentation and the tree lines follow it. It defaults to max(24px, 1.5em), so the toggler and the indentation grow with a font larger than 16px.

Changed

• setOption throws an error for an option that can only be set in the constructor. Before, the change was ignored or only partly applied. See Changing an option later for the options it accepts.

Fixed

• Changing dragAndDrop with setOption also updates the tree-element-dnd class, so touch dragging follows the new value.
• Changing slide with setOption also applies to folders that open while dragging over them.
• Changing keyboardSupport with setOption turns the keyboard handling on or off.
• Changing tabIndex with setOption also updates the nodes that are already rendered.
• When several nodes are selected and a click or selectNode selects just one node, tree.deselect is dispatched for the nodes that lose the selection. Before, they were deselected without an event, except for the one in the deselectedNode of tree.select.

0.4.0 - 2026-10-24

Added

• The option multiSelect lets the user select multiple nodes.

Changed

• Make the tree readable for screen readers.

0.3.2 - 2026-10-12

Changed

• The default closedIcon and openedIcon triangles are larger and have the same width and height, like the triangle characters they replaced.

0.3.1 - 2026-10-11

Fixed

• A relative dataUrl, such as api/nodes.json, is resolved against the page instead of the root of the site. This makes it work when the page is in a subdirectory, for example on GitHub Pages.
• The default closedIcon and openedIcon are now svg triangles instead of text characters. This make sure they are the same on all platforms.

0.3.0 - 2026-10-11

Added

• The keys Home and End select the first and the last visible node.
• The key Enter dispatches the new event tree.activate, for example to open the edit page of the node.
• The options ariaLabel and ariaLabelledBy give the tree an accessible name.
• The colors in tree_element.css are css custom properties, such as --tree-element-title-color, so you can change them or add a dark theme. See Styling.
• A folder's treeitem has aria-busy="true" while its children load.

Fixed

• The tree can be reached with the tab key when no node is selected.
• Do not set aria-label for tree nodes. Rely on the node text instead.
• Screen readers no longer read the open/close toggler. It has aria-hidden="true"; aria-expanded on the node already has the state.
• When loading the children of a folder fails, the tree no longer requests them again and again. The folder stays closed; opening it again retries.

Changed

• The toggler and the rows are at least 24px high, and the toggler is at least 24px wide: the WCAG 2.5.8 minimum for click targets. This makes the tree a bit taller. The toggler no longer has a margin; the space around its icon separates it from the title.
• The toggler is a span instead of an a without href. Update css that selects a.tree-element-toggler.
• When the user prefers reduced motion (prefers-reduced-motion: reduce), folders open and close without animation, unless animationSpeed is set.
• The method selectNode keeps an already selected node selected, as documented.
• The methods closeNode and toggle return a promise that is resolved when the folder is closed or opened, like openNode. Await it when you need to know the animation has finished.

0.2.0 - 2026-09-16

Fixed

• The options closedIcon and openedIcon render a string as html instead of as text.

Changed

• Make rendering faster by using templates.
• The children of a closed folder are rendered when the folder is opened, instead of when the tree is rendered. onCreateLi is called for a node when it is rendered.
• The method getSelectedNode returns null instead of false.
• The method setState saves the state to storage when saveState is enabled.

0.1.1 - 2026-09-06

Changed

• tree.load_failed is also dispatched when a request fails with a network error.

0.1.0 - 2026-09-04

First release.

Added

• Tree widget in plain javascript, with no runtime dependencies
• Load data from a javascript array or from a url, with load on demand per node
• Drag and drop, with autoscroll and hooks to allow or veto a move
• Keyboard navigation
• Save the open and selected nodes to local storage
• Right-to-left support
• Typed events and options, with type declarations in the package