Studio
2

Markdown

Installation

pnpm dlx @mielui/svelte add markdown

Usage

Pass Markdown text through content. Set streaming while more text is arriving. Existing controls keep their state while the surrounding block keeps the same type and position.

The GFM lexer supports tables, task lists, and strikethrough. Fenced code is rendered with Mielui CodeBlock , and raw HTML is displayed as text. Links allow HTTP, HTTPS, mailto, and relative URLs. Images use relative paths; external image URLs render their alt text.

import { Markdown } from '@mielui/svelte/components/markdown';

const content = [
  '## Result',
  '',
  '| File | Status |',
  '| --- | --- |',
  '| app.ts | Updated |',
  '',
  '- [x] Run checks'
].join('\n');

<Markdown {content} />

Examples

Streaming response

Raw HTML safety

Stream partial content

Append text to content while streaming is true, then set streaming to false when the response ends or is stopped. The example sends small chunks through headings, lists, a table, and a code block. It clears its timer when the example unmounts.

API reference

Markdown

Renders GitHub-flavored Markdown.

Prop Type Default
content Required string

Markdown source parsed with marked's GFM tokenizer. Raw HTML is rendered as text.

 —
streaming boolean | undefined

Marks an in-progress response as busy and shows a restrained visual caret.

 false
class string | undefined —