umbraco-property-editor-schema

v2026.09.25

Implement property editor schemas in Umbraco backoffice using official docs

GitHub
Install command
npx skhub add umbraco/umbraco-property-editor-schema
Markdown
SKILL.md

Umbraco Property Editor Schema

What is it?

A Property Editor Schema defines the server-side metadata and configuration structure for a property editor - essentially the "blueprint" for how data is stored and processed. It's one half of a property editor (paired with a Property Editor UI). The schema determines data validation, storage format, and how property data is made available when rendering the website. Most custom editors can use built-in schemas; custom schemas are needed for specialized data handling.

Documentation

Always fetch the latest docs before implementing:

When to Create a Custom Schema

Use a built-in schema when possible. Create a custom schema when you need:

  • Custom server-side validation
  • Special data transformation before storage
  • Custom property value converters for rendering
  • Complex data structures not covered by built-in schemas

Workflow

  1. Fetch docs - Use WebFetch on the URLs above
  2. Ask questions - Can a built-in schema work? What data validation needed? Custom value converter?
  3. Generate files - Create C# schema class if needed, or use built-in schema alias
  4. Explain - Show what was created and how to test

Built-in Schema Aliases

Use these in your Property Editor UI manifest's propertyEditorSchemaAlias:

AliasUse Case
Umbraco.Plain.StringSimple string, no validation
Umbraco.Plain.IntegerSimple integer
Umbraco.Plain.DecimalDecimal numbers
Umbraco.Plain.DateTimeDate/time values
Umbraco.Plain.JsonJSON objects/arrays
Umbraco.TextBoxString with maxlength validation
Umbraco.TextAreaMulti-line text
Umbraco.TrueFalseBoolean values
Umbraco.ColorPickerColor values
Umbraco.ContentPickerContent node references
Umbraco.MediaPickerMedia references
Umbraco.MultiUrlPickerMultiple URL links
Umbraco.TagsTag collections
Umbraco.RichTextRich text HTML

Minimal Examples

Using Built-in Schema (Most Common)

{
  "type": "propertyEditorUi",
  "alias": "My.PropertyEditorUi.Custom",
  "name": "My Custom Editor",
  "element": "/App_Plugins/MyEditor/editor.js",
  "meta": {
    "propertyEditorSchemaAlias": "Umbraco.Plain.String"
  }
}

Custom Schema (C#) - Only When Needed

using Umbraco.Cms.Core.IO;
using Umbraco.Cms.Core.PropertyEditors;
using Umbraco.Cms.Core.Services;

namespace MyPackage.PropertyEditors;

[DataEditor(
    alias: "My.PropertyEditor.Custom",
    name: "My Custom Editor",
    view: "~/App_Plugins/MyEditor/editor.html")]
public class MyPropertyEditor : DataEditor
{
    private readonly IIOHelper _ioHelper;
    private readonly IEditorConfigurationParser _editorConfigurationParser;

    public MyPropertyEditor(
        IDataValueEditorFactory dataValueEditorFactory,
        IIOHelper ioHelper,
        IEditorConfigurationParser editorConfigurationParser)
        : base(dataValueEditorFactory)
    {
        _ioHelper = ioHelper;
        _editorConfigurationParser = editorConfigurationParser;
        SupportsReadOnly = true;
    }

    protected override IConfigurationEditor CreateConfigurationEditor() =>
        new MyConfigurationEditor(_ioHelper, _editorConfigurationParser);
}

Custom Configuration Editor

using Umbraco.Cms.Core.IO;
using Umbraco.Cms.Core.PropertyEditors;
using Umbraco.Cms.Core.Services;

namespace MyPackage.PropertyEditors;

public class MyConfigurationEditor : ConfigurationEditor<MyConfiguration>
{
    public MyConfigurationEditor(
        IIOHelper ioHelper,
        IEditorConfigurationParser editorConfigurationParser)
        : base(ioHelper, editorConfigurationParser)
    {
    }
}

public class MyConfiguration
{
    [ConfigurationField("maxItems", "Maximum Items", "number")]
    public int MaxItems { get; set; } = 10;

    [ConfigurationField("allowNull", "Allow Empty", "boolean")]
    public bool AllowNull { get; set; } = true;
}

Custom Value Converter

using Umbraco.Cms.Core.Models.PublishedContent;
using Umbraco.Cms.Core.PropertyEditors;

namespace MyPackage.PropertyEditors;

public class MyValueConverter : PropertyValueConverterBase
{
    public override bool IsConverter(IPublishedPropertyType propertyType)
        => propertyType.EditorAlias == "My.PropertyEditor.Custom";

    public override Type GetPropertyValueType(IPublishedPropertyType propertyType)
        => typeof(MyModel);

    public override object? ConvertSourceToIntermediate(
        IPublishedElement owner,
        IPublishedPropertyType propertyType,
        object? source,
        bool preview)
    {
        if (source is string json && !string.IsNullOrEmpty(json))
        {
            return JsonSerializer.Deserialize<MyModel>(json);
        }
        return null;
    }
}

That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.

Discovery
Tags

No tags published for this skill.

Version
Latest version metadata

Version

v2026.09.25

Published

Sep 25, 2026

Category

Uncategorized

License

Not specified

Source path

plugins/umbraco-backoffice-skills/skills/umbraco-property-editor-schema

Default branch

main

Latest commit

78b551b

Tree SHA

09faac3