• Public
  • Public/Protected
  • All

Interface TreeDecorator

The TreeDecorator allows adapting the look and the style of the tree items within a widget. Changes are reflected in the form of decoration data. This decoration data is a map storing {@link TreeDecoration.Data} for affected tree nodes (using the unique node id as key). It is important to notice that there is no common contribution point for TreeDecorators. Instead, each TreeDecoratorService is supposed to declare its own contribution provider for TreeDecorators.

Example usage

A simple tree decorator that changes the background color of each tree node to red.

export class MyTreeDecorator implements TreeDecorator {
id = 'myTreeDecorator';

protected readonly emitter = new Emitter<(tree: Tree) => Map<string, TreeDecoration.Data>>();

get onDidChangeDecorations(): Event<(tree: Tree) => Map<string, TreeDecoration.Data>> {
return this.emitter.event;

decorations(tree: Tree): MaybePromise<Map<string, TreeDecoration.Data>> {
const result = new Map();

if (tree.root === undefined) {
return result;
for (const treeNode of new DepthFirstTreeIterator(tree.root)) {
return result;


  • TreeDecorator



id: string

The unique identifier of the decorator. Ought to be unique in the application.

onDidChangeDecorations: Event<((tree: Tree) => Map<string, WidgetDecoration.Data>)>

Fired when this decorator has calculated all the decoration data for the tree nodes.