Foundation

Learn about the core framework of the Umbraco Backoffice, including how to integrate, communicate, and build reactive UIs for your extensions.

In this section, you will find comprehensive resources about the foundational concepts and tools for building Backoffice extensions. These topics cover everything from basic terminology to advanced patterns for data management and UI development.

Core Concepts

Terminology

Get an overview of the general terms used in the Umbraco Backoffice and what they represent.

Umbraco Element

The Umbraco Element provides the foundation you need to integrate your custom UI components.

Umbraco Controller

Contain or reuse logic across elements. Controllers enable you to separate business logic while remaining connected to the element life cycle.

Lit Element

Learn about Lit Element, the Web Component framework that most examples and the majority of the Backoffice are built upon.

Communication and Data Management

Context API

Learn how to communicate with the rest of the application, whether you want to retrieve data or manipulate it.

Contexts

Explore specific context implementations, including the Property Dataset Context that connects Property Editors with Workspaces.

Fetching Data

Learn how to request data when extending the Backoffice, using either the Fetch API or the Umbraco HTTP Client.

Repositories

Discover how to use repositories to manage data operations in a structured way, abstracting the data access layer for easier maintenance and scalability.

UI Development

States — Make Reactive UI

Bring life to your UI by ensuring it stays up to date with the current data through reactive state management.

Icons

Learn how to use icons in the Umbraco Backoffice, based on Lucide Icons and Simple Icons.

Localization

Discover how to manage and use Backoffice UI localization files to translate your extensions into different languages.

Integrate Validation

Learn how to bind and use the validation system when working with Form Controls and custom Property Editors.

Sorting

Create a UI that users can sort via drag and drop functionality.

Routes

Implement routes in your UI, enabling users to deep link directly into your custom interfaces.

Additional Resources

Community Resources

An overview of community articles and packages related to the Umbraco Backoffice.

Next-Level Backoffice

Watch Niels Lyngsø's Codegarden 2025 talk about next-level Umbraco Backoffice.