skills.rest
1k-off
1k-offCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

umbraco-tree

Register hierarchical tree and treeItem nodes for Umbraco Backoffice extensions with routable workspaces.

1|Updated May 21, 2026
Search Tags:#typescript#tree#umbraco#backoffice#data source#extension registry#workspace integration
One-click install
npx skills add https://github.com/1k-off/umbraco-observability-playground --skill umbraco-tree-1k-off
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-tree
Source: https://github.com/1k-off/umbraco-observability-playground/tree/main/.agents/skills/umbraco-tree
Command: npx skills add https://github.com/1k-off/umbraco-observability-playground --skill umbraco-tree-1k-off

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Implementing a custom navigation tree in Umbraco Backoffice can be confusing, especially when tree items must correctly integrate with workspaces to avoid broken navigation and “forever loading”.

Core Features & Use Cases

  • Implements Umbraco tree extension types: Register a tree and its treeItem nodes so the backoffice can render a hierarchical structure.
  • Connects trees to data sources: Provide a repository plus an inline server data source that returns root items, children, and ancestors.
  • Ensures correct click navigation: When tree items are clickable, align kind: 'routable' workspaces and matching entityType so selection state and routing work reliably.

Quick Start

Use the umbraco-tree skill to generate an Umbraco backoffice tree by creating manifest.ts and tree.repository.ts that register the tree, define treeItem mappings, and return root/children data from an inline server data source.

Frequently Asked Questions about umbraco-tree

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a custom navigation tree to the Umbraco backoffice?▼

To add a custom navigation tree in the Umbraco backoffice, register a `tree` and `treeItem` nodes in the extension registry. This renders a hierarchical structure for browsing entity types.

Why does my Umbraco tree show forever loading when clicking items?▼

Umbraco tree items show forever loading when workspaces lack the `kind: 'routable'` property or have a mismatched `entityType`. Aligning these properties ensures reliable selection state and routing.

How do I connect an Umbraco tree to a server data source?▼

Connect an Umbraco tree to a server data source by defining a repository with an inline server data source. This repository returns root items, children, and ancestors for the tree rendering.

What do I need to set up before building an Umbraco backoffice tree?▼

Building an Umbraco backoffice tree requires fetching up-to-date Umbraco docs, defining repository behavior, and using routable workspaces. You must also ensure matching `entityType` values to avoid navigation issues.

How do clickable tree items integrate with Umbraco workspaces?▼

Clickable Umbraco tree items integrate with workspaces by aligning `kind: 'routable'` workspaces with a matching `entityType`. This ensures selection state and routing work reliably across navigation flows.

What files are needed to register a custom tree in Umbraco?▼

Registering a custom tree in Umbraco requires creating a `manifest.ts` and a `tree.repository.ts` file. These files register the tree, define `treeItem` mappings, and return data from an inline server data source.

Related Skills

Explore More Software Engineering Skills→
umbracoumbraco
26

umbraco-tree-item

Generate TypeScript manifests and context API definitions for custom Umbraco backoffice tree items.

Official
Intermediate
1k-off1k-off
1

umbraco-workspace

Implement Umbraco backoffice workspaces with routable contexts and observable unique values.

Community
Intermediate
albanistrefialbanistrefi
4

umbraco-picker-data-source

Implement custom picker data sources for Umbraco backoffice property editors.

Community
Intermediate
albanistalbanist
4

umbraco-tree

Implement hierarchical navigation trees in the Umbraco backoffice using TypeScript.

Community
Intermediate