Which Umbraco editors are supported by this skill?

This skill supports the Block List, Block Grid, and Block Rich Text (RTE) editors introduced in Umbraco 13 and 14+.

Do I need to know Lit to use this skill?

While the skill generates Lit-based code, it handles the boilerplate, manifest registration, and property mapping for you based on Umbraco's official patterns.

Can I apply a single custom view to multiple block types?

Yes, the generated manifests can be configured to map a single custom view element to an array of content type aliases.

How does the skill handle block settings?

The skill automatically includes the 'settings' property in the generated Web Component, allowing your view to react to configuration changes like background colors or layout toggles.

Umbraco Block Editor Custom View

Name: Umbraco Block Editor Custom View
Author: umbraco

byumbraco

•

Content Management

Generates custom visual previews for Umbraco Block List and Block Grid editors using Web Components and Lit.

About

This skill enables developers to create specialized visual representations for content blocks within the Umbraco backoffice. By implementing custom Web Components, developers can provide content editors with themed previews, domain-specific visualizations, and enhanced editing experiences that go beyond the default block rendering. It automates the creation of manifests and view elements for the Block List, Block Grid, and Block RTE editors while ensuring adherence to the latest Umbraco documentation and best practices.

Key Features

Automated manifest generation for blockEditorCustomView extensions
Scaffolding for Lit-based custom view elements with full property binding
Support for Block List, Block Grid, and Block Rich Text editors
Context-aware rendering using both block content and settings data
Adherence to Umbraco UI Library (UUI) and design system standards
1 GitHub stars

Use Cases

Creating realistic brand-aligned previews for hero banners and landing page sections
Visualizing complex data structures like charts or maps directly within the CMS editor
Tailoring the editing experience for specific content types across multiple block editors

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add umbraco/umbraco-cms-backoffice-skills umbraco-block-editor-custom-view

For use in Claude.ai and ChatGPT

Download Skill

GitHub