Markdown - Web

For development, import Markdown from @servicetitan/anvil2-ai-kit. For design, find it in the AI Kit Web Component Library file.

Options

Markdown renders GitHub Flavored Markdown source into Carto-styled HTML — headings, inline formatting, lists, code, quotes, and tables.

Basic text

Bold (**text**) and italic (*text*) are standard CommonMark. Standard markdown has no distinct underline syntax, so strikethrough (~~text~~, GitHub Flavored Markdown) is the closest additional emphasis available.

Headings

Four heading levels map to Text’s headline sizes: h1 renders hero, h2 renders major, h3 renders substantial, and h4 renders regular. h5 and h6 also render but reuse the regular size, relying on the semantic tag alone to signal depth.

Inline Formatting

Bold, italic, inline code, and links combine freely within a single line of prose.

Lists

Unordered and ordered lists nest to any depth. GitHub Flavored Markdown task lists (- [x] / - [ ]) render as read-only checkboxes reflecting each item’s completion — they aren’t interactive.

Code

Inline code uses a tile background. Fenced code blocks (```) render in a bordered surface; Markdown doesn’t syntax-highlight by language.

Quotes

A blockquote (>) indents quoted prose with a leading rule. A horizontal rule (---) separates unrelated sections of content.

Tables

Tables (GitHub Flavored Markdown) render as a read-only chat table: a bordered header row, compact body cells, and a 265px height cap. Extra columns or rows scroll inside the table; the header stays in view and overflow fades appear when more content remains. Cells accept bold, italic, and links.

Behavior

Markdown is presentational — the only interactive element it can render is a link, and task-list checkboxes are read-only. Tall or wide tables scroll inside the table region rather than expanding the chat column.

Usage Guidelines

When to Use

Use the Markdown when:

Rendering agent responses – The agent returns markdown source with headings, emphasis, lists, code, or quotes.
Showing a table in the conversation – A response includes a table. Markdown renders it as a read-only table that scrolls within a fixed height.
Formatting a dialog body – A Dialog message needs formatted text. Pass rendered Markdown as the Dialog content.

When not to use

Avoid using the Markdown for:

Styling single-block copy – A headline, body copy, or label needs no lists, tables, code, or quotes. Use the Text instead.
Collecting selections from a checklist – Markdown task lists are read-only. Use the Checkbox instead.

Keyboard Interaction

Users can navigate and activate any link rendered within the Markdown using standard keyboard controls. Overflowing tables expose a focusable scroll region so keyboard users can pan the table.

Key	Description
Tab	Moves focus to the next link or table scroll region
Arrow keys	Scroll a focused table region
Enter	Activates the focused link’s `href`

Code

Implementation
Markdown Props

Common Examples

To use the Markdown, import it from @servicetitan/anvil2-ai-kit and pass a required markdown string through source. The kit forbids children.

import { Markdown } from "@servicetitan/anvil2-ai-kit";

function ExampleComponent() {
  return <Markdown source={"# Summary\n\nCompleted **3 tasks**."} />;

}

Markdown enables GitHub Flavored Markdown, including tables, strikethrough, task lists, and autolinks.

Headings

Headings render through Text so semantic levels and the Carto headline scale remain aligned.

Inline formatting

Markdown supports emphasis, strong text, strikethrough, inline code, and links.

Lists and task lists

Ordered and unordered lists support nesting. GitHub task-list checkboxes are read-only.

Code

Inline code and fenced code blocks receive separate Carto treatments.

Tables

GitHub Flavored Markdown tables render through the kit’s responsive table implementation.

Links

Relative and same-origin links stay in the current tab. External HTTP(S) links open in a new tab with rel="noopener noreferrer".

React Accessibility

Markdown headings preserve their source heading levels.
Images use their markdown alt text. Images without alt text render with an empty alt attribute.
Task-list checkboxes are disabled because rendered markdown is read-only.
Tables preserve header and data-cell semantics.

<Markdown source={"# Summary\n\nCompleted **3 tasks**."} />

`Markdown` Props

The Markdown accepts the following props and forwards remaining <div> attributes except children and style.

string

required

Markdown source parsed with GitHub Flavored Markdown enabled.

string

Class merged onto the root wrapper.

Concepts & Guidelines

Anvil2

Resources

Markdown - Web

Options

Basic text

Headings

Inline Formatting

Lists

Code

Quotes

Tables

Behavior

Usage Guidelines

When to Use

When not to use

Keyboard Interaction

Code

Common Examples

Headings

Inline formatting

Lists and task lists

Code

Tables

Links

React Accessibility

`Markdown` Props

​Options

​Basic text

​Headings

​Inline Formatting

​Lists

​Code

​Quotes

​Tables

​Behavior

​Usage Guidelines

​When to Use

​When not to use

​Keyboard Interaction

​Code

​Common Examples

​Headings

​Inline formatting

​Lists and task lists

​Code

​Tables

​Links

​React Accessibility

​Markdown Props

Options

Basic text

Headings

Inline Formatting

Lists

Code

Quotes

Tables

Behavior

Usage Guidelines

When to Use

When not to use

Keyboard Interaction

Code

Common Examples

Headings

Inline formatting

Lists and task lists

Code

Tables

Links

React Accessibility

`Markdown` Props