Skip to content

Creates foundation documentation #7612

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Creates foundation documentation #7612

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1a1d383
Creates foundation documentation
busrasengul Nov 11, 2025
7b980f6
Added Niels Lyngsø's talk from CG
busrasengul Nov 11, 2025
d9a536a
Adding missing context api docs from 16.
busrasengul Nov 11, 2025
3bc7462
Fixing version reference
busrasengul Nov 11, 2025
6b281d8
Matching foundation doc on v16 with correct references and rewording
busrasengul Nov 11, 2025
be08e72
Niels' talk added to v16 and Corrected space on 17
busrasengul Nov 11, 2025
39ad940
updating consume a context document
busrasengul Nov 13, 2025
afd2a25
Adding correct structure for context api
busrasengul Nov 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 60 additions & 17 deletions 16/umbraco-cms/customizing/foundation/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,82 @@
---
description: >-
In this section, you will learn about the general framework of Backoffice. How
to integrate and communicate and make your own reactive UI.
Learn about the core framework of the Umbraco Backoffice, including how to
integrate, communicate, and build reactive UIs for your extensions.
---

# Foundation

## [Terminology](terminology.md)
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.

Get an overview of the general terms in the Umbraco Backoffice and what they represent.
## Core Concepts

## [Umbraco Element](umbraco-element/)
### [Terminology](terminology.md)

The Umbraco element brings what you need to integrate your UI.
Get an overview of the general terms used in the Umbraco Backoffice and what they represent.

## [Lit Element](lit-element.md)
### [Umbraco Element](umbraco-element/)

Learn about Lit Element, the Web Component Framework that most examples and most of the Backoffice are based upon.
The Umbraco Element provides the foundation you need to integrate your custom UI components.

## [Context API](context-api/)
### [Umbraco Controller](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](lit-element.md)

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](context-api/)

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

## [States — Make reactive UI](states.md)
### [Contexts](contexts/)

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

### [Fetching Data](fetching-data/)

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

### [Repositories](repositories.md)

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](states.md)

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

### [Icons](icons.md)

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

Check warning on line 55 in 16/umbraco-cms/customizing/foundation/README.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[UmbracoDocs.Editorializing] Consider removing 'Simple' as it can be considered opinionated.

Raw Output:
{"message": "[UmbracoDocs.Editorializing] Consider removing 'Simple' as it can be considered opinionated.", "location": {"path": "16/umbraco-cms/customizing/foundation/README.md", "range": {"start": {"line": 55, "column": 77}}}, "severity": "WARNING"}

### [Localization](localization.md)

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

### [Integrate Validation](integrate-validation.md)

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

### [Sorting](sorting.md)

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

### [Routes](routes.md)

Bring life into your UI by ensuring it's up to date with the current data.
Implement routes in your UI, enabling users to deep link directly into your custom interfaces.

## [Sorting](sorting.md)
## Additional Resources

Create a UI that the user can sort via Drag and Drop.
### [Community Resources](https://github.com/umbraco/Umbraco.Packages/tree/main/bellissima)

## [Routes](routes.md)
An overview of community articles and packages related to the Umbraco Backoffice.

Implements routes into your UI, enabling Users to deep link into your UI.

## [Community Resources](https://github.com/umbraco/Umbraco.Packages/tree/main/bellissima)
### [Next-Level Backoffice](https://www.youtube.com/watch?v=P0xxTIlHayg)

An overview of community articles related to the New backoffice "Bellissima".
Watch Niels Lyngsø's Codegarden 2025 talk about next-level Umbraco Backoffice
1 change: 1 addition & 0 deletions 17/umbraco-cms/SUMMARY.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,6 +211,7 @@
* [Umbraco Element](customizing/foundation/umbraco-element/README.md)
* [Lit Element](customizing/foundation/lit-element.md)
* [Context API](customizing/foundation/context-api/README.md)
* [Context API Fundamentals](customizing/foundation/context-api/context-api-fundamentals.md)
* [Consume a Context](customizing/foundation/context-api/consume-a-context.md)
* [Provide a Context](customizing/foundation/context-api/provide-a-context.md)
* [Repositories](customizing/foundation/repositories/README.md)
Expand Down
76 changes: 59 additions & 17 deletions 17/umbraco-cms/customizing/foundation/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,81 @@
---
description: >-
In this section, you will learn about the general framework of Backoffice. How
to integrate and communicate and make your own reactive UI.
Learn about the core framework of the Umbraco Backoffice, including how to
integrate, communicate, and build reactive UIs for your extensions.
---

# Foundation

## [Terminology](terminology.md)
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.

Get an overview of the general terms in the Umbraco Backoffice and what they represent.
## Core Concepts

## [Umbraco Element](umbraco-element/)
### [Terminology](terminology.md)

The Umbraco element brings what you need to integrate your UI.
Get an overview of the general terms used in the Umbraco Backoffice and what they represent.

## [Lit Element](lit-element.md)
### [Umbraco Element](umbraco-element/)

Learn about Lit Element, the Web Component Framework that most examples and most of the Backoffice are based upon.
The Umbraco Element provides the foundation you need to integrate your custom UI components.

## [Context API](context-api/)
### [Umbraco Controller](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](lit-element.md)

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](context-api/)

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

## [States — Make reactive UI](states.md)
### [Contexts](contexts/)

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

### [Fetching Data](fetching-data/)

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

### [Repositories](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](states.md)

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

### [Icons](icons.md)

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

Check warning on line 55 in 17/umbraco-cms/customizing/foundation/README.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[UmbracoDocs.Editorializing] Consider removing 'Simple' as it can be considered opinionated.

Raw Output:
{"message": "[UmbracoDocs.Editorializing] Consider removing 'Simple' as it can be considered opinionated.", "location": {"path": "17/umbraco-cms/customizing/foundation/README.md", "range": {"start": {"line": 55, "column": 77}}}, "severity": "WARNING"}

### [Localization](localization.md)

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

### [Integrate Validation](integrate-validation.md)

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

### [Sorting](sorting.md)

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

Bring life into your UI by ensuring it's up to date with the current data.
### [Routes](routes.md)

## [Sorting](sorting.md)
Implement routes in your UI, enabling users to deep link directly into your custom interfaces.

Create a UI that the user can sort via Drag and Drop.
## Additional Resources

## [Routes](routes.md)
### [Community Resources](https://github.com/umbraco/Umbraco.Packages/tree/main/bellissima)

Implements routes into your UI, enabling Users to deep link into your UI.
An overview of community articles and packages related to the Umbraco Backoffice.

## [Community Resources](https://github.com/umbraco/Umbraco.Packages/tree/main/bellissima)
### [Next-Level Backoffice](https://www.youtube.com/watch?v=P0xxTIlHayg)

An overview of community articles related to the New backoffice "Bellissima".
Watch Niels Lyngsø's Codegarden 2025 talk about next-level Umbraco Backoffice
31 changes: 28 additions & 3 deletions 17/umbraco-cms/customizing/foundation/context-api/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,34 @@
---
description: The Context API is your tool to integrate with the application
description: >-
Learn about using the Context API for sharing data and functionality between
backoffice extensions through the component hierarchy.
---

# Context API

The Context API enables receiving APIs. Depending on where your code is executed from, it affects which and what instances of APIs can be received. The DOM structure defines the scope of who can gain access to what APIs. This is because the APIs are provided via an element and can then only be consumed by code running on itself or descendant elements.
The Context API is a powerful communication system in Umbraco's backoffice. It enables extensions to share data and functionality through the component hierarchy without tight coupling. Think of it as a way for different parts of your UI to talk to each other and access shared services.

##
Contexts are used throughout the Umbraco backoffice to provide access to workspace data, notifications, user information, and many other services. When building custom extensions, you will often need to consume existing contexts or create your own to share functionality between your components.

## Key Concepts

The Context API is built on a few core principles:

* **Provider-Consumer Pattern**: Parent elements provide contexts that descendant elements can consume
* **Loose Coupling**: Components don't need direct references to each other
* **Hierarchical**: Contexts flow down through the DOM tree
* **Type-Safe**: Context Tokens ensure you get the right context

The Context API provides a structured way to access and share functionality when building property editors, workspace extensions, dashboards, or any other backoffice UI.

## [Context API Fundamentals](context-api-fundamentals.md)

Learn the core concepts, terminology, and flow mechanisms of the Context API. Understand how contexts are provided and consumed through the element hierarchy, and explore common context types used throughout Umbraco.

## [Consume a Context](consume-a-context.md)

Learn how to consume contexts in your extensions using one-time references or subscriptions. This guide covers consuming contexts in UI elements, services, and non-UI classes, with practical code examples for each scenario.

## [Provide a Context](provide-a-context.md)

Learn how to create and provide your own custom contexts. Make your data and functionality available to descendant elements in the component hierarchy.
Loading
Loading