What problem does it solve?
Implementing a custom Umbraco backoffice property editor UI requires correct wiring between the client-side TypeScript element and the server-side schema alias, and many teams struggle to follow the right manifest and configuration patterns to avoid missing-data or save failures.
Core Features & Use Cases
- Client UI implementation: Build a property editor UI element with Lit and dispatch the correct Umbraco change events so values propagate properly in the backoffice.
- Manifest-driven registration: Define a
propertyEditorUi extension (alias, element path, element tag name, metadata, and schema alias) so Umbraco can render your editor in Data Types and editor screens.
- Configurable behavior: Read editor configuration from the manifest (settings like placeholders, max lengths, and other UI parameters) to reuse the same UI element across multiple data types.
- Schema-alias correctness: Select safe built-in schema aliases (e.g.,
Umbraco.Plain.String, Umbraco.Plain.Json) to ensure the stored value type round-trips correctly.
- Troubleshooting guidance: Resolve common issues like 404 schema alias problems and incorrect value persistence with
Umbraco.Plain.Json.
Quick Start
Use the docs linked in the skill to register your propertyEditorUi in umbraco-package.json, implement the Lit element that renders the chosen UUI controls, and ensure the manifest propertyEditorSchemaAlias matches an existing server-side schema.
