Learn about the recommended development environment to extend Umbraco.
Make sure you have followed the requirementsarticle, especially having installed the following on your machine:
Node.js version 20.11.0 (LTS) and higher
Extensions will go into a folder called App_Plugins
. If you don't have this folder, you can create it at the root of your Umbraco project.
Source code for your extensions should ideally be placed in a different project. This will make it easier to maintain and test your code. You can create a new project in the root of your Umbraco project, or you can create a new project in a separate folder. If you are using a bundler like Vite, you can configure it to copy over the files to the App_Plugins
folder when you build your project.
You can use any package manager you like to install dependencies. We recommend using NPM or Yarn. You can install packages by running the command:
This will install the package and save it to your package.json
file.
You need to setup a package.json
file if you don't have one already. You can do this by running the command:
Umbraco publishes an NPM package called @umbraco-cms/backoffice
that holds typings and other niceties to build extensions.
You can install this package by running the command:
This will add a package to your devDependencies containing the TypeScript definitions for the Umbraco Backoffice. The -rc3
is the version of the package, which will change as new versions are released.
It is important that this namespace is ignored in your bundler. If you are using Vite, you can add the following to your vite.config.ts
file:
This ensures that the Umbraco Backoffice package is not bundled with your package.
Read more about using Vite with Umbraco in the Vite Package Setup article.
If you're using Visual Studio Code we recommend the extension called Lit-Plugin to get IntelliSense for Lit Elements and Umbraco UI Library Components.
Get started with a Vite Package, setup with TypeScript and Lit
This page is a work in progress. It will be updated as the software evolves.
Umbraco recommends building extensions with a setup using TypeScript and a build tool such as Vite. Umbraco uses the library Lit for building web components which we will be using throughout this guide.
Vite comes with a set of really good presets to get you quickly up and running with libraries and languages. For example: Lit, Svelte, and Vanilla Web Components with both JavaScript and TypeScript.
Run the following command in the App_Plugins
which is found (or needs to be created) at the root of your project:
This command will help you set up your new package, asking you to pick a framework and a compiler.
To follow this tutorial, we recommend you enter my-dashboard
as the Project Name when prompted, although you can choose any other you like. Then choose Lit and TypeScript.
This creates a new folder, sets up our new project, and creates a package.json
file, which includes the necessary packages.
Instead of the 2 above steps, you can do the following:
This will create a Vite Package with Lit and Typescript in a folder called my-dashboard.
Navigate to the new project folder my-dashboard and install the packages using:
Install the Backoffice package. You can install the package using the following command:
Optionally you can use --legacy-peer-deps
in the installation command to avoid installing Umbraco´s sub-dependencies like TinyMCE and Monaco Editor:
npm install --legacy-peer-deps -D @umbraco-cms/backoffice@14.0.0-rc3
If this is used the Intellisense to those external references will not be available.
Create a new file called vite.config.ts
in my-dashboard
folder and insert the following code:
This alters the Vite default output into a library mode, where the output is a JavaScript file with the same name as the name
attribute in package.json
. The name is my-dashboard
if you followed this tutorial with no changes.
The source code that is compiled lives in the src
folder of your package folder and that is where you can see a my-element.ts
file. You can confirm that this file is the one specified as our entry on the Vite config file that we recently created.
Build Package
Build the ts
file in the my-dashboard
folder so we can use it in our package:
If you like to continuously work on the package and have each change built, you can add a watch
script in your package.json
with vite build --watch
. The example below indicates where in the structure this change should be implemented:
Then in the terminal, you can run npm run watch
.
Declare your package to Umbraco via a file called umbraco-package.json
. This should be added at the root of your package. In this guide, it is inside the my-dashboard
folder.
This example declares a Dashboard as part of your Package, using the Vite example element.
Umbraco needs the name of the element that will render as default when our dashboard loads.
This is specified in the manifest as the elementName
.
Another approach would be to define your default element in the TS code. To do this, in the src/my-element.ts
add default
to your MyElement
class in the file like so:
To be able to test your package, you will need to run your site.
Before you do this, you need to include all the files in the src
folder and the umbraco-package.json
file in your project.
If you try to include these resources via Visual Studio (VS), then only the dist
folder needs to be included. Otherwise, VS will try to include a few lines on your .csproj
file to compile the TypeScript code that exists in your project folder. When you run your website, VS will try to compile these files and fail.
Result
The final result looks like this:
If the Vite logo is not found, the path to its location needs to be changed. Update the my-element.ts
file in the src
folder accordingly:
In the same file, you will need to change the background-color
of the button
to white so it is visible:
With this, you have set up your Package and created an Extension for the Backoffice.
Before following this guide, read the article.
The build:lib:entry
parameter can accept an array which will allow you to export multiple files during the build. You can read more about .
Learn more about the abilities of the manifest file in the article.
This Dashboard will appear on all sections, so continue the following tutorial on .
An extension begins with a Package Manifest
A Package is declared via an Umbraco Package Manifest. This describes the Package and declares one or more UI Extensions.
JSON file format is used to describe one or more custom Umbraco extensions such as property editors, dashboards, sections, or entity actions. This page outlines the file format and properties found in the JSON.
This is a sample manifest. It is always stored in a folder in App_Plugins/{YourPackageName}
, with the name umbraco-package.json
. In this example, the package name is SirTrevor
and is a text box property Data Type.
Before Umbraco 14, the manifest was declared in a package.manifest
file instead of umbraco-package.json.
This is a work in progress. It's currently not possible to register a manifest with Csharp such as it was supported in previous versions of Umbraco CMS.
The manifest takes four fields:
Allows you to specify a friendly name for your package that will be used for telemetry. If no name is specified the name of the folder will be used instead.
The version of your package, if this is not specified there will be no version-specific information for your package.
With this field, you can control the telemetry of this package, this will provide Umbraco with the knowledge of how many installations use this package.
The extensions
field is an array of UI Extension Manifests, each Manifest describes a single UI Extension. You can read more about this in the UI Extension Types article.
Make your IDE aware about the opportunities of the umbraco-package.json
by adding a JSON schema. This gives your code editor abilities to autocomplete and knowledge about the format. This helps to avoid mistakes or errors when editing the umbraco-package.json
file.
Editors like Visual Studio can use the $schema
notation in your file.
Hover over any of the properties to see the description of the property. You can also use the Ctrl + Space
(Windows/Linux) or CMD + Space
(macOS) shortcut to see the available properties.
Umbraco will automatically pick up any umbraco-package.json
files found in the /App_Plugins
folder. You need to restart the application for new packages to be loaded or if you changed anything in existing files.