umbraco-block-editor-custom-view

Name: umbraco-block-editor-custom-view
Availability: InStock
Author: albanist

Create Umbraco Block Editor custom views with Lit Web Components.

4|Updated Mar 6, 2026

Search Tags:#umbraco #lit #custom view #block editor #web component #extension manifest #backoffice ui

Ready to run

npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-block-editor-custom-view-albanistrefi

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: umbraco-block-editor-custom-view
Source: https://github.com/albanistrefi/umbraco_CLI/tree/main/skills/property-editors/umbraco-block-editor-custom-view
Command: npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-block-editor-custom-view-albanistrefi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of default Umbraco block previews not matching your content experience, branding, or editor workflow needs, forcing authors to rely on generic, hard-to-scan block visuals.

Core Features & Use Cases

Custom Block Editor Views: Replace how blocks render in Block List, Block Grid, and Block RTE with purpose-built Web Components.
Precise Targeting by Content Type and Editor: Apply views to specific content type aliases and editor surfaces (list/grid/RTE) or cover all blocks in an editor.
Settings-Aware Rendering: Use both block content and block settings to drive UI logic (e.g., colors, layouts, visual indicators).

Quick Start

Ask an AI to generate a new manifest entry and a Lit-based custom element for an Umbraco block editor custom view targeting block-list for your content type alias.

Frequently Asked Questions about umbraco-block-editor-custom-view

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I customize Umbraco block editor previews in the backoffice?▼

To customize Umbraco block editor previews, you can render blocks with custom backoffice UI by creating blockEditorCustomView manifests and matching Lit-based Web Component elements for precise visual rendering.

Can I apply custom block views to specific editors like Block List or Block Grid?▼

Yes, custom block views can target specific content type aliases and editor surfaces, allowing you to apply visualizations selectively across Block List, Block Grid, and Block RTE, or cover all blocks within an editor.

What is a blockEditorCustomView manifest in Umbraco?▼

A blockEditorCustomView manifest is an Umbraco extension type contract that maps block content and settings data to a custom Lit Web Component, replacing default generic previews with branded, domain-specific visualizations.

Do I need Lit to create custom views for Umbraco blocks?▼

Yes, the implementation uses Lit to create deterministic Web Component elements that render block content and settings data, ensuring authors get readable, branded previews during backoffice editing.

Can block settings data drive the rendering logic in custom Umbraco views?▼

Yes, custom views are settings-aware, allowing both block content and block settings to drive UI logic such as colors, layouts, and visual indicators within the backoffice block editor.

Why do default Umbraco block previews fail for complex content?▼

Default Umbraco block previews fail for complex content because they provide generic, hard-to-scan visuals that do not match branding or workflow needs, forcing authors to struggle with readability during editing.