skills.rest
albanistrefi
albanistrefiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

umbraco-ufm-component

Implement Umbraco Flavored Markdown components that render custom markers as HTML.

4|Updated Mar 6, 2026
Search Tags:#typescript#markdown#umbraco#backoffice#custom components#ufm#ui rendering
One-click install
npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-ufm-component-albanistrefi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-ufm-component
Source: https://github.com/albanistrefi/umbraco_CLI/tree/main/skills/extensions/umbraco-ufm-component
Command: npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-ufm-component-albanistrefi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you implement custom UFM (Umbraco Flavored Markdown) components so your backoffice markdown can render domain-specific markers into safe, dynamic HTML.

Core Features & Use Cases

  • Define UFM component manifests so Umbraco recognizes a new marker/alias pair and routes matching tokens to your renderer.
  • Render custom output by implementing a UFM component class that converts token text into HTML (including custom elements when needed).
  • Standardize behavior with official documentation by aligning the implementation with Umbraco’s UFM extension patterns and example code.

Quick Start

Implement the UFM component by fetching the latest UFM documentation and then writing the required manifests and renderer files using the marker alias you want to support.

Frequently Asked Questions about umbraco-ufm-component

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

FAQPage Schema
How do I render custom HTML elements from markdown markers in the Umbraco backoffice?▼

You can render custom HTML in the Umbraco backoffice by implementing Umbraco Flavored Markdown (UFM) components, which transform specific markdown markers into dynamic, safe HTML output using a registered renderer class.

What is a UFM component in Umbraco and when do I need it?▼

A UFM component is an extension for Umbraco Flavored Markdown that converts custom domain-specific markers into rendered HTML. You need it when standard markdown lacks tokens for localization-like values, property helpers, or custom UI elements in the backoffice.

How do I create a custom UFM component manifest and renderer in TypeScript?▼

To create a custom UFM component, you define a UFM component manifest declaring your marker alias, register it within the UFM manifest system, and implement a TypeScript renderer class that converts the matched token text into the desired HTML output.

Can I use custom UFM components for localization tokens and property value helpers?▼

Yes, custom UFM components are specifically designed to support marker-driven UI elements, enabling you to embed localization-like tokens and property or value helpers dynamically within backoffice markdown content and editor labels.

Do I need any dependencies to extend Umbraco Flavored Markdown with custom components?▼

No external dependencies are required to implement custom UFM components. You write the necessary TypeScript manifests and renderer files directly, aligning your implementation with the official Umbraco UFM extension patterns and component API.

Why are my custom Umbraco markdown markers not rendering in the backoffice?▼

Custom markdown markers fail to render when the UFM component manifest is not properly registered or the renderer class is incompatible with the Umbraco UFM component API, preventing the system from routing matching tokens to your renderer.

Related Skills

Explore More Software Engineering Skills→
albanistalbanist
4

umbraco-ufm-component

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

Community
Intermediate
1k-off1k-off
1

umbraco-ufm-component

Render custom UFM markers as dynamic HTML in Umbraco backoffice markdown.

Community
Intermediate
kraftvaerkkraftvaerk

umbraco-ufm-component

Implement custom Umbraco Flavored Markdown components with custom syntax markers.

Official
Intermediate
umbracoumbraco
26

umbraco-ufm-component

Implement Umbraco Flavored Markdown components with custom markers for dynamic content.

Official
Intermediate