umbraco-block-editor-custom-view

Implement custom Umbraco block editor views using Web Components and manifest files.

4|Updated Mar 6, 2026
One-click install
npx skills add https://github.com/albanist/umbraco_CLI --skill umbraco-block-editor-custom-view-albanist
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: umbraco-block-editor-custom-view
Source: https://github.com/albanist/umbraco_CLI/tree/main/skills/property-editors/umbraco-block-editor-custom-view
Command: npx skills add https://github.com/albanist/umbraco_CLI --skill umbraco-block-editor-custom-view-albanist

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables developers to create highly customized visual representations and editing experiences for blocks within Umbraco's block editors, moving beyond default renderings for enhanced usability and domain-specific presentation.

Core Features & Use Cases

  • Custom Visual Previews: Define unique UIs for blocks in Block List, Block Grid, or Block RTE editors.
  • Component-Based Development: Leverage Web Components for reusable and maintainable custom views.
  • Use Case: Implement a "Hero" block with a custom preview that shows a gradient background and a placeholder for an image, directly within the Umbraco backoffice, making content editing more intuitive for editors.

Quick Start

Use the umbraco-block-editor-custom-view skill to generate a manifest and a TypeScript element for a 'heroBlock' content type in the 'block-list' editor.

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 create a custom preview for an Umbraco block editor?

Create an Umbraco block editor custom preview by defining a Web Component and generating a manifest file that registers it with the Umbraco extension registry for your specific block type.

Does the Umbraco block editor custom view support Block Grid and Block RTE?

Yes, the Umbraco block editor custom view supports Block List, Block Grid, and Block RTE editors, allowing you to apply custom visual representations across all three editor types.

What's the best way to build custom views for Umbraco blocks?

Using Web Components with TypeScript and manifest files is an effective approach for building reusable, maintainable custom views that integrate dynamically with the Umbraco block editor extension registry.

How do I register a custom Web Component view in Umbraco?

Register a custom Web Component view in Umbraco by creating a manifest file that specifies the content type alias and dynamically imports the element, integrating it with the block editor extension registry.

Can I use a custom content type alias with an Umbraco block editor custom view?

Yes, you can map custom content type aliases to your visual components by defining them in the manifest file, enabling the block editor to load the correct dynamic element import for each block.

Are there limitations when using Web Components for Umbraco block editor views?

Web Components for Umbraco block editor views require TypeScript and manifest configuration to function, meaning you must manage dynamic element imports and extension registry integration manually without default rendering fallbacks.