| description |
|---|
Get started with the New Backoffice in Umbraco 14. |
"Belissima", code name for the frontend code of the backoffice, is a re-creation of the backoffice of Umbraco with a more modern approach. While replacing the deprecated angular code with Vite, Lit and TypeScript, you can customize or extend more or less everything in the backoffice:
Backoffice Overview Customizable items
Each block is an extension point that can be extended, customized, replaced, or removed.
You are also not limited to the mentioned frameworks. You can use any other framework or library of your choice. The new backoffice will be available in the Umbraco CMS from Version 14.
In this article, we'll provide an overview of the different ways you can extend the backoffice using the new frameworks.
| Setup | Discover how to get started with the new backoffice. | Documentations Icons_Umbraco_CMS_Fundamentals_Setup (1).png | development-flow | |
| UI Documentation | Discover how to extend the backoffice using the Umbraco UI Library, UI API and Storybook. | Documentations Icons_Umbraco_CMS_Fundamentals_Design.png | ui-documentation.md | |
| Tutorials | Creating your first extension Creating a custom dashboard Creating a property editor | Documentations Icons_Umbraco_CMS_Tutorials_the_Starter_Kit (1).png |
.png){kind=link}
.png){kind=link}
{% hint style="info" %} You can also find a list of other resources related to the new backoffice of Umbraco in the Umbraco v14 "Bellissima" Resources article. {% endhint %}
There are a few words that cover certain concepts, which is good to learn to decode the purpose of code. These terminologies can be handy when starting to customize the new backoffice:
- Resource: An API enables communication with a server.
- Store: An API representing data, generally coming from the server. Most stores would talk with one or more resources. You can read more about this in the Store article.
- State: A reactive container holding data, when data is changed all its Observables will be notified. You can read more about state and observables in the States article.
- Observable: An observable is the hook for others to subscribe to the data of a State.
- Observe: Observe is the term of what we do when subscribing to an Observable.
- Context-API: The name of the system used to serve APIs (instances/classes) for a certain context in the DOM. An API that is served via the Context-API is called a Context. You can read more about this in the Context API article.
- Context Provider: One that provides a class instance as a Context API.
- Context Consumer: One that consumer subscribes to a class instance as a Context API.
- Controller: An abstract term for a thing that hooks into the lifecycle of an element. Many things in our system are Controllers.
- Umbraco Controller: Enables hosting controllers. Additionally, it provides a few shortcut methods for initializing core Umbraco Controllers. You can read more about this in the Controllers article.
- Controller Host: A class that can host controllers.
- Controller Host Element: The element that can host controllers.
- Umbraco Element: The
UmbLitElementorUmbElemenMixinenables hosting controllers. Additionally, it provides a few shortcut methods for initializing core Umbraco Controllers. You can read more about this in the Umbraco Element article.