skills.rest
1k-off
1k-offCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

umbraco-block-editor-custom-view

Implements custom Umbraco Block Editor views using registered Web Components.

1|Updated May 21, 2026
Search Tags:#typescript#web components#umbraco#lit#backoffice#custom view#block editor
One-click install
npx skills add https://github.com/1k-off/umbraco-observability-playground --skill umbraco-block-editor-custom-view-1k-off
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-block-editor-custom-view
Source: https://github.com/1k-off/umbraco-observability-playground/tree/main/.agents/skills/umbraco-block-editor-custom-view
Command: npx skills add https://github.com/1k-off/umbraco-observability-playground --skill umbraco-block-editor-custom-view-1k-off

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Umbraco backoffice editors can render blocks only with generic templates, and that often makes block previews hard to understand or brand-specific teams want richer editing experiences.

Core Features & Use Cases

  • Custom visual previews for Block Editors: Replace the default block rendering with a tailored Web Component for Block List, Block Grid, and/or Block RTE.
  • Manifest-driven integration: Register a block editor custom view via an Umbraco manifest so the backoffice knows which blocks and editors to use.
  • Content and settings-aware UI: Render block content and settings to show domain-specific information (e.g., hero headline, background indicators, style options) directly in the editor.
  • Use Case: Create a themed “Hero Block” preview that displays headline/subheadline and visual cues about configuration so editors can choose content faster with fewer clicks.

Quick Start

Ask an AI to “Implement an Umbraco blockEditorCustomView for alias My.BlockView.Hero that renders block content and settings as a Lit Web Component, and generates the required manifest entries for block-list and block-grid.”

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 block editor previews in Umbraco?▼

To create custom block editor previews in Umbraco, you register a Web Component via an Umbraco manifest to replace default block rendering for specific content type aliases across block-list, block-grid, and block-rte editors.

Can I use Lit Web Components for Umbraco backoffice block views?▼

Yes, you can use Lit Web Components for Umbraco backoffice block views by implementing a custom component that exposes block content and settings data, then registering it through a blockEditorCustomView manifest entry.

What is a blockEditorCustomView manifest in Umbraco?▼

A blockEditorCustomView manifest in Umbraco is a configuration definition containing alias, element, forContentTypeAlias, and forBlockEditor properties that directs the backoffice to render a registered Web Component instead of generic block templates.

Does the Umbraco block editor custom view approach work for block-grid and block-rte?▼

Yes, the Umbraco block editor custom view approach works for block-list, block-grid, and block-rte editors, applying themed or domain-specific rendering by targeting specific content type aliases within each block editor type.

How do I show block content and settings in an Umbraco custom view?▼

To show block content and settings in an Umbraco custom view, you implement a Web Component that exposes these data models for rendering, allowing editors to see domain-specific configuration like hero headlines and background indicators directly in the editor.

Related Skills

Explore More Software Engineering Skills→
albanistalbanist
4

umbraco-umbraco-element

Create Umbraco backoffice web components using UmbElementMixin and UmbLitElement.

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
kraftvaerkkraftvaerk

umbraco-block-editor-custom-view

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

Official
Intermediate