Umbraco Property Editor Ui
Builds property editor UIs for Umbraco's backoffice using the modern TypeScript/Lit element approach. Pulls from official docs and includes working examples with UmbElementMixin, proper event dispatching, and configuration setup. The built-in schema alias table is genuinely helpful since mismatching client UI to server schema causes 404 errors that aren't obvious. Covers the full workflow from manifest to element implementation, though you'll still need the C# side if you want custom data validation. Good troubleshooting section addresses the common gotchas with JSON persistence and UUI components.
- skills.sh installs
- 405
- GitHub stars
- 27
- last updated
- Aug 21, 2026
Install
$ npx -y skills add umbraco/umbraco-cms-backoffice-skills --skill umbraco-property-editor-ui --agent claude-codeInstalls into .claude/skills of the current project.
Files
Umbraco Property Editor UI
What is it?
A Property Editor UI is the visual component that users interact with in the Umbraco backoffice to input and manage content data. It's one half of a property editor - the UI (client-side TypeScript) pairs with a Schema (server-side C#) that defines data storage.
Documentation
Always fetch the latest docs before implementing:
- Main docs: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/property-editors
- Tutorial: https://docs.umbraco.com/umbraco-cms/extend-your-project/tutorials/creating-a-property-editor
- Configuration: https://docs.umbraco.com/umbraco-cms/extend-your-project/tutorials/creating-a-property-editor/adding-configuration-to-a-property-editor
- Foundation: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation
- Extension Registry: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-registry
Reference Example
The Umbraco source includes a working example:
Location: /Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/property-editor/
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/umbraco/umbraco-cms-backoffice-skills
- Categories
- Documentation, .NET & C#
- First seen
- Jun 3, 2026
More from umbraco/umbraco-cms-backoffice-skills
All 76- Umbraco Extension Registry403
- Umbraco Notifications403
- Umbraco Add Extension Reference402
- Umbraco Context Api402
- Umbraco Routing401
- Umbraco Entity Create Option Action400
- Umbraco Menu Items400
- Umbraco Mfa Login Provider400
- Umbraco Repository Pattern400
- Umbraco Auth Provider399
- Umbraco Dynamic Root399
- Umbraco Collection View398
- Umbraco Entity Bulk Actions398
- Umbraco Localization398
- Umbraco Modals398
- Umbraco Entry Point397
- Umbraco Granular User Permissions397
- Umbraco Header Apps397
- Umbraco Health Check397
- Umbraco Icons397
- Umbraco Package View397
- Umbraco Property Action397
- Umbraco Property Editor Schema397
- Umbraco Review Checks397
Recommended
More Documentation
framer-code-components-overridesfredm00n/framerlabsCreate Framer Code Components and Code Overrides. Use when building custom React components for Framer, writing Code Overrides (HOCs) to modify canvas elements,404skills.sh installs
node-best-practicesmcollina/skillsProvides domain-specific best practices for Node.js development with TypeScript, covering type stripping, async patterns, error handling, streams, modules, test404skills.sh installs
frontend-react-router-best-practicessergiodxa/agent-skillsReact Router performance and architecture patterns. Use when writing loaders, actions, forms, routes, or working with React Router data fetching. Triggers on ta402skills.sh installs
umbraco-entity-create-option-actionumbraco/umbraco-cms-backoffice-skillsImplement entity create option actions in Umbraco backoffice using official docs400skills.sh installsumbraco-menu-itemsumbraco/umbraco-cms-backoffice-skillsImplement menu items in Umbraco backoffice using official docs400skills.sh installsumbraco-mfa-login-providerumbraco/umbraco-cms-backoffice-skillsImplement MFA login providers for Umbraco backoffice using official docs400skills.sh installs