skills.rest
albanistrefi
albanistrefiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

umbraco-preview-app-provider

Implement Umbraco Preview App Providers with Lit-based elements and manifests.

4|Updated Mar 6, 2026
Search Tags:#typescript#umbraco#lit#extension registry#backoffice extensions#preview app provider#device simulation
One-click install
npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-preview-app-provider-albanistrefi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-preview-app-provider
Source: https://github.com/albanistrefi/umbraco_CLI/tree/main/skills/extensions/umbraco-preview-app-provider
Command: npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-preview-app-provider-albanistrefi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Editors need richer, context-aware preview functionality than the default preview menu provides, so custom preview tools must be added to Umbraco’s backoffice in a maintainable way.

Core Features & Use Cases

  • Implements Preview App Providers: Adds a new item to the preview window menu using Umbraco’s official extension registry conventions.
  • Generates manifest + element: Creates the required manifest entry and a Lit-based backoffice element that can react to user interaction.
  • Supports preview-mode behaviors: Enables common preview scenarios like device simulation or custom preview checks (SEO, accessibility, etc.) while keeping UI compact.

Quick Start

Use the skill to fetch the latest Umbraco documentation, then generate the preview app manifest and a Lit element scaffold to register and display a new preview menu item.

Frequently Asked Questions about umbraco-preview-app-provider

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

FAQPage Schema
How do I add custom preview tools to the Umbraco backoffice preview window?▼

You can add custom preview tools to the Umbraco backoffice by implementing Preview App Providers, which extend the preview window menu with custom editor-facing utilities using the extension registry manifestPreviewApp provider type.

Can I use Lit elements to build custom preview apps in Umbraco?▼

Yes, building a custom preview app in Umbraco requires creating a Lit-based backoffice element implementation. This element reacts to user interaction and is registered alongside a manifest entry within the extension registry.

What is an Umbraco Preview App Provider used for?▼

An Umbraco Preview App Provider is used to extend the default preview window with interactive, context-aware UI. Common use cases include device simulation, SEO checks, and accessibility checks directly within the preview mode.

How do I register a custom preview menu item in Umbraco?▼

To register a custom preview menu item, you must use the Umbraco extension registry manifestPreviewApp provider type to create a manifest entry and align the generated code with official Umbraco documentation for the Lit element.

Does the Umbraco preview app provider support device simulation and accessibility checks?▼

Yes, the Umbraco preview app provider supports preview-mode behaviors like device simulation, SEO checks, and accessibility checks while keeping the interactive UI compact and preview-context aware.

Do I need TypeScript to implement an Umbraco backoffice extension for preview tools?▼

Implementing Umbraco backoffice extensions for preview tools involves TypeScript and Lit to generate the required manifest and element scaffold, ensuring the custom preview menu item displays correctly.

Related Skills

Explore More Software Engineering Skills→
1k-off1k-off
1

umbraco-bundle

Generate Umbraco bundle manifests and JavaScript entry files for backoffice extensions.

Community
Intermediate
1k-off1k-off
1

umbraco-preview-app-provider

Implements custom Umbraco preview app providers with Lit-based UI elements.

Community
Intermediate
kraftvaerkkraftvaerk

umbraco-property-action

Generate TypeScript code and manifest files for Umbraco property editor actions.

Official
Intermediate
umbracoumbraco
26

umbraco-umbraco-element

Implement Umbraco backoffice Web Components using UmbElementMixin and UmbLitElement.

Official
Intermediate