What is an Umbraco Property Editor UI?

It is the visual component in the Umbraco backoffice that content editors interact with to input data. It works alongside a schema that defines how that data is stored.

Is this compatible with the latest Umbraco versions?

Yes, this skill is specifically designed for the modern Umbraco backoffice (version 14+) which uses TypeScript, Lit, and the Bellissima UI framework.

Does this skill support property editor configuration?

Yes, it can generate both the manifest settings and the TypeScript logic required to consume configuration values like character limits or default text.

How does it handle state management?

The skill implements the UmbElementMixin and follows Umbraco's reactive patterns to ensure values are correctly updated and persisted within the CMS state.

Umbraco Property Editor UI

Name: Umbraco Property Editor UI
Author: umbraco

byumbraco

•

コンテンツ管理

Builds custom user interfaces for Umbraco property editors using official documentation and LitElement best practices.

概要

This skill empowers developers to create sophisticated property editor UIs within the Umbraco CMS backoffice. It automates the generation of TypeScript-based Lit elements and JSON manifests, ensuring seamless integration with Umbraco's core UI library (UUI) and state management systems. By fetching the latest official documentation, it provides up-to-date implementation patterns for value handling, configuration settings, and localization, significantly reducing the complexity of building custom editing experiences for content editors in modern Umbraco versions.

主な機能

Creates LitElement components using UmbElementMixin for backoffice integration
1 GitHub stars
Implements reactive value updates and UmbChangeEvent dispatching
Generates umbraco-package.json manifest extensions for property editor UIs
Maps complex configuration settings from manifests to UI component properties
Ensures adherence to official Umbraco backoffice UI foundation standards

ユースケース

Creating custom input components like sliders, color pickers, or maps for content editors
Developing configurable property editors with admin-defined settings like limits and placeholders
Building data-driven editors that require specific validation or external API interaction

概要

主な機能

Creates LitElement components using UmbElementMixin for backoffice integration
1 GitHub stars
Implements reactive value updates and UmbChangeEvent dispatching
Generates umbraco-package.json manifest extensions for property editor UIs
Maps complex configuration settings from manifests to UI component properties
Ensures adherence to official Umbraco backoffice UI foundation standards

ユースケース

Creating custom input components like sliders, color pickers, or maps for content editors
Developing configurable property editors with admin-defined settings like limits and placeholders
Building data-driven editors that require specific validation or external API interaction