Tree Views
Use built-in tree views and create extension trees with TreeDataProvider and window.createTreeView.
Tree Views
Tree views power Outline, Call Hierarchy, and Type Hierarchy. They preserve expansion state across data refreshes, support commands, tooltips, selection, reveal, and optional fuzzy filtering.
Tree buffers use filetype coctree. Inspect w:cocViewId when an autocmd or mapping needs to identify a particular view.
Built-in tree views
:CocOutlineorCocActionAsync('showOutline')opens document symbols.CocActionAsync('showIncomingCalls')andCocActionAsync('showOutgoingCalls')open Call Hierarchy.CocActionAsync('showSuperTypes')andCocActionAsync('showSubTypes')open Type Hierarchy.
Default mappings
| Key | Action |
|---|---|
<CR> | Invoke the selected node. |
<Space> | Toggle selection when multi-select is enabled. |
<Tab> | Open actions for the node. |
t | Toggle expansion. |
M | Collapse all nodes. |
f | Activate fuzzy filtering. |
<C-o> | Return to the original window. |
<Esc> | Close the tree. |
Search tree settings to customize icons and keys.
Create a tree in an extension
Implement TreeDataProvider, then pass it to window.createTreeView(). Each node is represented by a TreeItem; keep its id stable when labels can change so expansion and selection state survive refreshes.
| 1 | import { TreeDataProvider, TreeItem, TreeItemCollapsibleState, window } from 'coc.nvim' |
| 2 | |
| 3 | type Node = { label: string; children?: Node[] } |
| 4 | |
| 5 | const roots: Node[] = [{ label: 'Workspace', children: [{ label: 'README.md' }] }] |
| 6 | |
| 7 | const provider: TreeDataProvider<Node> = { |
| 8 | getChildren: element => element?.children ?? roots, |
| 9 | getTreeItem: element => { |
| 10 | const item = new TreeItem( |
| 11 | element.label, |
| 12 | element.children ? TreeItemCollapsibleState.Collapsed : TreeItemCollapsibleState.None, |
| 13 | ) |
| 14 | item.id = element.label |
| 15 | item.tooltip = element.label |
| 16 | return item |
| 17 | }, |
| 18 | } |
| 19 | |
| 20 | const view = window.createTreeView('example', { |
| 21 | treeDataProvider: provider, |
| 22 | enableFilter: true, |
| 23 | canSelectMany: true, |
| 24 | }) |
| 25 | await view.show() |
Provider and view capabilities
TreeDataProvider can expose parent lookup, lazy item resolution, per-item actions, and a change event. TreeView exposes visibility, selection, expansion events, title/message/description, reveal(), show(), and disposal. TreeItemCollapsibleState controls whether a node is expanded, collapsed, or a leaf.
Only depend on exports present in the public TypeScript API. Internal helpers such as BasicDataProvider are implementation details.
Source of truth: :h coc-tree and the TypeScript API.