Rich Text: ${ content.markup | stripHtml } ${ $settings.hide == '1' ? '[HIDDEN]' : '' }
Image: ${ caption } ${ $settings.hide == '1' ? '[HIDDEN]' : '' }
Video: ${ caption != '' ? caption : videoUrl } ${ $settings.hide == '1' ? '[HIDDEN]' : '' }
Code Snippet: ${ title } ${ $settings.hide == '1' ? '[HIDDEN]' : '' }
Image Carousel ${ $settings.hide == '1' ? '[HIDDEN]' : '' }
{umbContentName:articleList} Articles ${ $settings.hide == '1' ? '[HIDDEN]' : '' }

The default block labels used in Clean Starter Kit take advantage of a lot of the features we talked about

export const manifests: Array<UmbExtensionManifest> = [
  // Adding a custom UFM filter manifest in the existing manfests.ts file
  {
    // ufmFilter is the type to create a UFM Filter (from the list of possible extension types https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types)
    type: 'ufmFilter',
    // This is the alias used by the Umbraco extenion system to identify the extension, it must be unique
    alias: 'My.UfmFilter.DateFormat',
    // The name of the filter
    name: 'Date Format UFM Filter',
    // Tell it what code to run (we'll look at this file below)
    api: () => import('./date-format.filter'),
    meta: {
      // And give the filter an alias for use in the markdown e.g. {umbValue: dateField | dateFormat}
      alias: 'dateFormat'
    }
  }
];

The Bump Extension starter provides a `manifests.ts` file where we can register our extensions.

import { UmbUfmFilterBase } from '@umbraco-cms/backoffice/ufm';
import { DateTime } from 'luxon';

// Extending the UmbUfmFilterBase to create a custom UFM filter
class UmbUfmDateFormatFilterApi extends UmbUfmFilterBase {
  // The filter method is where the logic of the filter is implemented
  // It takes the value to be filtered and any additional arguments we want to pass, in this case, the date format
  filter(value, format) {
    if (!value) return value;

    // Using Luxon to parse and format the date in the specified format
    const date = value instanceof Date ?
      DateTime.fromJSDate(value) :
      typeof value === 'string' ?
        DateTime.fromISO(value) :
        DateTime.fromISO(value.date, { zone: value.timeZone || undefined });

    return date.toFormat(format || "yyyy-MM-dd HH:mm");
  }
}
export { UmbUfmDateFormatFilterApi as api };

export const manifests: Array<UmbExtensionManifest> = [
  // Our ufmFilter manifest from earlier
  {
    type: 'ufmFilter',
    alias: 'My.UfmFilter.DateFormat',
    name: 'Date Format UFM Filter',
    api: () => import('./date-format.filter'),
    meta: {
      alias: 'dateFormat'
    }
  },
  // Adding a custom UFM component manifest in the existing manfests.ts file
  {
    // ufmComponent is the type to create a UFM Component (from the list of possible extension types https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types)
    type: 'ufmComponent',
    // This is the alias used by the Umbraco extenion system to identify the extension, it must be unique
    alias: 'My.UfmComponent.Tag',
    // The name of the extension
    name: 'Tag UFM Component',
    // Tell it what code to run (we'll look at this file below)
    api: () => import('./tag.component'),
    meta: {
      // And give the component an alias for use in the markdown e.g. {tag: value}
      alias: 'tag'
    }
  }
];

import { Tokens } from '@umbraco-cms/backoffice/external/marked';
import { UmbUfmComponentBase } from '@umbraco-cms/backoffice/ufm';

// This reference is to the custom web component this UFM Component is going to render
import './tag.element';

/// Example usage: `{tag: hide:Hidden:warning:secondary}` where
/// `hide` is the name of a boolean property or setting property
/// `Hidden` is the text to display when true (or truthy)
/// `warning` is the UUI Tag color property (default, positive, warning, danger)
/// `secondary` is the UUI Tag look property (default, primary, secondary, outline, placeholder)

// Extending the UmbUfmComponentBase to create a custom UFM component
export class TagUfmComponentApi extends UmbUfmComponentBase {
	constructor() {
		super();

		this.render = this.render.bind(this);
	}

	// UmbUfmComponentBase expects a render method to be implemented that returns the HTML string to render
	// The token parameter contains the entire Markdown token
	render(token: Tokens.Generic) {
		if (!token.text) return;

		// UmbUfmComponentBase has a helper method to extract HTML attributes from the token text
		const attributes = this.getAttributes(token.text);

		// We're returning the markup for a custom web component here (yay, async!), passing in the attributes we extracted
		return `<ufm-my-tag ${attributes}></ufm-my-tag>`;
	}
}

export { TagUfmComponentApi as api };

	protected override getAttributes(text: string): string | null {
		if (!text) return null;

		const pipeIndex = text.indexOf('|');

		const left = text.substring(0, pipeIndex == -1 ? undefined: pipeIndex).trim();
		const filters = pipeIndex === -1 ? null : text.substring(pipeIndex + 1).trim();

		const parts = left.split(':');
		const alias = parts[0].trim();
		const display = parts[1]?.trim();
		const color = parts[2]?.trim();
		const look = parts[3]?.trim();

		return Object.entries({ alias, filters, display, color, look })
			.map(([key, value]) => (value ? `${key}="${value.trim()}"` : null))
			.join(' ');
	}

`getAttributes` gets more attributes

import { customElement, property, state, html, css } from '@umbraco-cms/backoffice/external/lit';
import { UMB_UFM_RENDER_CONTEXT } from '@umbraco-cms/backoffice/ufm';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';

// This is the tag name of the custom web component, i.e. <ufm-my-tag>
@customElement('ufm-my-tag')

// Normally you might extend UmbUfmElementBase  which includes some filter logic (which this element just ignores anyway)
// but that class forces render to return a string rather than an HTML template
export class UmbUfmLabelValueElement extends UmbLitElement  {

  // These properties would ordinarily be provided by UmbUfmElementBase
  // These all get populated by the getAttributes method in the UFM Component
  @property()
  alias?: string;

  @property()
  display?: string;

  // These properties are the additional ones I overrode the getAttributes method to provide
  @property()
  color?: string;

  @property()
  look?: string;

  // This is a state property which tells Lit to re-render when it changes
  @state()
  show: Boolean;

  constructor() {
    super();

    // Set the default values
    this.show = false;

    // We observe the UFM render context, so when block values change our value updates
    this.consumeContext(UMB_UFM_RENDER_CONTEXT, (context) => {
      this.observe(
        context?.value,
        (value) => {
          // Pull out the value of the referenced property from the context
          if (this.alias !== undefined && value !== undefined && typeof value === 'object') {
            var obj = value as Record<string, unknown>;
            // I'm also making it work for settings, not just content!
            var settings = (obj["$settings"] as Record<string, unknown>) ?? {};
            
            // Ordinarily we'd set UmbUfmElementBase's this.value,
            // but I'm overriding the render function to do something a little different 
            this.show = !!(obj[this.alias] || settings[this.alias]);
          } else {
            this.show = !!value;
          }
        },
        'observeValue',
      );
    });
  }

  // I'm overriding the render method to show or hide the tag based on a block value
  override render() {
    if (this.show) {
      // If I was returning a string, we could've used UmbUfmElementBase
      return html`<uui-tag color="${this.color}" look="${this.look}">${this.display}</uui-tag>`;
    }
    return null;
  }

  // Add some CSS using Lit's convention
  static styles = css`
    uui-tag {
      margin: 0 1ex;
    }
  `;
}

// Expose our element to JS
export { UmbUfmLabelValueElement as element };
declare global {
  interface HTMLElementTagNameMap {
    'ufm-my-tag': UmbUfmLabelValueElement;
  }
}