umbraco-property-editor-ui

Implement custom Umbraco property editor UIs with TypeScript and LitElement.

Updated Mar 6, 2026
One-click install
npx skills add https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy --skill umbraco-property-editor-ui-kraftvaerk
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: umbraco-property-editor-ui
Source: https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy/tree/main/Kraftvaerk.Umbraco.Alchemy.Frontend/.agents/skills/umbraco-property-editor-ui
Command: npx skills add https://github.com/kraftvaerk/Kraftvaerk.Umbraco.Alchemy --skill umbraco-property-editor-ui-kraftvaerk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers create custom user interfaces for data input within the Umbraco backoffice, enabling tailored content management experiences.

Core Features & Use Cases

  • UI Implementation: Develop custom property editor UIs using LitElement and Umbraco's component library.
  • Configuration: Define and manage editor settings through a manifest file.
  • Schema Integration: Connect client-side UIs with server-side data schemas.
  • Use Case: Create a unique color picker UI for editors to select brand colors, with configuration options for predefined palettes.

Quick Start

Fetch the latest documentation for creating a property editor UI in Umbraco.

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 property editor UI in the Umbraco backoffice?

Build a custom property editor UI in the Umbraco backoffice using TypeScript and LitElement. Define UI elements, handle data binding, and integrate with Umbraco's extension system via manifest files.

What is needed to create custom Umbraco property editors for data input?

Creating custom Umbraco property editors for data input requires developing UI components with LitElement and Umbraco's component library, then defining and managing editor configuration through a manifest file.

Does Umbraco support LitElement for custom backoffice property editors?

Yes, Umbraco supports LitElement for custom backoffice property editors. You can implement bespoke content input components using TypeScript alongside Umbraco's component library and extension system.

How do I connect a custom Umbraco property editor UI to a server-side data schema?

Connect a custom Umbraco property editor UI to a server-side data schema by defining data binding within your LitElement component and mapping configuration settings through the manifest file.

When do I need a custom property editor in Umbraco?

You need a custom property editor in Umbraco when standard content input types are insufficient. It enables tailored content management experiences for bespoke data input requirements beyond standard types.

Can I add configuration options to a custom Umbraco property editor?

Yes, you can add configuration options to a custom Umbraco property editor. Define and manage editor settings through a manifest file to support features like predefined palettes for a color picker UI.