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

•

Content Management

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.

Key Features

01Creates LitElement components using UmbElementMixin for backoffice integration

021 GitHub stars

03Implements reactive value updates and UmbChangeEvent dispatching

04Generates umbraco-package.json manifest extensions for property editor UIs

05Maps complex configuration settings from manifests to UI component properties

06Ensures adherence to official Umbraco backoffice UI foundation standards

Use Cases

01Creating custom input components like sliders, color pickers, or maps for content editors

02Developing configurable property editors with admin-defined settings like limits and placeholders

03Building data-driven editors that require specific validation or external API interaction

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add umbraco/umbraco-cms-backoffice-skills umbraco-property-editor-ui

For use in Claude.ai and ChatGPT

Download Skill