skills.rest
albanistrefi
albanistrefiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

umbraco-block-editor-custom-view

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
One-click install
npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-block-editor-custom-view-albanistrefi
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
albanistrefialbanistrefi
4

umbraco-bundle

Generate Umbraco backoffice bundle and manifest code from official documentation.

Community
Intermediate
kraftvaerkkraftvaerk

umbraco-block-editor-custom-view

Implements custom web component views for Umbraco block editor content types.

Official
Intermediate
umbracoumbraco
26

umbraco-block-editor-custom-view

Implement custom Umbraco block views using Web Components and LitElement.

Official
Intermediate
1k-off1k-off
1

umbraco-property-editor-ui

Implement Lit-based Umbraco property editor UI elements and register them in the package manifest.

Community
Intermediate