skills.rest
umbraco
umbracoOFFICIAL
Explore all skills by this author →
WebsiteGitHub

umbraco-property-editor-ui

Implement custom Umbraco property editor UIs with TypeScript components.

26|13|Updated Nov 30, 2025
Search Tags:#typescript#ui development#umbraco#backoffice#lit-element#property editor
One-click install
npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-property-editor-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-property-editor-ui
Source: https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills/tree/main/plugins/umbraco-backoffice-skills/skills/umbraco-property-editor-ui
Command: npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-property-editor-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers create custom user interface components for property editors within the Umbraco backoffice, enabling tailored data input experiences.

Core Features & Use Cases

  • Implement Property Editor UIs: Develop client-side (TypeScript) components that users interact with to manage content data.
  • Integrate with Umbraco Schema: Pair custom UIs with server-side schemas for data storage and validation.
  • Use Case: Create a unique color picker UI for a content field, or a specialized map selector for location data, enhancing the content editing experience.

Quick Start

Generate a basic Umbraco property editor UI manifest and element implementation using the provided documentation.

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 a custom Umbraco backoffice property editor UI?▼

Build a custom Umbraco backoffice property editor UI by developing client-side TypeScript components that integrate with the content management data schema system for bespoke data input.

What is a property editor UI in Umbraco used for?▼

A property editor UI in Umbraco provides tailored data input experiences for content editors, replacing standard types with bespoke interfaces like custom color pickers or specialized map selectors.

Can I use lit-element to create Umbraco property editors?▼

You can use lit-element to create Umbraco property editors by implementing client-side TypeScript components that integrate directly with the backoffice data schema system.

How do I add a custom color picker UI to Umbraco content fields?▼

Add a custom color picker UI to Umbraco content fields by implementing a bespoke property editor component using TypeScript and pairing it with the server-side data schema.

Does a custom Umbraco property editor UI require server-side schema integration?▼

A custom Umbraco property editor UI requires server-side schema integration to pair with the client-side TypeScript component for proper data storage and validation.

When should I create a custom property editor instead of using standard Umbraco types?▼

Create a custom property editor when standard Umbraco types cannot address specialized data input needs, requiring bespoke TypeScript UI components for tailored content editing experiences.

Related Skills

Explore More Software Engineering Skills→
umbracoumbraco
26

umbraco-property-value-preset

Implement property value presets for Umbraco backoffice property editors using TypeScript and official Umbraco APIs.

Official
Intermediate
kraftvaerkkraftvaerk

umbraco-property-editor-ui

Implement custom Umbraco property editor UIs with TypeScript and LitElement.

Official
Intermediate
kraftvaerkkraftvaerk

umbraco-property-editor-schema

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

Official
Intermediate
albanistalbanist
4

umbraco-collection

Implement custom collections in the Umbraco backoffice using TypeScript.

Community
Advanced