Compositions
What is a Composition?
-
A Composition is a Document Type that is not used to create content directly, but rather to add fields/properties to other Document Types.
-
Think of it like a mixin: reusable fields bundled together.
Example Use Case
Imagine you want several content types (like Article, Event, and Product) to all have:
-
An SEO Title
-
Meta Description
-
Open Graph Image
You can:
-
Create a Document Type called "SEO Settings".
-
Add those properties.
-
Mark it as a Composition by unchecking “Is an element type” and “Allow as root” (or just don’t create content from it).
-
Go to other Document Types (e.g., Article) and add "SEO Settings" under Compositions.
Now, all those types share the same SEO fields.
Benefits
-
✅ Reusability – define once, use everywhere.
-
✅ Consistency – same field names and descriptions.
-
✅ Easier maintenance – update in one place.
Behind the Scenes
In Razor views, you can access composition properties just like any other property:
@Model.Value("seoTitle")
You can group Composition fields into tabs using the “Reorder” feature. This helps you organize your content editing interface better, especially when multiple Compositions are applied to one Document Type.
When you add multiple compositions with the same tab name to a Document Type, Umbraco automatically merges the fields from those compositions into that tab in the backoffice
Real-World Use Case: "SEO" Tab
Imagine you have three Compositions:
Composition 1: SEO Basics
-
seoTitle
-
metaDescription
Composition 2: Open Graph Settings
-
ogTitle
-
ogImage
Composition 3: Twitter Card
-
twitterTitle
-
twitterImage
Now, all three Compositions use the tab name: "SEO"
When you apply them to a Document Type like BlogPost, Umbraco will display all 6 fields under a single "SEO" tab:
[ SEO ]
- seoTitle
- metaDescription
- ogTitle
- ogImage
- twitterTitle
- twitterImage
Benefits of This Pattern:
-
Cleaner UI: Editors don’t have to click through multiple tabs to find related metadata.
-
Modularity: You can reuse parts of the SEO setup on other content types without duplication.
-
Separation of Concerns for Developers: Keep logic split by responsibility while showing a unified interface.
In short, Compositions are the building blocks that bring flexibility and reusability to your Umbraco content models. Use them wisely, and you'll create a cleaner, more maintainable CMS your editors will thank you for.