skills.rest
albanistrefi
albanistrefiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

umbraco-property-editor-ui

Generate Umbraco property editor TypeScript elements and manifest configurations.

4|Updated Mar 6, 2026
Search Tags:#typescript#data persistence#umbraco#backoffice#property editor ui#uui#schema alias
One-click install
npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-property-editor-ui-albanistrefi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-property-editor-ui
Source: https://github.com/albanistrefi/umbraco_CLI/tree/main/skills/property-editors/umbraco-property-editor-ui
Command: npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-property-editor-ui-albanistrefi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you implement a correct Umbraco backoffice Property Editor UI by aligning client-side TypeScript behavior with the server-side schema it stores, reducing trial-and-error and common integration failures.

Core Features & Use Cases

  • Doc-driven implementation: Guides you to fetch the latest official Umbraco property editor documentation before generating files.
  • Working UI + manifest setup: Produces an umbraco-package.json entry and a UUI-based TypeScript element that dispatches change events properly.
  • Schema-alias correctness: Focuses on using valid propertyEditorSchemaAlias values (including built-in schema aliases) to avoid 404 errors and ensure data persists correctly.
  • Configuration support: Shows how to read editor configuration via UmbPropertyEditorConfigCollection and apply it to UI behavior (e.g., placeholder/max length).
  • Troubleshooting guidance: Provides targeted fixes for typical failures such as missing server schema aliases and value persistence issues with Umbraco.Plain.Json.

Quick Start

Implement the UI by using the official docs links, create your property editor manifest and TypeScript element together, then verify your UI works by creating the Data Type using the same schema alias you referenced in the manifest.

Frequently Asked Questions about umbraco-property-editor-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build an Umbraco backoffice property editor UI in TypeScript?▼

To build an Umbraco property editor UI, you create a client-side TypeScript element and a matching manifest configuration in `umbraco-package.json` that dispatches change events so Umbraco receives updated values. This process aligns client-side behavior with the server-side schema.

Why does my Umbraco property editor return a 404 or fail to persist values?▼

Umbraco property editors fail to persist values or return 404 errors when the manifest uses an invalid server-side `propertyEditorSchemaAlias`. You must use a valid schema alias, such as handling JSON objects correctly with `Umbraco.Plain.Json`, to ensure data stores properly.

How do I use configuration collections in an Umbraco property editor?▼

You read editor configuration in an Umbraco property editor by accessing the `UmbPropertyEditorConfigCollection` within your TypeScript element. This allows you to apply configured UI behaviors like setting placeholders or maximum length limits dynamically.

What is a propertyEditorSchemaAlias and when do I need it for Umbraco?▼

A `propertyEditorSchemaAlias` is a required server-side identifier in Umbraco that maps your client-side UI element to the correct data storage schema. You need it when creating the Data Type to verify your UI works and avoid integration failures.

Can I store JSON objects using a custom Umbraco property editor UI?▼

You can store JSON objects in an Umbraco property editor UI by using the correct `propertyEditorSchemaAlias` for JSON persistence. The implementation supports common scenarios including plain text, numbers, and JSON objects by wiring change events properly.

Do I need to fetch official documentation before implementing an Umbraco property editor?▼

Fetching the latest official Umbraco property editor documentation is required before generating the manifest and TypeScript files. This doc-driven implementation approach reduces trial-and-error and ensures your UI aligns with current server-side schema requirements.

Related Skills

Explore More Software Engineering Skills→
kraftvaerkkraftvaerk

umbraco-add-extension-reference

Add Umbraco extension project references to .csproj and .sln files.

Official
Intermediate
kraftvaerkkraftvaerk

umbraco-property-editor-schema

Implement Umbraco property editor schemas with C# and manifest configurations.

Official
Intermediate
umbracoumbraco
26

umbraco-umbraco-element

Implement Umbraco backoffice Web Components using UmbElementMixin and UmbLitElement.

Official
Intermediate
albanistrefialbanistrefi
4

umbraco-validation-context

Implement client-side and server-side form validation in Umbraco backoffice UI using UmbValidationContext and JSON Path.

Community
Intermediate