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.

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

01Integrates with Umbraco Localization and Context APIs for dynamic data

02Generates UFM component manifests and TypeScript implementation files

03Supports custom marker syntax for shorthand markdown extensions

04Automates documentation retrieval for latest Umbraco foundation patterns

051 GitHub stars

06Provides templates for custom Lit-based UI elements within markdown

Use Cases

01Creating custom shorthand markers for brand-specific UI elements in CMS labels

02Displaying dynamic property values within backoffice markdown descriptions

03Building localized markdown components for multi-lingual Umbraco installations

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add umbraco/umbraco-cms-backoffice-skills umbraco-ufm-component

For use in Claude.ai and ChatGPT

Download Skill