skills.rest
1k-off
1k-offCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

umbraco-ufm-component

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

1|Updated May 21, 2026
Search Tags:#typescript#markdown#umbraco#backoffice#ufm#custom component#token rendering
One-click install
npx skills add https://github.com/1k-off/umbraco-observability-playground --skill umbraco-ufm-component-1k-off
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-ufm-component
Source: https://github.com/1k-off/umbraco-observability-playground/tree/main/.agents/skills/umbraco-ufm-component
Command: npx skills add https://github.com/1k-off/umbraco-observability-playground --skill umbraco-ufm-component-1k-off

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the need to extend Umbraco Flavored Markdown (UFM) so editors can use custom markers that render dynamic, structured output instead of plain markdown.

Core Features & Use Cases

  • Define UFM component manifests so your marker syntax is registered and mapped to a renderer.
  • Render token-driven HTML by transforming {marker text} inputs into safe HTML or custom elements.
  • Use in backoffice editor content such as label descriptions and markdown fields to produce localized strings, property-like values, or UI snippets.

Quick Start

Implement the UFM component by fetching the official UFM docs, then generate a manifest entry plus a renderer that outputs the desired markup for your chosen marker syntax.

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 markers in the Umbraco backoffice?▼

To create custom markdown markers in Umbraco, you need a UFM component manifest with a unique alias and marker, plus a renderer implementing UmbUfmComponentBase to handle token text and output safe HTML.

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

Umbraco Flavored Markdown (UFM) extends standard markdown for the backoffice. You need custom components when editors require dynamic, structured output like localized strings or UI snippets instead of plain text.

How do I render dynamic HTML from token text in Umbraco markdown?▼

You render dynamic HTML by implementing a custom UFM renderer that transforms `{marker text}` token inputs into UFM sanitizer-compliant output, allowing structured UI elements within editor-authored markdown fields.

Does Umbraco markdown rendering support custom UI snippets and localized strings?▼

Yes, Umbraco markdown rendering supports custom UI snippets and localized strings by registering a custom UFM component manifest that maps your specific marker syntax to a dedicated token-driven HTML renderer.

What are the limitations of extending Umbraco Flavored Markdown with custom components?▼

Extending Umbraco Flavored Markdown requires renderer output to be UFM sanitizer-compliant, meaning custom token-driven HTML must adhere to strict sanitization rules to ensure backoffice security and prevent unsafe markup.

Can I use TypeScript to build a custom UFM component for Umbraco?▼

Yes, you can use TypeScript to build custom UFM components by implementing the UmbUfmComponentBase interface to define how your custom marker syntax parses token text and generates dynamic backoffice HTML.

Related Skills

Explore More Software Engineering Skills→
albanistrefialbanistrefi
4

umbraco-ufm-component

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

Community
Intermediate
albanistalbanist
4

umbraco-ufm-component

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

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