skills.rest
1k-off
1k-offCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

umbraco-preview-app-provider

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

1|Updated May 21, 2026
Search Tags:#umbraco#lit#editor tooling#extension registry#backoffice extensions#preview apps#preview provider
One-click install
npx skills add https://github.com/1k-off/umbraco-observability-playground --skill umbraco-preview-app-provider-1k-off
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-preview-app-provider
Source: https://github.com/1k-off/umbraco-observability-playground/tree/main/.agents/skills/umbraco-preview-app-provider
Command: npx skills add https://github.com/1k-off/umbraco-observability-playground --skill umbraco-preview-app-provider-1k-off

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Editors need specialized tools during content preview, but Umbraco’s preview window menu only supports built-in functionality unless you add custom preview app providers.

Core Features & Use Cases

  • Preview App Provider setup: Creates the required preview app manifest entries so your tool appears in the preview window menu.
  • Backoffice UI element implementation: Builds a Lit-based preview app element that renders compact controls and can react to enabled/disabled state.
  • Docs-first integration: Guides implementation using the official Umbraco documentation for foundation, extension registry, and Umbraco elements.
  • Use case: Add a device simulator, accessibility check, or SEO analysis toggle that runs while editors preview pages and content changes.

Quick Start

Fetch the latest Umbraco docs, then implement a preview app manifest and a corresponding Lit element so the app shows up in the Umbraco backoffice preview menu.

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 menu items to the Umbraco backoffice preview window?▼

To add custom preview menu items in Umbraco, you implement a custom preview app provider by generating a previewApp manifest with an alias, name, and element factory import within the extension registry.

Can I build a device simulator or SEO tool for Umbraco content preview?▼

Yes, you can build device simulators, accessibility checkers, or SEO tooling for Umbraco content preview by creating a Lit-based UmbLitElement UI that renders controls and reacts to the preview context.

What is a preview app provider in Umbraco and when do I need one?▼

A preview app provider in Umbraco is an extension that adds specialized tools to the preview window menu. You need one when editors require custom workflows like accessibility checks while previewing content changes.

Does adding custom Umbraco preview apps require Lit?▼

Yes, implementing custom Umbraco preview apps requires building the UI element with Lit-based UmbLitElement to render compact controls and access the preview context for enabled or disabled states.

How do I implement a Lit element for an Umbraco backoffice UI extension?▼

You implement a Lit element for Umbraco backoffice extensions by fetching official docs, creating a previewApp manifest in the extension registry, and coding an UmbLitElement that reacts to preview context changes.

What are the limitations of custom Umbraco preview apps?▼

Custom Umbraco preview apps are limited to the backoffice preview window context and rely on official Umbraco documentation for foundation, extension registry, and Umbraco elements implementation guidance.

Related Skills

Explore More Software Engineering Skills→
albanistrefialbanistrefi
4

umbraco-bundle

Generate Umbraco backoffice bundle and manifest code from official documentation.

Community
Intermediate
albanistrefialbanistrefi
4

umbraco-preview-app-provider

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

Community
Intermediate
umbracoumbraco
26

umbraco-umbraco-element

Implement Umbraco backoffice Web Components using UmbElementMixin and UmbLitElement.

Official
Intermediate
albanistalbanist
4

umbraco-preview-app-provider

Implement custom preview app providers in the Umbraco backoffice.

Community
Intermediate