Markdown Text

Markdown Text components are Display Fields used to render structured and formatted content as HTML. They are non-interactive and purely informational. Use them when you need to display rich content such as headings, lists, bold text, links, or any other markdown-formatted text — as opposed to alert, which is designed for short status messages.

Programmatic

markdowntext.ts

import { golemForm } from '@golemui/gui-shared';

export default golemForm().create({
  form: [
    {
      uid: 'markdowntext_demo',
      kind: 'display',
      type: 'markdownText',
      props: {
        md: '## Welcome

This is a **markdownText** display widget. It renders _markdown_ content as formatted HTML.

- Use it for structured text
- Use it for rich content display
- Use it for formatted instructions',
      },
    },
  ],
});

JSON

markdowntext.json

{
  "form": [
    {
      "uid": "markdowntext_demo",
      "kind": "display",
      "type": "markdownText",
      "props": {
        "md": "## Welcome\n\nThis is a **markdownText** display widget. It renders _markdown_ content as formatted HTML.\n\n- Use it for structured text\n- Use it for rich content display\n- Use it for formatted instructions"
      }
    }
  ]
}

Dependencies

The Markdown Text component requires a markdown parser to render formatted HTML. Since the parser is a third-party dependency, it is not bundled with the component. Instead, you provide it at the form level via the dependencies property, keeping the core library decoupled from any specific parser.

Tip

You can use any markdown parser that exposes a (markdown: string) => string function, such as snarkdown, marked, or micromark.

Pass dependencies as a property on the form component itself, not inside the widget’s props:

React

import snarkdown from 'snarkdown';
import { Dependencies } from '@golemui/gui-shared';

const deps: Dependencies = {
  markdown: {
    parse: (md: string) => snarkdown(md),
  },
};

<GolemForm
  formDef={formDef}
  data={formData}
  dependencies={deps}
  ...
/>

Angular

import snarkdown from 'snarkdown';
import { Dependencies } from '@golemui/gui-shared';

protected deps: Dependencies = {
  markdown: {
    parse: (md: string) => snarkdown(md),
  },
};

<gui-form
  [formDef]="formDef"
  [data]="formData"
  [dependencies]="deps"
  ...
></gui-form>

Lit

import snarkdown from 'snarkdown';
import { Dependencies } from '@golemui/gui-shared';

const deps: Dependencies = {
  markdown: {
    parse: (md: string) => snarkdown(md),
  },
};

<golem-form
  .formDef=${formDef}
  .data=${formData}
  .dependencies=${deps}
  ...
></golem-form>

Note

The markdown content will only be rendered as HTML when a dependencies.markdown.parse function is provided. Without it, the widget renders nothing.

Security

Caution

You are responsible for sanitizing the markdown content. The parse function output is injected as raw HTML. This is consistent with the approach recommended by most markdown libraries (e.g. marked, micromark).

Use a sanitization library such as DOMPurify inside your parse function to prevent XSS attacks:

import DOMPurify from 'dompurify';
import { marked } from 'marked';

const deps: Dependencies = {
  markdown: {
    parse: (md: string) => DOMPurify.sanitize(marked(md) as string),
  },
};

Styling

Markdown Text can be styled as explained in the Styling Guide.

CSS Variables

The following CSS custom properties control the visual appearance of rendered markdown content. Override them to match your design system.

CSS Variable	Description
--gui-md-text-color	Base text color
--gui-md-line-height	Base line height
--gui-md-heading-color	Color for h1–h6 headings
--gui-md-heading-weight	Font weight for headings
--gui-md-link-color	Link text color
--gui-md-link-hover-color	Link color on hover
--gui-md-blockquote-bg	Blockquote background
--gui-md-blockquote-border-color	Blockquote left border color
--gui-md-blockquote-color	Blockquote text color
--gui-md-code-bg	Background for inline code and code blocks
--gui-md-code-color	Text color for inline code and code blocks
--gui-md-code-radius	Border radius for inline code
--gui-md-hr-color	Color of horizontal rules

All tokens reference semantic tokens from the design system and adapt automatically in dark mode. See the full reference in Design Tokens — Markdown Text.

Props

Use these props to customize your Markdown Text component.

prop	type	description
md	string	Required. The markdown string to render