Markdown
StableTurns the assistant's formatted text into headings, lists, links and tables, even while it is still being written.
Also known as rich text, markdown renderer, formatted text
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
A rich reply
Quarterly summary
Revenue grew 12% over the last quarter, mostly from the enterprise segment.1 Read the full report for detail.
| Segment | Growth |
|---|---|
| Enterprise | +18% |
| Self-serve | +4% |
Churn held steady at 2.1%.
Next steps:
- Review renewals due in
November - Check self-serve conversion
const growth = (a: number, b: number) => (b - a) / a;const RICH = `## Quarterly summary
Revenue grew **12%** …`;
<div className="max-w-xl space-y-4 text-body-lg leading-7">
<Markdown>{RICH}</Markdown>
</div>Shows a heading, bold and italic text, a link, a source number, a table, a quote, a list, a divider and code.
When to use it
Turns the assistant's formatted text into real headings, lists, tables and code. It builds the page safely and copes with text that stops halfway, so it can show a reply while it is still arriving.
Made of: Headings and paragraphs · Bold, italic and links · Source numbers · Lists (up to 3 levels) and quotes · Tables · Code blocks
Use it for
- The body of an assistant reply.
- A reply that is still being written: pass all the text so far each time.
- A draft document shown inside a CanvasPanel.
Not for
- A code sample on its own, outside a reply: use CodeBlock.
- Text that people need to edit.
Do and avoid
Your trip
- Flight lands at 9:40
- Hotel check-in from 2 pm
<b>Your trip</b><br><ul><li>Flight lands at 9:40</li></ul>
Do
- Put it in a container that sets text size and spacing.
- While the reply is being written, give it all the text so far each time.
- Show a SourceList under the reply so the [1] markers point somewhere.
- Use it for assistant replies, where the content is not known ahead of time.
Avoid
- Do not expect images, web code, checkbox lists or lists deeper than three levels. Deeper items stay at level three.
- Do not add web code to the text. It is shown as plain text.
- Do not use it to edit documents. It only displays text.
- Do not rely on it for the page's heading structure. Its headings sit below the page title.
On a phone
- Tables and code blocks scroll sideways inside their own box, so a wide one never pushes the page wider.
- Source markers like [1] get a larger invisible tap area on a touch screen.
- Paragraphs wrap long unbroken words and addresses, so they do not push the page wider.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | string | none | The Markdown source. Partial text is fine. Re-render with the growing string while streaming. |
"Show code under the preview gives the code for the example on the stage."
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- unclosed code fence
- A code fence with no closing line still renders as a code block, so partly streamed text does not break.
- unsafe link
- A link whose address is not http, https or mailto is shown as plain text instead of a link.
- wide table
- A table wider than the column scrolls sideways and can be focused with the keyboard.
Tokens
Change one of these and every part that uses it follows.
--surface-sunken (code, table head)--border (tables, rules)--accent-fg (links)--accent-soft-border (blockquote)--fg-muted--code-bg (via CodeBlock)--radius-card
Built in
- Headings are marked as headings, one level below the page title.
- Lists are real lists, so screen readers say how many items there are and how deep they go.
- Table columns have headers, and a wide table can be reached with Tab and scrolled sideways.
- Source markers like [1] are links that screen readers hear as "Source 1".
- Only web and email links become links, and they open in a new tab. The text cannot add scripts to the page.
What you need to do
- Put it inside a Message with streaming on while the reply arrives, so screen readers are not interrupted by every word.
- Show a SourceList on the same page, so source markers lead somewhere.
- Ask for link text that makes sense on its own, not "click here".
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide