What is a UFM component in Umbraco?

UFM stands for Umbraco Flavored Markdown. UFM components are extensions that allow developers to create custom syntax markers (like # or %) that transform into dynamic HTML when rendered in the backoffice.

How do I use a custom UFM component in the backoffice?

Once registered via a manifest, you use the defined alias or marker within curly braces, such as {myAlias:value} or {%value}, inside property labels or markdown descriptions.

Does this skill support the latest Umbraco version?

Yes, it is specifically designed for the modern Umbraco Backoffice (v14 and above) which utilizes TypeScript, Lit, and the new Extension Registry.

Can UFM components render complex UI elements?

Absolutely. A UFM component can return HTML strings that include custom web components, allowing you to bridge simple markdown text with sophisticated Lit elements.

Umbraco UFM Component Creator

Name: Umbraco UFM Component Creator
Author: umbraco

byumbraco

•

Content Management

Implements custom Umbraco Flavored Markdown (UFM) components to extend backoffice text rendering with dynamic HTML and data.

About

This skill empowers developers to extend the Umbraco CMS Backoffice by creating custom UFM (Umbraco Flavored Markdown) components. These components allow for the injection of dynamic content—such as localized strings, property values, or custom UI elements—directly into markdown text using shorthand markers. By automating the generation of manifests and implementation logic, the skill ensures that custom markers transform seamlessly into HTML, providing a more interactive and context-aware experience for content editors within the Umbraco interface.

Key Features

Integrates with Umbraco Localization and Context APIs for dynamic data
Generates UFM component manifests and TypeScript implementation files
Supports custom marker syntax for shorthand markdown extensions
Automates documentation retrieval for latest Umbraco foundation patterns
1 GitHub stars
Provides templates for custom Lit-based UI elements within markdown

Use Cases

Creating custom shorthand markers for brand-specific UI elements in CMS labels
Displaying dynamic property values within backoffice markdown descriptions
Building localized markdown components for multi-lingual Umbraco installations

About

Key Features

Integrates with Umbraco Localization and Context APIs for dynamic data
Generates UFM component manifests and TypeScript implementation files
Supports custom marker syntax for shorthand markdown extensions
Automates documentation retrieval for latest Umbraco foundation patterns
1 GitHub stars
Provides templates for custom Lit-based UI elements within markdown

Use Cases

Creating custom shorthand markers for brand-specific UI elements in CMS labels
Displaying dynamic property values within backoffice markdown descriptions
Building localized markdown components for multi-lingual Umbraco installations