> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowx.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Markdown

> A UI component that renders Markdown-formatted content on a screen.

> [!NOTE]
>
> This is the standalone Markdown UI component. For Markdown rendering inside chat messages, see the [Chat](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/chat.md) component.

## Overview

Use a Markdown component when you need to display rich text that may include structure (headings, lists, tables) or content authored in Markdown by an AI model, a CMS entry, or a process data field. Common use cases:

* Surfacing an AI-generated explanation alongside a form
* Embedding Terms & Conditions or Help text written in Markdown
* Rendering a step-by-step instruction list pulled from CMS
* Showing a tabular summary returned by a workflow

The Markdown component is read-only. Bind its content to a process data key or a static value, and it renders on the fly.

## Properties

| Property | Type | Description |
| - | - | - |
| **Content** | String / expression | Markdown source. Bind to a process data key or set a static literal. |
| **Visibility** | Expression | JavaScript expression that hides the component when truthy. |
| **Theme overrides** | Object | Override fonts, colours, link colour, heading styles, and table styling for this instance. |

## Supported Markdown

Standard CommonMark syntax: headings (`#` to `######`), bold/italic, links, ordered and unordered lists, fenced code blocks, inline code, blockquotes, and tables (GFM-style). Raw HTML is not rendered.

## Theme configuration

The Markdown component exposes two theme entries: **Markdown** (for the body) and **Markdown table** (for tables embedded inside Markdown content).

### Markdown — body defaults

| Token | Default | Description |
| - | - | - |
| `font` | `typography@Paragraph/P1#regular` | Base body typography. |
| `color` | `color@shades#900` | Body text colour. |
| `linkColor` | `color@primary#500` | Inline link colour. |
| `heading1Font` | `typography@Heading/H5#medium` | H1 typography. |
| `heading2Font` | `typography@Heading/H6#medium` | H2 typography. |
| `heading3Font` | `typography@Paragraph/P3#medium` | H3 typography. |
| `heading4Font` | `typography@Paragraph/P2#medium` | H4 typography. |
| `heading5Font` | `typography@Paragraph/P2#medium` | H5 typography. |
| `heading6Font` | `typography@Paragraph/P2#medium` | H6 typography. |

### Markdown table — defaults

| Token | Default | Description |
| - | - | - |
| `borderColor` | `color@neutrals#200` | Outer table border colour. |
| `dividerColor` | `color@neutrals#200` | Row and column divider colour. |
| `backgroundColor` | `color@shades#0` | Cell background. |
| `font` | `typography@Paragraph/P1#regular` | Cell typography. |
| `color` | `color@shades#900` | Cell text colour. |
| `headerFont` | `typography@Paragraph/P1#medium` | Header row typography. |
| `headerColor` | `color@shades#900` | Header row text colour. |
| `headerBackgroundColor` | `color@neutrals#100` | Header row background. |

To override globally, edit **Theme → Components → Markdown** (and **Markdown table**) in the Designer.

## Related resources

> [card] [UI Designer overview](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-designer.md)
>
> Compose screens in the UI Designer.

> [card] [Typography](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/typography.md)
>
> Configure typography styles for text components.


## Related topics

- [Typography](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/typography.md)
- [Chat component](https://docs.flowx.ai/6.x/ai-platform/chat-component.md)
- [FlowX.AI 5.6.0 Release Notes](https://docs.flowx.ai/release-notes/v5.x/v5.6.0-march-2026/v5.6.0-march-2026.md)
- [Switch](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/switch-form-field.md)
- [Input field](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/input-form-field.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.