umbraco-preview-app-provider

Implement custom preview app providers in the Umbraco backoffice.

26|13|Updated Nov 30, 2025
One-click install
npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-preview-app-provider
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: umbraco-preview-app-provider
Source: https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills/tree/main/plugins/umbraco-backoffice-skills/skills/umbraco-preview-app-provider
Command: npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-preview-app-provider

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables developers to add custom tools and functionalities directly into the Umbraco backoffice preview window, enhancing content editor workflows.

Core Features & Use Cases

  • Custom Preview Tools: Integrate device simulators, accessibility checkers, or SEO analysis tools into the preview menu.
  • Enhanced Editor Experience: Provide editors with immediate insights and controls directly within the content preview.
  • Use Case: Implement a device simulator that allows editors to see how their content will look on different screen sizes (desktop, tablet, mobile) without leaving the Umbraco backoffice.

Quick Start

Use the umbraco-preview-app-provider skill to create a new preview app that simulates different devices.

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 tools to the Umbraco backoffice preview window?

You can add custom tools to the Umbraco backoffice preview window by implementing custom preview app providers using official extension patterns. This enables integration of tools like device simulators and accessibility checkers directly into the content preview interface.

Can I integrate a device simulator into the Umbraco content preview?

Yes, you can integrate a device simulator into the Umbraco content preview by creating a custom preview app provider. This allows editors to view content across different screen sizes without leaving the backoffice.

What are the requirements for creating a custom preview app provider in Umbraco?

Creating a custom preview app provider requires adherence to Umbraco's Foundation and Extension Registry guidelines for manifest and element creation. You need to follow official documentation and extension patterns to properly register the preview tool.

How does the preview extension mechanism work in Umbraco?

The preview extension mechanism in Umbraco works by registering custom apps through the Extension Registry, defining manifests and elements that inject tools into the preview menu. This allows editors to access custom functionalities directly within the content preview interface.

What tools can I build using an Umbraco preview app provider?

Using an Umbraco preview app provider, you can build tools such as device simulators, accessibility checkers, and SEO analysis tools. These tools enhance the editor experience by providing immediate insights within the content preview window.