Umbraco Block Editor Custom View

This handles custom visual representations for blocks in Umbraco's Block List, Block Grid, and Block RTE editors. Instead of the default rendering, you build a Web Component that shows block content however you want,themed previews, domain specific visualizations, whatever makes sense for your editors. The skill fetches official docs, then generates both the manifest and the custom view element as a Lit component. You specify which content types get the custom view and which block editors it applies to. Good for when the standard block preview doesn't give editors enough context or when you want blocks to look closer to their frontend output. The examples show accessing both content and settings data, styling with Umbraco's design tokens, and applying views to multiple content types at once.

skills.sh installs: 396
GitHub stars: 27
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add umbraco/umbraco-cms-backoffice-skills --skill umbraco-block-editor-custom-view --agent claude-code

Installs into .claude/skills of the current project.

Files

Umbraco Block Editor Custom View

What is it?

A Block Editor Custom View provides a custom visual representation for blocks in Block List, Block Grid, or Block RTE editors. Instead of the default block rendering, you can create a custom Web Component that displays block content in a specialized way - useful for themed previews, domain-specific visualizations, or enhanced editing experiences.