umbraco-example-generator

Generate and run testable Umbraco backoffice extensions with hot reload.

26|13|Updated Nov 30, 2025

Search Tags:#testing #frontend #javascript #extension development #umbraco #backoffice

Ready to run

npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-example-generator

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: umbraco-example-generator
Source: https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills/tree/main/plugins/umbraco-testing-skills/skills/umbraco-example-generator
Command: npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-example-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies the process of creating, developing, and testing Umbraco backoffice extensions by providing a streamlined workflow and a mocked development environment.

Core Features & Use Cases

Rapid Extension Development: Quickly scaffold new backoffice extensions with hot-reloading capabilities.
Testable Examples: Generate complete, runnable examples that can be tested without a full .NET backend setup.
Use Case: You need to build a custom dashboard for the Umbraco content section. Use this Skill to generate a basic dashboard extension, run it locally with hot-reloading, and then add unit and E2E tests.

Quick Start

Clone the Umbraco source code and set up your extension folder to run it using the mocked backoffice.

Frequently Asked Questions about umbraco-example-generator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I test Umbraco backoffice extensions without a .NET backend?▼

You can test Umbraco backoffice extensions without a .NET backend by using a mocked development environment to generate and run complete, runnable examples locally with hot-reloading capabilities.

Can I use hot reload when developing custom JavaScript dashboards for Umbraco?▼

Yes, hot reload is supported when developing custom JavaScript dashboards for Umbraco, allowing you to rapidly scaffold new backoffice extensions and see code changes instantly during local development.

What is the best way to scaffold a frontend extension for the Umbraco backoffice?▼

The best way to scaffold a frontend extension for the Umbraco backoffice is to generate a testable example using the provided mocked infrastructure, which streamlines the setup without requiring a full .NET backend.

Do I need to clone the Umbraco source code to run a backoffice extension locally?▼

Yes, to run a backoffice extension locally, you need to clone the Umbraco source code and set up your extension folder to run it using the mocked backoffice development infrastructure.

How do I add unit and E2E tests for an Umbraco backoffice extension?▼

To add unit and E2E tests for an Umbraco backoffice extension, generate a basic dashboard extension using the mocked environment, run it locally, and then integrate testing frameworks to validate the isolated frontend JavaScript code.