Markdown

Markdown components are Input Fields that provide a rich text editing experience with a formatting toolbar and an optional live preview panel. The toolbar lets users apply common markdown formatting (headings, bold, italic, quotes, links, lists) without needing to remember the syntax.

Programmatic

markdown.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'markdown',
      path: 'content',
      label: 'Content',
    },
  ],
});

JSON

markdown.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "markdown",
      "path": "content",
      "label": "Content"
    }
  ]
}

Dependencies

The Markdown component requires a markdown parser to power its live preview. 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 live preview will only render parsed HTML when a dependencies.markdown.parse function is provided. Without it, the toolbar and editor still work, but the preview panel will be empty.

Props

Use these props to customize your Markdown component.

prop	type	description
placeholder	string	A placeholder text to display when the editor has no value
hint	string	A description to display below the editor
counterMode	string	Mode for the character counter if maxLength is set, possible values are remaining (default) or current
minimumHeight	number	Minimum height of the editor in pixels, defaults to 120
autoGrow	boolean	If true, the editor will automatically expand its height as the user types
defaultOpenPreview	boolean	If true, the split view preview panel is open by default
tools	MarkdownButtons[]	An array of toolbar buttons to display. Defaults to all buttons
headingTitle	string	Tooltip for the heading button
boldTitle	string	Tooltip for the bold button
italicTitle	string	Tooltip for the italic button
strikethroughTitle	string	Tooltip for the strikethrough button
quoteTitle	string	Tooltip for the quote button
linkTitle	string	Tooltip for the link button
orderedListTitle	string	Tooltip for the ordered list button
unorderedListTitle	string	Tooltip for the unordered list button
splitViewTitle	string	Tooltip for the split view button
autocomplete	string	'on', 'off', or a space-separated list of W3C autofill tokens

Toolbar Buttons

The tools prop lets you customize which toolbar buttons are displayed and their order. Available tokens:

Token	Button	Markdown syntax
H	Heading	# Title
B	Bold	**some text**
I	Italic	_some text_
Q	Quote	> some text
L	Link	[some text](url)
OL	Ordered list	1. some text
UL	Unordered list	- some text
|	Separator	Visual separator only

Programmatic

markdown.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'markdown',
      path: 'content',
      label: 'Content',
      props: {
        tools: ['H', 'B', 'I', 'S', '|', 'UL'],
      },
    },
  ],
});

JSON

markdown.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "markdown",
      "path": "content",
      "label": "Content",
      "props": {
        "tools": ["H", "B", "I", "S", "|", "UL"]
      }
    }
  ]
}

Titles

Use the title props to customize the tooltip text for each toolbar button.

Programmatic

markdown.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'markdown',
      path: 'content',
      label: 'Content',
      props: {
        headingTitle: 'Add heading',
        boldTitle: 'Bold text',
        italicTitle: 'Italic text',
        strikethroughTitle: 'Strikethrough text',
        quoteTitle: 'Add quote',
        linkTitle: 'Insert link',
        orderedListTitle: 'Ordered list',
        unorderedListTitle: 'Bullet list',
        splitViewTitle: 'Toggle preview',
      },
    },
  ],
});

JSON

markdown.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "markdown",
      "path": "content",
      "label": "Content",
      "props": {
        "headingTitle": "Add heading",
        "boldTitle": "Bold text",
        "italicTitle": "Italic text",
        "strikethroughTitle": "Strikethrough text",
        "quoteTitle": "Add quote",
        "linkTitle": "Insert link",
        "orderedListTitle": "Ordered list",
        "unorderedListTitle": "Bullet list",
        "splitViewTitle": "Toggle preview"
      }
    }
  ]
}

Placeholder

Use the property placeholder to add a placeholder.

Programmatic

markdown.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'markdown',
      path: 'content',
      label: 'Content',
      props: {
        placeholder: 'Write your markdown here...',
      },
    },
  ],
});

JSON

markdown.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "markdown",
      "path": "content",
      "label": "Content",
      "props": {
        "placeholder": "Write your markdown here..."
      }
    }
  ]
}

Hint

Note

A label is required for the hint to be displayed.

Use the property hint to add a description.

Programmatic

markdown.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'markdown',
      path: 'content',
      label: 'Content',
      props: {
        hint: 'Supports markdown formatting.',
      },
    },
  ],
});

JSON

markdown.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "markdown",
      "path": "content",
      "label": "Content",
      "props": {
        "hint": "Supports markdown formatting."
      }
    }
  ]
}

Character Counter

Use the validator maxLength to limit the number of characters and display a character counter. You can change how it counts with counterMode (remaining or current).

Programmatic

markdown.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'markdown',
      path: 'contentRemaining',
      label: 'Content',
      props: {
        counterMode: 'remaining',
      },
      validator: {
        type: 'string',
        maxLength: 200,
        required: true,
      },
    },
    {
      kind: 'input',
      type: 'markdown',
      path: 'contentCurrent',
      label: 'Content',
      props: {
        counterMode: 'current',
      },
      validator: {
        type: 'string',
        maxLength: 200,
        required: true,
      },
    },
  ],
});

JSON

markdown.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "markdown",
      "path": "contentRemaining",
      "label": "Content",
      "props": {
        "counterMode": "remaining"
      },
      "validator": { "type": "string", "maxLength": 200, "required": true }
    },
    {
      "uid": "",
      "kind": "input",
      "type": "markdown",
      "path": "contentCurrent",
      "label": "Content",
      "props": {
        "counterMode": "current"
      },
      "validator": { "type": "string", "maxLength": 200, "required": true }
    }
  ]
}

Auto Grow

Use the property autoGrow to allow the editor to expand automatically based on content. You can combine it with minimumHeight to set its initial size.

Programmatic

markdown.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'markdown',
      path: 'content',
      label: 'Content',
      props: {
        autoGrow: true,
        minimumHeight: 50,
      },
    },
  ],
});

JSON

markdown.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "markdown",
      "path": "content",
      "label": "Content",
      "props": {
        "autoGrow": true,
        "minimumHeight": 50
      }
    }
  ]
}

Default Open Preview

Use the property defaultOpenPreview to open the split view preview panel by default when the component loads.

Programmatic

markdown.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'markdown',
      path: 'content',
      label: 'Content',
      props: {
        defaultOpenPreview: true,
      },
    },
  ],
});

JSON

markdown.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "markdown",
      "path": "content",
      "label": "Content",
      "props": {
        "defaultOpenPreview": true
      }
    }
  ]
}

Styling

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

CSS Variables

Following you will find a list with the CSS Variables and a quick description of what you will style.

CSS Variable	Description
--gui-space-10	Textarea and preview top padding
--gui-space-3	Preview horizontal padding, toolbar padding
--gui-space-1	Toolbar button padding
--gui-space-2	Toolbar button gap, counter top margin
--gui-font-sm	Counter text font size
--gui-intent-error	Counter error color when max length is exceeded
--gui-intent-primary	Active toolbar button background
--gui-radius-md	Widget border radius
--gui-radius-sm	Toolbar button border radius
--gui-border-default	Widget border, toolbar border, preview border
--gui-border-focus	Widget border color on focus
--gui-shadow-focus	Widget box shadow on focus
--gui-text-default	Text and toolbar icon fill color
--gui-bg-surface	Toolbar background color
--gui-bg-surface-hover	Toolbar button hover background

Anatomy

This is the anatomy of the Markdown Component in case you want to use your CSS styles.

markdown-anatomy.html

<gui-markdown>
  <label for="fieldUid">
    Label
    <div class="gui-markdown__hint" id="fieldUid_hint">Hint</div>
  </label>

  <div class="gui-widget">
    <nav class="gui-markdown__toolbar">
      <ul>
        <li><button class="gui-markdown__toolbar-button">H</button></li>
        <li><button class="gui-markdown__toolbar-button">B</button></li>
        <li><button class="gui-markdown__toolbar-button">I</button></li>
        <li><button class="gui-markdown__toolbar-button">Q</button></li>
        <li><button class="gui-markdown__toolbar-button">L</button></li>
        <li><span class="gui-markdown__toolbar-separator">|</span></li>
        <li><button class="gui-markdown__toolbar-button">NL</button></li>
        <li><button class="gui-markdown__toolbar-button">UL</button></li>
        <li><button class="gui-markdown__toolbar-button">Split</button></li>
      </ul>
    </nav>

    <textarea
      id="fieldUid"
      placeholder="Custom placeholder"
      aria-required="true"
      aria-describedby="fieldUid_hint"
    ></textarea>

    <section class="gui-markdown__preview">
      <!-- Rendered HTML preview -->
    </section>
  </div>

  <div class="gui-markdown--validation">
    <div></div>
    <div class="gui-markdown--counter">
      <span>200</span>
      <span> / 200</span>
    </div>
  </div>
</gui-markdown>