umbraco-preview-app-provider

Name: umbraco-preview-app-provider
Availability: InStock
Author: albanist

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

Ready to run

npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-preview-app-provider-albanistrefi

💬 Prompt for ChatGPT / Claude Chat▼

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.