skills.rest
kraftvaerk
kraftvaerkOFFICIAL
Explore all skills by this author →
WebsiteGitHub

umbraco-block-editor-custom-view

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

Updated Mar 6, 2026
Search Tags:#manifest#umbraco#custom view#block editor#web component#backoffice extension
One-click install
npx skills add https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy --skill umbraco-block-editor-custom-view-kraftvaerk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-block-editor-custom-view
Source: https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy/tree/main/Kraftvaerk.Umbraco.Alchemy.Frontend/.agents/skills/umbraco-block-editor-custom-view
Command: npx skills add https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy --skill umbraco-block-editor-custom-view-kraftvaerk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables developers to create custom visual representations for blocks within Umbraco's block editors, moving beyond default rendering to specialized previews and enhanced editing experiences.

Core Features & Use Cases

  • Custom Block Previews: Define unique web components for blocks in Block List, Block Grid, or Block RTE editors.
  • Themed Visualizations: Implement domain-specific or branded visual styles for content blocks.
  • Enhanced Editing: Provide richer, more intuitive editing interfaces for content creators.
  • Use Case: Create a custom "Hero" block view that displays a gradient background and specific typography, directly reflecting the design system within the Umbraco backoffice.

Quick Start

Generate a manifest and a custom view 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 custom views for Umbraco block editor content types?▼

To create custom views for Umbraco block editor content types, define manifest extensions and bind custom web component elements to properties. This replaces default rendering with specialized visual previews for the backoffice.

Can I use custom web components for Block Grid and Block RTE previews in Umbraco?▼

Yes, custom web components work for Block List, Block Grid, and Block RTE editors in Umbraco. You register manifest extensions to map custom view elements to specific block content types.

What is the process for registering a manifest extension for an Umbraco block?▼

Registering a manifest extension for an Umbraco block requires adhering to the Umbraco extension API. You define the manifest to associate a custom view web component with a specific block content type.

Does creating custom block views in Umbraco require specific backoffice extension dependencies?▼

Creating custom block views does not list external dependencies, but requires adherence to the Umbraco extension API for manifest registration and element property binding within the backoffice environment.

Why use web components for Umbraco block editor visual previews instead of default rendering?▼

Using web components for Umbraco block editor visual previews enables themed visualizations and domain-specific styling. This provides content creators with a richer, more intuitive editing interface reflecting the design system.

Are there limitations when binding element properties in Umbraco block editor custom views?▼

Limitations involve strict adherence to the Umbraco extension API for manifest registration and element property binding. Custom views must align with Block List, Block Grid, or Block RTE API structures.

Related Skills

Explore More Software Engineering Skills→
1k-off1k-off
1

umbraco-entry-point

Implement Umbraco backoffice entry points with onInit and onUnload functions.

Community
Intermediate
1k-off1k-off
1

umbraco-block-editor-custom-view

Implements custom Umbraco Block Editor views using registered Web Components.

Community
Intermediate
albanistalbanist
4

umbraco-block-editor-custom-view

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

Community
Intermediate
albanistrefialbanistrefi
4

umbraco-block-editor-custom-view

Create Umbraco Block Editor custom views with Lit Web Components.

Community
Intermediate