> ## 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](./chat) component.
</Note>

## 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

<CardGroup cols={2}>
  <Card title="UI Designer overview" icon="palette" href="../ui-designer">
    Compose screens in the UI Designer.
  </Card>

  <Card title="Typography" icon="font" href="./typography">
    Configure typography styles for text components.
  </Card>
</CardGroup>