Skip to content

Customizing > Property Editor #7687

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
busrasengul wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Customizing > Property Editor #7687

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
601b567
Customizing > Property Editor
busrasengul Dec 3, 2025
2e219a6
Adding v16 document for customizing>property editor
busrasengul Dec 3, 2025
32335c5
Fixing wording and reordering
busrasengul Dec 3, 2025
7ae5ce8
Fix formatting and punctuation in README links
sofietoft Dec 17, 2025
d44dc6b
Revise README.md for Property Editors section
sofietoft Dec 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 30 additions & 15 deletions 16/umbraco-cms/customizing/property-editors/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,36 +5,51 @@
# Property Editors

{% hint style="info" %}
[This tutorial](../../tutorials/creating-a-property-editor/) contains step-by-step instructions for building a custom Property editor.
[This tutorial](../../tutorials/creating-a-property-editor/) contains step-by-step instructions for building a custom Property Editor.
Copy link
Contributor

@sofietoft sofietoft Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was a little unclear as to what "This" what referring to, so I've rewritten this note a bit.
Let me know what you think!

Suggested change
[This tutorial](../../tutorials/creating-a-property-editor/) contains step-by-step instructions for building a custom Property Editor.
This article acts as an overview for all things related to Property Editors. See the [Creating a Property Editor](../../tutorials/creating-a-property-editor/) section for step-by-step instructions on building a custom Property Editor.

{% endhint %}

{% hint style="warning" %}
The Property Editor articles are a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.
{% endhint %}
This section describes how to work with and create Property Editors. A Property Editor is the editor used to insert content into Umbraco. [See the Property Editors overview for a detailed definition](../../fundamentals/backoffice/property-editors/).

This section describes how to work with and create Property Editors. A property editor is the editor used to insert content into Umbraco. [See here for definition](../../fundamentals/backoffice/property-editors/)
## [Umbraco Package](../umbraco-package.md)

## [Property Editors Composition](composition/)
Custom Property Editors are registered in the [`umbraco-package.json`](../umbraco-package.md) file. This manifest file declares your Property Editor UI extension and links it to a Property Editor Schema. Learn more about the [package manifest format and registration](../umbraco-package.md).

A property editor is an editor used to insert content into Umbraco. A Property Editor is composed of two extensions: Property Editor Schema and Property Editor UI.
## [Property Editor Validation](property-editor-validation.md)

## [Package Manifest](../umbraco-package.md)
Add validation rules to your custom Property Editors to ensure data integrity. Learn how to implement client-side validation using the Form Control Mixin and create custom validation logic for your Property Editor UI.

## [Property Editors Composition](composition/)

Reference for the package.manifest JSON file format to register one or more property editors for Umbraco.
A Property Editor is composed of two key extensions: [Property Editor Schema](composition/property-editor-schema.md) and [Property Editor UI](composition/property-editor-ui.md). These components work together to define the data structure and user interface for content entry in the Umbraco backoffice.

## [Property Value Converters](property-value-converters.md)

Convert the stored property data value to a useful object returned by the Published Content APIs.
Convert the stored property data value to a useful, strongly-typed object returned by the [Published Content APIs](../../reference/templating/mvc/querying.md). This allows you to work with rich data types in your views and controllers instead of raw stored values.

## [Property Actions](property-actions.md)

Use Property Actions to add additional functionality to your custom property editors.
Use Property Actions to add additional functionality to your custom Property Editors, such as custom buttons or actions that appear alongside the editor in the backoffice.

Check warning on line 31 in 16/umbraco-cms/customizing/property-editors/README.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[UmbracoDocs.SentenceLength] Write shorter sentences (less than 25 words). For content inside note or warning blocks, add blank lines around the content.

Raw Output:
{"message": "[UmbracoDocs.SentenceLength] Write shorter sentences (less than 25 words). For content inside note or warning blocks, add blank lines around the content.", "location": {"path": "16/umbraco-cms/customizing/property-editors/README.md", "range": {"start": {"line": 31, "column": 1}}}, "severity": "WARNING"}
Copy link
Contributor

@sofietoft sofietoft Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixing a too-long sentence:

Suggested change
Use Property Actions to add additional functionality to your custom Property Editors, such as custom buttons or actions that appear alongside the editor in the backoffice.
Use Property Actions to add additional functionality to your custom Property Editors. This could include custom buttons or actions that appear alongside the editor in the backoffice.


## [Integrate Property Editors](integrate-property-editors.md)

Learn how to integrate and use Property Editors anywhere in the Umbraco backoffice using the `umb-property` and `umb-property-dataset` components. This guide covers implementing Property Editors in custom interfaces and scenarios.

## [Tracking References](tracking.md)

Learn how to extend Property editors to track entity references inside the property editor.
Learn how to extend Property Editors to track entity references within the Property Editor. This enables Umbraco to understand relationships between content and helps with features like dependency tracking and content deletion warnings.

## [Property Dataset](property-dataset.md)

Understand how to use the Property Dataset Context API to manage data for multiple properties. This is essential when integrating Property Editors into custom views, workspaces, or scenarios outside of standard content editing.

## More information
## More Information

* [Built in Property Editors](../../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/)
* [Creating a property editor](../../tutorials/creating-a-property-editor/)
* [Built-in Property Editors](../../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/) - Explore the Property Editors that come out of the box with Umbraco.
* [Creating a Property Editor Tutorial](../../tutorials/creating-a-property-editor/) - Step-by-step guide to building your first custom Property Editor.
* [Adding Configuration](../../tutorials/creating-a-property-editor/adding-configuration-to-a-property-editor.md) - Learn how to add configurable settings to your Property Editor.
* [Adding Server-side Validation](../../tutorials/creating-a-property-editor/adding-server-side-validation.md) - Implement server-side validation for your Property Editor.
* [Custom Value Conversion](../../tutorials/creating-a-property-editor/custom-value-conversion-for-rendering.md) - Create Property Value Converters for custom rendering.
* [Integrating Context](../../tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md) - Work with Umbraco's Context API in your Property Editor.
* [Default Property Editor Schema Aliases](../../tutorials/creating-a-property-editor/default-property-editor-schema-aliases.md) - Reference list of available Property Editor Schemas.
* [Full Property Value Converter Examples](full-examples-value-converters.md) - Complete code examples for implementing Property Value Converters.
* [Extending Overview](../extending-overview/) - Learn about the extension system and development workflow for building Umbraco extensions.
47 changes: 32 additions & 15 deletions 17/umbraco-cms/customizing/property-editors/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,36 +5,53 @@
# Property Editors

{% hint style="info" %}
[This tutorial](../../tutorials/creating-a-property-editor/) contains step-by-step instructions for building a custom Property editor.
[This tutorial](../../tutorials/creating-a-property-editor/) contains step-by-step instructions for building a custom Property Editor.
{% endhint %}

{% hint style="warning" %}
The Property Editor articles are a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.
{% endhint %}
This section describes how to work with and create Property Editors. A Property Editor is the editor used to insert content into Umbraco. [See the Property Editors overview for a detailed definition](../../fundamentals/backoffice/property-editors/).

This section describes how to work with and create Property Editors. A property editor is the editor used to insert content into Umbraco. [See here for definition](../../fundamentals/backoffice/property-editors/)
## [Umbraco Package](../umbraco-package.md)

## [Property Editors Composition](composition/)
Custom Property Editors are registered in the [`umbraco-package.json`](../umbraco-package.md) file. This manifest file declares your Property Editor UI extension and links it to a Property Editor Schema. Learn more about the [package manifest format and registration](../umbraco-package.md).

## [Property Editor Validation](property-editor-validation.md)

A property editor is an editor used to insert content into Umbraco. A Property Editor is composed of two extensions: Property Editor Schema and Property Editor UI.
Add validation rules to your custom Property Editors to ensure data integrity. Learn how to implement client-side validation using the Form Control Mixin and create custom validation logic for your Property Editor UI.

## [Property Editors Composition](composition/)

## [Package Manifest](../umbraco-package.md)
A Property Editor is composed of two key extensions: [Property Editor Schema](composition/property-editor-schema.md) and [Property Editor UI](composition/property-editor-ui.md). These components work together to define the data structure and user interface for content entry in the Umbraco backoffice.

Reference for the package.manifest JSON file format to register one or more property editors for Umbraco.
Optionally, you can use a [Property Editor Data Source](composition/property-editor-data-source.md) to provide data to your Property Editor UI, allowing the same UI to work with different data sources.

Check warning on line 25 in 17/umbraco-cms/customizing/property-editors/README.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[UmbracoDocs.SentenceLength] Write shorter sentences (less than 25 words). For content inside note or warning blocks, add blank lines around the content.

Raw Output:
{"message": "[UmbracoDocs.SentenceLength] Write shorter sentences (less than 25 words). For content inside note or warning blocks, add blank lines around the content.", "location": {"path": "17/umbraco-cms/customizing/property-editors/README.md", "range": {"start": {"line": 25, "column": 1}}}, "severity": "WARNING"}
Copy link
Contributor

@sofietoft sofietoft Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Optionally, you can use a [Property Editor Data Source](composition/property-editor-data-source.md) to provide data to your Property Editor UI, allowing the same UI to work with different data sources.
Optionally, you can use a [Property Editor Data Source](composition/property-editor-data-source.md) to provide data to your Property Editor UI. This will allow the same UI to work with different data sources.


## [Property Value Converters](property-value-converters.md)

Convert the stored property data value to a useful object returned by the Published Content APIs.
Convert the stored property data value to a useful, strongly-typed object returned by the [Published Content APIs](../../reference/querying/). This allows you to work with rich data types in your views and controllers instead of raw stored values.

## [Property Actions](property-actions.md)

Use Property Actions to add additional functionality to your custom property editors.
Use Property Actions to add additional functionality to your custom Property Editors, such as custom buttons or actions that appear alongside the editor in the backoffice.

Check warning on line 33 in 17/umbraco-cms/customizing/property-editors/README.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[UmbracoDocs.SentenceLength] Write shorter sentences (less than 25 words). For content inside note or warning blocks, add blank lines around the content.

Raw Output:
{"message": "[UmbracoDocs.SentenceLength] Write shorter sentences (less than 25 words). For content inside note or warning blocks, add blank lines around the content.", "location": {"path": "17/umbraco-cms/customizing/property-editors/README.md", "range": {"start": {"line": 33, "column": 1}}}, "severity": "WARNING"}
Copy link
Contributor

@sofietoft sofietoft Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Use Property Actions to add additional functionality to your custom Property Editors, such as custom buttons or actions that appear alongside the editor in the backoffice.
Use Property Actions to add additional functionality to your custom Property Editors. This could include custom buttons or actions that appear alongside the editor in the backoffice.


## [Integrate Property Editors](integrate-property-editors.md)

Learn how to integrate and use Property Editors anywhere in the Umbraco backoffice using the `umb-property` and `umb-property-dataset` components. This guide covers implementing Property Editors in custom interfaces and scenarios.

## [Tracking References](tracking.md)

Learn how to extend Property editors to track entity references inside the property editor.
Learn how to extend Property Editors to track entity references within the Property Editor. This enables Umbraco to understand relationships between content and helps with features like dependency tracking and content deletion warnings.

## [Property Dataset](property-dataset.md)

Understand how to use the Property Dataset Context API to manage data for multiple properties. This is essential when integrating Property Editors into custom views, workspaces, or scenarios outside of standard content editing.

## More information
## More Information

* [Built in Property Editors](../../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/)
* [Creating a property editor](../../tutorials/creating-a-property-editor/)
* [Built-in Property Editors](../../fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/) - Explore the Property Editors that come out of the box with Umbraco.
* [Creating a Property Editor Tutorial](../../tutorials/creating-a-property-editor/) - Step-by-step guide to building your first custom Property Editor.
* [Adding Configuration](../../tutorials/creating-a-property-editor/adding-configuration-to-a-property-editor.md) - Learn how to add configurable settings to your Property Editor.
* [Adding Server-side Validation](../../tutorials/creating-a-property-editor/adding-server-side-validation.md) - Implement server-side validation for your Property Editor.
* [Custom Value Conversion](../../tutorials/creating-a-property-editor/custom-value-conversion-for-rendering.md) - Create Property Value Converters for custom rendering.
* [Integrating Context](../../tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md) - Work with Umbraco's Context API in your Property Editor.
* [Default Property Editor Schema Aliases](../../tutorials/creating-a-property-editor/default-property-editor-schema-aliases.md) - Reference list of available Property Editor Schemas.
* [Full Property Value Converter Examples](full-examples-value-converters.md) - Complete code examples for implementing Property Value Converters.
* [Development Flow](../development-flow/) - Learn about the development workflow for building Umbraco extensions.
Loading