skills.rest
albanist
albanistCOMMUNITY
Explore all skills by this author →
GitHub

umbraco-preview-app-provider

Implement custom preview app providers in the Umbraco backoffice.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables developers to create custom tools and functionalities that integrate directly into the Umbraco content preview interface, enhancing the editor's workflow and providing specialized preview capabilities.

Core Features & Use Cases

  • Custom Preview Tools: Develop and integrate unique preview applications (e.g., device simulators, accessibility checkers, SEO analyzers) directly within the Umbraco backoffice preview pane.
  • UI Component Integration: Leverages Umbraco's UI framework (Umbraco Element) to build interactive preview app components.
  • Use Case: Implement a device simulator that allows editors to preview content on different screen sizes (desktop, tablet, mobile) directly within the Umbraco preview window.

Quick Start

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

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 apps to the Umbraco backoffice?▼

Custom preview apps in Umbraco are added by implementing extension registry patterns and building UI components with `Umbraco Element`, integrating tools like device simulators or SEO analyzers directly into the preview pane.

Can I build a device simulator for content preview in Umbraco?▼

Yes, you can build a device simulator for Umbraco content preview by creating a custom preview app provider that renders different screen sizes within the backoffice preview window using `Umbraco Element`.

What does an Umbraco preview app provider extension do?▼

An Umbraco preview app provider extension enables the implementation of custom UI components for the backoffice preview pane, allowing editors to access specialized tools like accessibility checkers and SEO analysis directly.

Do I need to use the Umbraco extension model to create custom backoffice preview tools?▼

Yes, creating custom backoffice preview tools requires adhering to Umbraco's extension model and utilizing the official extension registry patterns to properly register your `Umbraco Element` components.

What kind of custom tools can I integrate into the Umbraco content preview interface?▼

You can integrate specialized tools such as device simulators for different screen sizes, accessibility checkers, and SEO analyzers directly into the Umbraco content preview interface to enhance the editor's workflow.

Are there limitations when extending Umbraco preview with custom apps?▼

Extending Umbraco preview with custom apps requires strict adherence to the official extension model and UI framework, meaning custom components must be built using `Umbraco Element` to function properly within the backoffice.

Related Skills

Explore More Software Engineering Skills→
kraftvaerkkraftvaerk

umbraco-dashboard

Implement custom dashboards in the Umbraco backoffice using extension patterns.

Official
Intermediate
umbracoumbraco
26

umbraco-preview-app-provider

Implement custom preview app providers in the Umbraco backoffice.

Official
Intermediate
1k-off1k-off
1

umbraco-preview-app-provider

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

Community
Intermediate
umbracoumbraco
26

umbraco-picker-data-source

Implement custom picker data sources for Umbraco backoffice property editors.

Official
Intermediate