Why is the index.ts file required in my extension folder?

The index.ts file acts as the entry point; it must export a 'manifests' array so the Umbraco extension registry can automatically discover and load your custom components.

Do I need a running Umbraco .NET site to use this skill?

No, this skill utilizes the Umbraco source's development infrastructure which includes mocked APIs via MSW, allowing you to develop UI extensions entirely in the frontend.

Can I use this for testing production-ready Umbraco packages?

Yes, it is designed specifically for building and validating the frontend portions of Umbraco packages, ensuring your manifests and elements work correctly before integration.

How does the external extension loading work?

It uses the 'npm run dev:external' command alongside a path variable to create a Vite alias that points to your local folder, injecting your code directly into the backoffice UI.

Umbraco Example Generator

Name: Umbraco Example Generator
Author: umbraco

byumbraco

•

Gestión de Contenido

Generates and executes testable Umbraco backoffice extensions using a mocked development environment and hot-reload infrastructure.

Acerca de

This skill streamlines the development of Umbraco backoffice extensions by leveraging the core CMS development infrastructure to run frontend code in isolation. It allows developers to create, preview, and test custom dashboards, views, and elements without requiring a functional .NET backend. By utilizing Vite's external extension loading and Mock Service Worker (MSW) for APIs, it provides a high-fidelity environment for rapid prototyping, building package demonstrations, and validating extension manifests before deployment.

Características Principales

Mocked API integration for testing extensions without a live database
External directory mapping via VITE_EXTERNAL_EXTENSION environment variables
Standardized patterns for Lit-based components and Umbraco contexts
Automated boilerplate generation for Umbraco backoffice manifests
1 GitHub stars
Hot-reload support for real-time frontend extension development

Casos de Uso

Building standalone, testable examples for Umbraco package documentation
Prototyping new Umbraco backoffice UI components and dashboards
Debugging complex extension registration logic in an isolated environment

Acerca de

Características Principales

Mocked API integration for testing extensions without a live database
External directory mapping via VITE_EXTERNAL_EXTENSION environment variables
Standardized patterns for Lit-based components and Umbraco contexts
Automated boilerplate generation for Umbraco backoffice manifests
1 GitHub stars
Hot-reload support for real-time frontend extension development

Casos de Uso

Building standalone, testable examples for Umbraco package documentation
Prototyping new Umbraco backoffice UI components and dashboards
Debugging complex extension registration logic in an isolated environment