The release of Umbraco 14 and the new Backoffice (aka Bellissima) is scheduled in May 2024. This release will be a major technical change in the way that developers extend the backoffice.
Since Umbraco 14 is still a work in progress, as well as the official documentation, I wanted to create this blog post to curate some of the content around this that I've found useful when getting up to speed. I will continue to add resources to this list, also feel free to let me know if you think that something should be added.
This articles was last updated: 2024-04-03
The new backoffice removes all the legacy dependencies on AngularJS and uses modern technologies like Web Components with Lit and reactivity using RxJS. I maintain several open-source packages and the email package Newsletter Studio, so this is an exciting time.
Official Sources
The official source code and the official documentation are of course great places to start.
- Source code
Reading the real source code is the real "source of truth"
https://github.com/umbraco/Umbraco.CMS.Backoffice - Documentation
The official docs for Bellissima contains a great "Getting started"-section and some useful tutorials.
https://docs.umbraco.com/umbraco-backoffice/ - Umbraco UI-library
Used in the current backoffice and even more in the new backoffice.
https://github.com/umbraco/Umbraco.UI
- Storybook
The Storybook contains lots of examples and semi-structured documentation.
https://apidocs.umbraco.com/v14/ui/
Video & Presentations
These videos are a great way to get the over all concepts but please be aware that since this is still work in progress some details in the older videos might not be accurate any more.
- UmbraCoffe - Bellissima
Marcin and Callum talks with Richard Soeteman about his experience with the new backoffice while working on his packages Member Export, SEO Checker and Media Protect.
https://www.youtube.com/watch?v=COaq5oLRTvE - Umbraco Kent Meetup, Jacob Overgaard from Umbraco HQ on Bellissima
Great talk from one of the master minds behind the new Umbraco backoffice Jacob Overgaard. This video/presentation is a great explanation about the fundamentals about the new backoffice.
https://www.youtube.com/watch?v=SVpHFlKCJSw - Mounting your UI in New Backoffice, 2023
Niels Lyngsø, recording from Community Teams Days at Umbraco 2023.
https://www.youtube.com/watch?v=mxozXXPAALI - Practical adventures with Bellissima
Nathan Woulfe, Package-wizard, Umbraco HQ talks about his experience with the initial migration of "his" Workflow-package to Umbraco 14. There is a preview version of the whole source code for Umbraco Workflow available on Github to serve as inspiration for other package developers.
https://www.youtube.com/live/mrEQm-dgcFk?si=zVzv0NnaIvedQiBw&t=2368 -
Exploring the new Backoffice
Jacob Overgaard, CodeGarden 2023
https://www.youtube.com/watch?v=P14r9Sr0ATI - Packages Question Time
The new back office, 23rd of August 2023
https://www.youtube.com/watch?v=5vRzEMzrIec - Lit overview with Michele Stieven | jsday 2022
A great overview of Lit and its different building blocks.
https://www.youtube.com/watch?v=I9RbleMxxXw
Andy Butland, Umbraco HQ
Andy works on some of the most popular Umbraco HQ-packages and has shared some of his learnings along the way.
- Blog post series about Umbraco 14
In a couple of blog posts, Andy shares his first experiences with Umbraco 14.
https://www.andybutland.dev/2023/09/umbraco-14-package-migration.html - Umbraco 14-branch of Personalisation Groups
Here we can follow the progress of getting the package to work in Umbraco 14.
https://github.com/AndyButland/UmbracoPersonalisationGroupsCore/tree/feature/migrate-to-14
Kevin Jump aka. mr. uSync
Not sure if Kevin needs any introduction to the community as he is the creator of the mighty popular uSync-package that I've used on almost all my websites for as long as I can remember.
- Dev.to articles: Early Adopter's Guide Umbraco v14
A great series of blog posts about how to extend the new backoffice with a great visual overview of the most common extension points.
https://dev.to/kevinjump/series/26221 - Dev.to articles: Property Editors
How to build a custom property editor for Umbraco Bellissima
https://dev.to/kevinjump/series/26366 - Dev.to articles: Trees
Great read about how to extend Umbraco 14 with a custom tree.
https://dev.to/kevinjump/series/26505 - Dev.to articles: Server to client communication
Bellissima embraced OpenAPI and Swagger, in the article Kevin explain how to setup C# controllers and communicate between frontend and backen.
https://dev.to/kevinjump/series/26248 - Dev.to article: Upgrade preview releases
A great little guide on how to upgrade your project to the latest preview-release.
https://dev.to/kevinjump/early-adopters-guide-to-umbraco-v14-upgrade-preview-releases-39oj - Dev.to article: uSync to v14
It's almost like we're getting to read Kevin's notes during his initial work of getting uSync to compile and almost run on Umbraco 14.
https://dev.to/kevinjump/usync-to-v14-a-journey-14ho - uSync v14 source
Here we can follow the progress inside the uSync GitHub repository.
https://github.com/KevinJump/uSync/tree/v14/convert
Sir. Lee Kelleher
Lee is the man behind the Contentment-package that I use almost every day. I have seen some hints on Mastodon that he has been trying out the Umbraco 14-previews.
- Contentment source code
In the "dev/wip/bellissima"-branch we can see some hits of what Lee is working on.
https://github.com/leekelleher/umbraco-contentment/tree/dev/wip/bellissima - Blog post about the first steps
Lee shares his thoughts about the approach to the new version of the package - to continue with multi-targeting or to "start fresh".
https://dev.to/leekelleher/contentment-for-bellissima-199d
Matt Brailsford
A well-known community member and nowadays Umbraco HQ member ever since the Vendr package was acquired by HQ and rebranded to Umbraco Commerce. Matt has been writing some very nice articles about his v14 journey.
- Simplifying Imports with TypeScript Path Aliases About how to use TypeScript Path Aliases to make your code cleaner and easier to refactor.
https://dev.to/mattbrailsford/simplifying-imports-with-typescript-path-aliases-in-umbraco-v14-301g - Creating your own UI extension points in Umbraco v14
Matt has started a series on the topic of creating custom extension points for a package.
https://dev.to/mattbrailsford/creating-your-own-ui-extension-points-in-umbraco-v14-part-1-the-basics-568h
Richard Soeteman, SEO Checker, CMS Import and more
It feels like Richard has been building Umbraco packages since the day Umbraco was initially released and I just spotted that I have a new blog that I'm eager to follow.
- Umbraco 14 auto install
In this blog post, Richard share a Powershell script to automatically install Umbraco 14 and get it ready for package development.
https://richardsoeteman.net/blog/auto-install-latest-umbraco-14/ - Using ChatGPT to convert backoffice language files
In this awesome article Richard shares how he used ChatGTP to automatically convert the backoffice language files in to the new Umbraco Bellissima format.
https://richardsoeteman.net/blog/converting-backoffice-language-files-using-chatgpt/
Community threads worth checking out
Discord-question about authentication for custom controllers
More to come
I'm really looking forward to reading more from other community members that is on the same adventure as me and I will of course make sure to share parts of my own journey. I will also put some of my efforts into creating PRs for the
official documentation as I think that this will bring the most value to the community.
If you have examples of content that you think should be listed here - please reach out!