umbraco-ufm-component

Implement Umbraco Flavored Markdown components in TypeScript for the Umbraco backoffice.

4|Updated Mar 6, 2026

Search Tags:#markdown #customization #component #umbraco #backoffice #ufm

Ready to run

npx skills add https://github.com/albanist/umbraco_CLI --skill umbraco-ufm-component-albanist

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: umbraco-ufm-component
Source: https://github.com/albanist/umbraco_CLI/tree/main/skills/extensions/umbraco-ufm-component
Command: npx skills add https://github.com/albanist/umbraco_CLI --skill umbraco-ufm-component-albanist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables developers to extend Umbraco's markdown rendering capabilities by creating custom components, allowing for dynamic content insertion and richer markdown experiences within the Umbraco backoffice.

Core Features & Use Cases

Custom Syntax: Define unique markers (e.g., {%myComponent:value}) to represent dynamic content.
HTML Transformation: Process these markers into HTML elements during rendering.
Use Case: Integrate localized strings, property values, or custom UI elements directly within markdown fields in the Umbraco backoffice.

Quick Start

Use the umbraco-ufm-component skill to create a new UFM component that renders a highlight span with yellow background.

Frequently Asked Questions about umbraco-ufm-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create custom markdown components in Umbraco?▼

To create custom markdown components in Umbraco, implement Umbraco Flavored Markdown (UFM) using TypeScript to define unique syntax markers that transform into HTML elements during backoffice rendering. This enables dynamic content insertion directly within markdown fields.

What is Umbraco Flavored Markdown and when do I need it?▼

Umbraco Flavored Markdown (UFM) is an extension mechanism allowing developers to define custom markdown syntax that transforms into HTML. You need UFM when integrating dynamic content like localized strings or property values directly within the Umbraco backoffice markdown fields.

Do I need TypeScript to customize Umbraco backoffice markdown rendering?▼

Yes, TypeScript is required to customize Umbraco backoffice markdown rendering through UFM components. You must use TypeScript to implement the component logic and register it via Umbraco's extension registry to process custom syntax into HTML.

How do I add localized strings or property values to Umbraco markdown fields?▼

To add localized strings or property values to Umbraco markdown fields, create a custom UFM component using TypeScript. Define a unique marker syntax like `{%myComponent:value}` that the Umbraco backoffice processes and transforms into the desired dynamic HTML.

What are the limitations of customizing markdown rendering in the Umbraco backoffice?▼

Customizing markdown rendering via UFM requires understanding Umbraco's extension registry and UFM documentation. Limitations include the need for TypeScript implementation and dependency on Umbraco's manifest and component architecture to properly register and render custom syntax.