Data display

Markdown

Renders Markdown, including streamed model output, in the brand prose style.

import { Markdown } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Suggestions

Suggestions for your resume

Quantify impact. "Cut p95 latency by 40%" beats "improved performance".
Add dates to your two most recent roles.

Section	Status
Basics	Complete
Work	Missing dates

Done: Summary under 60 words
To do: Skills grouped by area

Read the schema for every field.

markdown/suggestions.tsx

import { Markdown } from '@jsonresume/ui';

const suggestions = `## Suggestions for your resume

1. **Quantify impact.** "Cut p95 latency by 40%" beats "improved performance".
2. Add dates to your two most recent roles.

| Section | Status |
| --- | --- |
| Basics | Complete |
| Work | Missing dates |

- [x] Summary under 60 words
- [ ] Skills grouped by area

Read the [schema](https://jsonresume.org/schema) for every field.`;

// Raw HTML in the source is ignored, so model output is safe to render.
export default function MarkdownSuggestions() {
  return <Markdown externalLinks>{suggestions}</Markdown>;
}

Accessibility

Raw HTML is ignored, so untrusted text is safe to render.
Headings keep their levels; tables and task lists use real elements.

Props

Also accepts the attributes of the element Markdown renders.
Prop	Type	Default	Description
children required	string	–	Markdown source. Safe to stream: re-render with the growing text.
className	string	–
externalLinks	boolean	false	Open links in a new tab (for chat and generated content).