Implement preview app providers in Umbraco backoffice using official docs
Preview App Providers add custom items to the preview window menu in Umbraco. When content editors preview their content, these apps appear in the preview menu allowing additional functionality like device simulation, accessibility checks, SEO analysis, or other preview-related tools.
Always fetch the latest docs before implementing:
Umbraco Element: Base class for creating UI components
umbraco-umbraco-elementContext API: When accessing preview state
umbraco-context-apiimport type { ManifestPreviewAppProvider } from '@umbraco-cms/backoffice/extension-registry';
export const manifests: Array<ManifestPreviewAppProvider> = [
{
type: 'previewApp',
alias: 'My.PreviewApp',
name: 'My Preview App',
element: () => import('./my-preview-app.element.js'),
},
];
import { html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@customElement('my-preview-app')
export class MyPreviewAppElement extends UmbLitElement {
@state()
private _isActive = false;
override render() {
return html`
<uui-box headline="My Preview Tool">
<p>Custom preview functionality</p>
<uui-button
look=${this._isActive ? 'primary' : 'default'}
@click=${this.#toggle}
>
${this._isActive ? 'Disable' : 'Enable'}
</uui-button>
</uui-box>
`;
}
#toggle() {
this._isActive = !this._isActive;
// Apply your preview functionality
this.#applyPreviewMode(this._isActive);
}
#applyPreviewMode(active: boolean) {
// Access the preview iframe or apply styles
const previewFrame = document.querySelector('iframe.preview-frame');
if (previewFrame && active) {
// Apply custom preview mode
}
}
}
export default MyPreviewAppElement;
import { html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@customElement('device-preview-app')
export class DevicePreviewAppElement extends UmbLitElement {
@state()
private _selectedDevice = 'desktop';
private _devices = [
{ name: 'desktop', width: '100%', label: 'Desktop' },
{ name: 'tablet', width: '768px', label: 'Tablet' },
{ name: 'mobile', width: '375px', label: 'Mobile' },
];
override render() {
return html`
<uui-box headline="Device Preview">
${this._devices.map(
(device) => html`
<uui-button
look=${this._selectedDevice === device.name ? 'primary' : 'default'}
@click=${() => this.#selectDevice(device)}
>
${device.label}
</uui-button>
`
)}
</uui-box>
`;
}
#selectDevice(device: { name: string; width: string }) {
this._selectedDevice = device.name;
// Dispatch event to resize preview
this.dispatchEvent(
new CustomEvent('preview-resize', {
detail: { width: device.width },
bubbles: true,
composed: true,
})
);
}
}
export default DevicePreviewAppElement;
interface ManifestPreviewAppProvider extends ManifestElement {
type: 'previewApp';
}
That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.