Umbraco Extension Template What is it? The Umbraco Extension Template is the official .NET template for creating backoffice extensions. It provides a pre-configured project structure with TypeScript/Vite tooling, proper folder structure, and all essential files needed for extension development. Every Umbraco backoffice extension should start with this template. Documentation Always fetch the latest docs before implementing: Main docs : https://docs.umbraco.com/umbraco-cms/customizing/development-flow/umbraco-extension-template Development Flow : https://docs.umbraco.com/umbraco-cms/customizing/development-flow Foundation : https://docs.umbraco.com/umbraco-cms/customizing/foundation Prerequisites .NET SDK 9.0 or later Node.js 22 or later Workflow Install template (one-time): dotnet new install Umbraco.Templates Create extension : dotnet new umbraco-extension -n MyExtension Install dependencies : cd MyExtension/Client && npm install Start development : npm run watch Build for production : npm run build Commands Install the Template dotnet new install Umbraco.Templates Create New Extension (Basic) dotnet new umbraco-extension -n MyExtension Create New Extension (With Examples) dotnet new umbraco-extension -n MyExtension -ex The -ex flag adds example code including: Sample API controller Swagger API registration Example dashboard component Generated API client Project Structure Basic Template MyExtension/ ├── MyExtension.csproj # .NET project file ├── Constants.cs # Extension constants ├── README.md # Setup instructions └── Client/ # TypeScript source ├── package.json ├── tsconfig.json ├── vite.config.ts └── src/ └── ... # Your extension code With Examples (-ex flag) MyExtension/ ├── MyExtension.csproj ├── Constants.cs ├── README.md ├── Composers/ # C# composers │ └── SwaggerComposer.cs # API documentation setup ├── Controllers/ # C# API controllers │ └── MyExtensionController.cs └── Client/ ├── package.json ├── tsconfig.json ├── vite.config.ts └── src/ ├── api/ # Generated API client ├── dashboards/ # Example dashboard └── entrypoints/ # Extension entry point Development Commands

Navigate to Client folder

cd MyExtension/Client

Install dependencies

npm install

Development with hot reload

npm run watch

Production build

npm run build

Type checking

npm run check Build and Deploy Publish the Extension dotnet publish --configuration Release Create NuGet Package dotnet pack --configuration Release Minimal Example After running the template, add your first manifest in Client/src/ : manifest.ts export const manifests : Array < UmbExtensionManifest

= [ { name : "My Extension Entrypoint" , alias : "MyExtension.Entrypoint" , type : "backofficeEntryPoint" , js : ( ) => import ( "./entrypoint.js" ) , } , ] ; entrypoint.ts import type { UmbEntryPointOnInit } from "@umbraco-cms/backoffice/extension-api" ; export const onInit : UmbEntryPointOnInit = ( _host , _extensionRegistry ) => { console . log ( "Extension loaded!" ) ; } ; IMPORTANT: Add Extension to Umbraco Instance After creating a new extension, you MUST add it as a project reference to the main Umbraco instance. Without this step, the extension will not load. Reference skill: umbraco-add-extension-reference This skill explains how to add the new extension's .csproj file as a in the main Umbraco project (e.g., Umbraco-CMS.Skills.csproj ).