# Svelte Markdown - Complete Reference

> A powerful, customizable markdown and HTML renderer for Svelte 5 — built for rendering streaming AI agent output from Claude Code, ChatGPT, and agentic workflows. Built on Marked and HTMLParser2 with 24 markdown renderers, 83 HTML tag renderers, LRU token caching, allow/deny filtering, and XSS-safe defaults.

## Package Information

- Package: `@humanspeak/svelte-markdown`
- License: MIT
- Requires: Svelte 5
- Parser: Marked
- HTML Parser: HTMLParser2
- Heading IDs: github-slugger
- Maintained by: Humanspeak, Inc.
- Homepage: https://markdown.svelte.page
- Repository: https://github.com/humanspeak/svelte-markdown
- Current version: see https://www.npmjs.com/package/@humanspeak/svelte-markdown

## Installation

```bash
npm install @humanspeak/svelte-markdown
# or
pnpm add @humanspeak/svelte-markdown
# or
yarn add @humanspeak/svelte-markdown
```

## SvelteMarkdown Component Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| source | string \| Token[] | [] | Markdown string or pre-parsed tokens to render |
| streaming | boolean | false | Enable LLM streaming mode (incremental updates via `writeChunk()`) |
| renderers | Partial<Renderers> | {} | Custom renderer components to override defaults |
| options | Partial<SvelteMarkdownOptions> | {} | Marked parser configuration options |
| isInline | boolean | false | Parse as inline markdown (no block-level elements) |
| parsed | (tokens: Token[] \| TokensList) => void | () => {} | Callback invoked with parsed tokens |
| extensions | MarkedExtension[] | [] | Array of marked extensions (KaTeX, Mermaid, alerts, footnotes) |
| sanitizeUrl | SanitizeUrlFn | defaultSanitizeUrl | URL sanitizer applied before render — protocol allowlist by default |
| sanitizeAttributes | SanitizeAttributesFn | defaultSanitizeAttributes | Attribute sanitizer applied before render — strips `on*` and `srcdoc` by default |

## Imperative Streaming Methods

When `streaming={true}`, the component exposes two methods via `bind:this`:

| Method | Signature | Purpose |
|--------|-----------|---------|
| writeChunk | `(chunk: StreamingChunk) => void` | Append a string chunk OR overwrite at an offset (`{ value, offset }`) |
| resetStream | `(nextSource?: string) => void` | Clear the streaming buffer; optionally seed with a new initial source |

```typescript
type StreamingChunk = string | StreamingOffsetChunk
type StreamingOffsetChunk = { value: string; offset: number }
```

## Configuration Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| headerIds | boolean | true | Generate id attributes on headings (via github-slugger) |
| headerPrefix | string | '' | Prefix for generated heading IDs |
| gfm | boolean | true | Enable GitHub Flavored Markdown |
| breaks | boolean | false | Convert single newlines to br |

## Basic Usage

```svelte
<script lang="ts">
    import SvelteMarkdown from '@humanspeak/svelte-markdown'
    const source = '# Hello World\n\nThis is **bold** and *italic*. Mixed <em>HTML</em> works too.'
</script>

<SvelteMarkdown {source} />
```

## Streaming AI Agent Output

The library is purpose-built to render LLM streaming output that mixes markdown and HTML. Partial nested HTML structures (e.g. an unclosed `<div>` that later receives its `</div>`) reconcile correctly as content arrives, and built-in sanitization runs per token so a `javascript:` URL or `on*=` handler emitted mid-stream is blocked before the DOM ever sees it.

### Imperative API (recommended)

```svelte
<script lang="ts">
    import SvelteMarkdown from '@humanspeak/svelte-markdown'
    import type { StreamingChunk } from '@humanspeak/svelte-markdown'

    let markdown:
        | {
              writeChunk: (chunk: StreamingChunk) => void
              resetStream: (nextSource?: string) => void
          }
        | undefined

    async function streamFromAPI(prompt: string) {
        const response = await fetch('/api/chat', {
            method: 'POST',
            body: JSON.stringify({ prompt })
        })
        const reader = response.body!.getReader()
        const decoder = new TextDecoder()

        markdown?.resetStream('')

        while (true) {
            const { done, value } = await reader.read()
            if (done) break
            markdown?.writeChunk(decoder.decode(value, { stream: true }))
        }
    }
</script>

<SvelteMarkdown bind:this={markdown} source="" streaming={true} />
```

### Websocket-style offset chunks

Out-of-order delivery is supported via overwrite-at-position semantics:

```typescript
markdown?.writeChunk({ value: ' world', offset: 5 })
markdown?.writeChunk({ value: 'Hello', offset: 0 })
```

The first successful write locks the stream into one input mode (append or offset) until `resetStream()` is called.

### With the Anthropic SDK (Claude)

```svelte
<script lang="ts">
    import SvelteMarkdown from '@humanspeak/svelte-markdown'
    import Anthropic from '@anthropic-ai/sdk'

    let markdown

    async function ask(prompt: string) {
        const client = new Anthropic()
        const stream = client.messages.stream({
            model: 'claude-sonnet-4-6',
            max_tokens: 4096,
            messages: [{ role: 'user', content: prompt }]
        })

        markdown?.resetStream('')

        for await (const event of stream) {
            if (
                event.type === 'content_block_delta' &&
                event.delta.type === 'text_delta'
            ) {
                markdown?.writeChunk(event.delta.text)
            }
        }
    }
</script>

<SvelteMarkdown bind:this={markdown} source="" streaming={true} />
```

### With the OpenAI SDK (ChatGPT)

```svelte
<script lang="ts">
    import SvelteMarkdown from '@humanspeak/svelte-markdown'
    import OpenAI from 'openai'

    let markdown

    async function ask(prompt: string) {
        const client = new OpenAI()
        const stream = await client.chat.completions.create({
            model: 'gpt-4o',
            messages: [{ role: 'user', content: prompt }],
            stream: true
        })

        markdown?.resetStream('')

        for await (const chunk of stream) {
            const delta = chunk.choices[0]?.delta?.content
            if (delta) markdown?.writeChunk(delta)
        }
    }
</script>

<SvelteMarkdown bind:this={markdown} source="" streaming={true} />
```

### Reactive source prop (alternative)

```svelte
<script lang="ts">
    import SvelteMarkdown from '@humanspeak/svelte-markdown'

    let source = $state('')

    function onChunk(chunk: string) {
        source += chunk
    }
</script>

<SvelteMarkdown {source} streaming={true} />
```

## XSS-Safe Defaults

The library applies built-in sanitization in the Parser before tokens reach any renderer or snippet, so custom renderers cannot bypass it.

### Defaults applied automatically

- **URL protocol allowlist** (`defaultSanitizeUrl`) — `href`, `src`, `action`, `formaction`, `cite`, `data`, `poster` and markdown link/image URLs are restricted to `http:`, `https:`, `mailto:`, `tel:`, and relative URLs. `javascript:`, `vbscript:`, `data:`, and `blob:` are blocked (including mixed-case and leading-whitespace variants).
- **Event handler stripping** (`defaultSanitizeAttributes`) — every `on*` attribute (`onclick`, `onerror`, `onload`, etc.) is removed.
- **`srcdoc` stripping** — prevents iframe HTML injection.
- **No `<script>` or `<style>` renderers** — both tags fall through to `UnsupportedHTML`, which renders them as visible escaped text (e.g. `<script>...</script>`) rather than executing or applying them.
- **Secure HTML parsing** — HTMLParser2's streaming parser, not `innerHTML`.

### Custom sanitization

```svelte
<script lang="ts">
    import SvelteMarkdown, {
        defaultSanitizeUrl,
        defaultSanitizeAttributes
    } from '@humanspeak/svelte-markdown'

    const markdown = '# Hello\n\n[link](javascript:alert(1)) and <iframe src="https://example.com" onload="alert(2)"></iframe>'

    // Allow data: URIs only on images
    function sanitizeUrl(url, { type, tag }) {
        if (tag === 'img' && url.startsWith('data:image/')) return url
        return defaultSanitizeUrl(url, { type, tag })
    }

    // Block all attributes on iframes; defaults for everything else
    function sanitizeAttributes(attributes, context, urlSanitizer) {
        if (context.tag === 'iframe') return {}
        return defaultSanitizeAttributes(attributes, context, urlSanitizer)
    }
</script>

<SvelteMarkdown source={markdown} {sanitizeUrl} {sanitizeAttributes} />
```

### Disable sanitization (for trusted content only)

```svelte
<script lang="ts">
    import SvelteMarkdown, {
        unsanitizedUrl,
        unsanitizedAttributes
    } from '@humanspeak/svelte-markdown'

    // Only use passthrough sanitizers when the source is fully trusted
    // (e.g. your own CMS, never user input).
    const trustedContent = '# Internal doc\n\n<iframe src="/internal/dashboard"></iframe>'
</script>

<SvelteMarkdown
    source={trustedContent}
    sanitizeUrl={unsanitizedUrl}
    sanitizeAttributes={unsanitizedAttributes}
/>
```

### Known gaps (not handled by defaults)

- Inline `style="..."` attributes are NOT sanitized. Modern browsers don't execute JavaScript via CSS, but visual hijacking and exfiltration via background-image URLs are possible.
- `<iframe>`, `<form>`, and `<embed>` ARE rendered. With `on*`/`srcdoc` stripped and `src`/`action` protocol-restricted, the worst exploits are blocked, but an iframe to an arbitrary http(s) URL is still possible. Use `excludeHtmlOnly(['iframe', 'form', 'embed'])` to remove them.
- `srcset` and other less common URL attributes are NOT sanitized — provide a custom `sanitizeAttributes` if you need broader coverage.
- No bundled DOM sanitizer (DOMPurify or similar). For arbitrary user-generated input, layer one on top of the defaults.

## Custom HTML Tag Routing

Agents often emit semantic markup like `<thinking>`, `<tool-call>`, or `<artifact>`. Route those (or any custom tag) to your own Svelte component:

```svelte
<script lang="ts">
    import SvelteMarkdown, { Html } from '@humanspeak/svelte-markdown'
    import Thinking from './Thinking.svelte'
    import ToolCall from './ToolCall.svelte'
    import Artifact from './Artifact.svelte'

    const agentResponse = `<thinking>weighing options</thinking>

Here is my plan:

<tool-call name="search" args='{"q":"svelte markdown"}' />

<artifact title="Result">Found three matches.</artifact>`

    const renderers = {
        html: {
            ...Html,
            thinking: Thinking,
            'tool-call': ToolCall,
            artifact: Artifact
        }
    }
</script>

<SvelteMarkdown source={agentResponse} {renderers} />
```

Each renderer receives `{ attributes, children }` as props. Tags without a registered renderer fall through to `UnsupportedHTML` (visible escaped text).

## Custom Renderers

Override any built-in renderer with your own Svelte component:

```svelte
<script lang="ts">
    import SvelteMarkdown from '@humanspeak/svelte-markdown'
    import CustomLink from './CustomLink.svelte'
    const source = 'Visit [example](https://example.com)'
</script>

<SvelteMarkdown {source} renderers={{ link: CustomLink }} />
```

## Snippet Overrides

Customize rendering inline using Svelte 5 snippets without separate component files. Each snippet name matches a renderer key with an `html_` prefix for HTML tags:

```svelte
<script lang="ts">
    import SvelteMarkdown from '@humanspeak/svelte-markdown'
    const source = '# Hello World\n\nA paragraph.'
</script>

{#snippet heading({ depth, children })}
    <h{depth} class="custom-heading">{@render children?.()}</h{depth}>
{/snippet}

{#snippet html_div({ attributes, children })}
    <div class="branded" {...attributes}>{@render children?.()}</div>
{/snippet}

<SvelteMarkdown {source} {heading} {html_div} />
```

## 24 Markdown Renderer Keys

The following keys can be used in the `renderers` prop:

- heading - h1-h6 elements
- paragraph - p elements
- text - plain text content
- rawtext - raw/unescaped text
- escape - escaped characters
- link - a elements
- image - img elements
- em - emphasis (italic)
- strong - bold text
- codespan - inline code
- code - fenced code blocks
- blockquote - blockquotes
- list - ul/ol containers
- listitem - li elements
- orderedlistitem - ordered li elements
- unorderedlistitem - unordered li elements
- hr - horizontal rules
- html - raw HTML passthrough (special — see HTML tag renderers below)
- br - line breaks
- del - strikethrough (GFM)
- table - table elements
- tablehead - thead elements
- tablebody - tbody elements
- tablerow - tr elements
- tablecell - th/td elements

## 83 HTML Tag Renderers

Built-in renderers for HTML tags found within markdown content (use the `html` key in `renderers`):

a, abbr, address, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, datalist, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, kbd, label, legend, li, main, mark, menu, meter, nav, ol, optgroup, option, output, p, param, picture, pre, progress, s, samp, section, select, small, source, span, strong, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, tr, track, u, ul, var

Custom (non-standard) tags can be added by including them in the `html` renderer map — see "Custom HTML Tag Routing" above.

## Token Caching

Built-in LRU cache provides 50-200x faster re-renders for repeated content:

```svelte
<script lang="ts">
    import SvelteMarkdown, { tokenCache, TokenCache } from '@humanspeak/svelte-markdown'

    // Shared default cache (50 docs, 5-min TTL) — used automatically
    const source = '# Cached Content'
</script>

<SvelteMarkdown {source} />
```

### TokenCache Configuration

```typescript
import { TokenCache } from '@humanspeak/svelte-markdown'

const cache = new TokenCache({
    maxSize: 100,   // Max cached documents (default: 50)
    ttl: 600000     // TTL in ms (default: 300000 = 5 min)
})
```

### MemoryCache (Generic)

```typescript
import { MemoryCache } from '@humanspeak/svelte-markdown'

const cache = new MemoryCache<string, any>({
    maxSize: 100,
    ttl: 300000
})
```

## Allow/Deny Filtering

### HTML Tag Filtering

```typescript
import {
    allowHtmlOnly,
    excludeHtmlOnly,
    buildUnsupportedHTML
} from '@humanspeak/svelte-markdown'

// Only allow specific HTML tags
const htmlRenderers = allowHtmlOnly(['strong', 'em', 'a'])

// Block specific HTML tags
const htmlRenderers = excludeHtmlOnly(['iframe', 'form', 'embed'])

// Block ALL HTML tags
const htmlRenderers = buildUnsupportedHTML()
```

### Markdown Renderer Filtering

```typescript
import {
    allowRenderersOnly,
    excludeRenderersOnly,
    buildUnsupportedRenderers
} from '@humanspeak/svelte-markdown'

// Only allow specific renderers
const renderers = allowRenderersOnly(['paragraph', 'link', 'text'])

// Block specific renderers
const renderers = excludeRenderersOnly(['html', 'image'])

// Block ALL renderers
const renderers = buildUnsupportedRenderers()
```

## Marked Extensions

The library ships first-party marked extensions in the `@humanspeak/svelte-markdown/extensions` subpath. Each pair (`markedX` + `XRenderer`) is designed to plug into the `extensions` prop with the matching renderer wired through `renderers`. Inline `{#snippet}` overrides also work — see the snippet-overrides example.

```svelte
<script lang="ts">
    import SvelteMarkdown from '@humanspeak/svelte-markdown'
    import {
        markedKatex,
        KatexRenderer,
        markedMermaid,
        MermaidRenderer,
        markedAlert,
        AlertRenderer,
        markedFootnote,
        FootnoteRef,
        FootnoteSection
    } from '@humanspeak/svelte-markdown/extensions'

    const extensions = [
        markedKatex({ throwOnError: false }),
        markedMermaid(),
        markedAlert(),
        markedFootnote()
    ]
    const renderers = {
        inlineKatex: KatexRenderer,
        blockKatex: KatexRenderer,
        mermaid: MermaidRenderer,
        alert: AlertRenderer,
        footnoteRef: FootnoteRef,
        footnoteSection: FootnoteSection
    }
    const source = `## Math + alerts + footnotes
$$E = mc^2$$

> [!TIP]
> Markdown alerts work alongside KaTeX[^1].

[^1]: Footnotes too.`
</script>

<SvelteMarkdown {source} {extensions} {renderers} />
```

For Prettier-powered code formatting, pair the third-party `marked-code-format` extension with the `prettier` info-string marker on any code fence:

```svelte
<script lang="ts">
    import SvelteMarkdown from '@humanspeak/svelte-markdown'
    import { markedCodeFormat } from 'marked-code-format'

    const extensions = [markedCodeFormat()]
    const source = `\`\`\`js prettier
function add(a,b){return a+b}
\`\`\``
</script>

<SvelteMarkdown {source} {extensions} />
```

Streaming is automatically disabled when an async extension (e.g. Mermaid, marked-code-format) is active, since async `walkTokens` callbacks are incompatible with the synchronous diffing path.

## Direct Use of IncrementalParser

The streaming parser is exported for advanced use (e.g. headless / non-Svelte consumers):

```typescript
import { IncrementalParser } from '@humanspeak/svelte-markdown'

const parser = new IncrementalParser({ gfm: true })

const r1 = parser.update('# Hello')
// r1.tokens, r1.divergeAt

const r2 = parser.update('# Hello\n\nWorld')
// r2.divergeAt === 1 (heading at index 0 unchanged)
```

## Exported Types

- `SvelteMarkdownProps` — Component props type
- `SvelteMarkdownOptions` — Parser options type
- `Renderers` — Map of renderer key to component
- `HtmlRenderers` — Map of HTML tag to component
- `RendererComponent` — Individual renderer component type
- `Token` — Marked token type
- `TokensList` — Array of tokens
- `MarkedExtension` — Marked extension type
- `SnippetOverrides` — Snippet override props type
- `HtmlSnippetOverrides` — HTML snippet override props type
- `StreamingChunk` — Union of string and offset-chunk for `writeChunk()`
- `StreamingOffsetChunk` — `{ value: string; offset: number }`
- `SanitizeUrlFn` — `(url: string, ctx: SanitizeContext) => string`
- `SanitizeAttributesFn` — `(attrs, ctx, sanitizeUrl) => Record<string, string>`
- `SanitizeContext` — `{ type: 'link' | 'image' | 'html'; tag: string }`
- `IncrementalUpdateResult` — `{ tokens: Token[]; divergeAt: number }`

### Snippet Props Types

- HeadingSnippetProps
- ParagraphSnippetProps
- TextSnippetProps
- RawTextSnippetProps
- EscapeSnippetProps
- LinkSnippetProps
- ImageSnippetProps
- EmSnippetProps
- StrongSnippetProps
- CodespanSnippetProps
- CodeSnippetProps
- BlockquoteSnippetProps
- ListSnippetProps
- ListItemSnippetProps
- HrSnippetProps
- HtmlSnippetProps
- BrSnippetProps
- DelSnippetProps
- TableSnippetProps
- TableHeadSnippetProps
- TableBodySnippetProps
- TableRowSnippetProps
- TableCellSnippetProps

## Exported Constants

- `defaultRenderers` — Default markdown renderer component map
- `rendererKeys` — Array of all markdown renderer key names
- `htmlRendererKeys` — Array of all HTML tag renderer key names
- `tokenCache` — Shared singleton `TokenCache` instance

## Exported Components

- `SvelteMarkdown` (default) — Main markdown rendering component
- `Html` — Default HTML tag-to-component map
- `Unsupported` — Placeholder for blocked markdown tokens
- `UnsupportedHTML` — Placeholder for blocked HTML tags (renders as visible escaped text)

## Exported Functions / Classes

- `IncrementalParser` — Streaming-optimized parser (full re-parse with diff)
- `TokenCache` — LRU cache for parsed token arrays
- `MemoryCache` — Generic LRU cache
- `defaultSanitizeUrl` — Default URL sanitizer (protocol allowlist)
- `defaultSanitizeAttributes` — Default attribute sanitizer (strips `on*`, `srcdoc`)
- `unsanitizedUrl` — Passthrough URL sanitizer (allows all)
- `unsanitizedAttributes` — Passthrough attribute sanitizer (allows all)
- `allowHtmlOnly` — Restrict to specific HTML tags
- `excludeHtmlOnly` — Block specific HTML tags
- `buildUnsupportedHTML` — Block all HTML tags
- `allowRenderersOnly` — Restrict to specific markdown renderers
- `excludeRenderersOnly` — Block specific markdown renderers
- `buildUnsupportedRenderers` — Block all markdown renderers

## Migration from pablo-abc/svelte-markdown

This package (`@humanspeak/svelte-markdown`) is the maintained successor to the original `svelte-markdown` by Pablo Berganza. Key differences:

1. **Svelte 5 required** — Uses runes (`$props`, `$derived`, `$state`) instead of Svelte 4 stores
2. **TypeScript first** — Complete type definitions for all exports
3. **New package name** — `@humanspeak/svelte-markdown` instead of `svelte-markdown`
4. **Import change** — `import SvelteMarkdown from '@humanspeak/svelte-markdown'`
5. **New features** — Token caching, allow/deny filtering, snippet overrides, HTML tag renderers, marked extensions, async parsing, **LLM streaming with `writeChunk()`/`resetStream()`**, **built-in XSS sanitization** with custom hooks, **correct nested HTML reconciliation during streaming**
6. **Active maintenance** — Regular updates, bug fixes, and new features

### Migration Steps

1. Uninstall old package: `npm uninstall svelte-markdown`
2. Install new package: `npm install @humanspeak/svelte-markdown`
3. Update imports: change `'svelte-markdown'` to `'@humanspeak/svelte-markdown'`
4. Update Svelte version to 5.x if not already
5. Custom renderers: update to use `$props()` instead of `export let`

## Use Cases

- Streaming chat / assistant UIs (Anthropic SDK, OpenAI SDK, custom SSE)
- Rich AI artifact rendering — design mockups, PR explainers, dashboards, reports emitted by agents as HTML
- Throwaway editors with copy-back exports — agent emits a single-file HTML editor for one piece of data, user pastes the result back into the next prompt
- Status reports / synthesized explainers — agents emit semi-structured HTML reports with embedded diagrams and tables
- Mixed markdown + custom semantic tags (`<thinking>`, `<citation>`, `<artifact>`, `<tool-call>`)
- General-purpose markdown rendering in Svelte 5 apps
- Documentation sites built on SvelteKit
- Content management with mixed markdown + raw HTML input

## Documentation Links

- [Getting Started](https://markdown.svelte.page/docs/getting-started)
- [Rendering AI Agent Output](https://markdown.svelte.page/docs/advanced/agent-output)
- [LLM Streaming](https://markdown.svelte.page/docs/advanced/llm-streaming)
- [Security](https://markdown.svelte.page/docs/advanced/security)
- [Token Caching](https://markdown.svelte.page/docs/advanced/token-caching)
- [Allow/Deny Filtering](https://markdown.svelte.page/docs/advanced/allow-deny)
- [Marked Extensions](https://markdown.svelte.page/docs/advanced/marked-extensions)
- [API Reference](https://markdown.svelte.page/docs/api/svelte-markdown)
- [Types & Exports](https://markdown.svelte.page/docs/api/types)
- [Markdown Renderers](https://markdown.svelte.page/docs/renderers/markdown-renderers)
- [HTML Renderers](https://markdown.svelte.page/docs/renderers/html-renderers)
- [Custom Renderers](https://markdown.svelte.page/docs/renderers/custom-renderers)
- [Snippet Overrides](https://markdown.svelte.page/docs/renderers/snippet-overrides)
- [Migration Guide](https://markdown.svelte.page/docs/migration)
- [Interactive Examples](https://markdown.svelte.page/examples)
- [Blog](https://markdown.svelte.page/blog)
- [Rendering Agent HTML Safely (blog post)](https://markdown.svelte.page/blog/rendering-agent-html-safely)
- [Agent Output Demo (live, with sanitization log)](https://markdown.svelte.page/examples/agent-output)
- [LLM Streaming Demo (live, with perf metrics)](https://markdown.svelte.page/examples/llm-streaming)
- [Interactive Playground](https://markdown.svelte.page/examples/playground)
- [HTML Filtering Demo](https://markdown.svelte.page/examples/html-filtering)
- [Custom Renderers Demo](https://markdown.svelte.page/examples/custom-renderers)
- [Snippet Overrides Demo](https://markdown.svelte.page/examples/snippet-overrides)
- [Mermaid Demo](https://markdown.svelte.page/examples/mermaid)
- [KaTeX / Marked Extensions Demo](https://markdown.svelte.page/examples/marked-extensions)
- [GitHub Alerts Demo](https://markdown.svelte.page/examples/github-alerts)
- [Footnotes Demo](https://markdown.svelte.page/examples/footnotes)
- [Linked Headings Demo](https://markdown.svelte.page/examples/linked-headings)
- [Caching Performance Demo](https://markdown.svelte.page/examples/caching-performance)
- [Compare vs other libraries](https://markdown.svelte.page/compare)

## Background Reading

- [Using Claude Code: The Unreasonable Effectiveness of HTML](https://x.com/trq212/status/2052809885763747935) — Thariq's post on why HTML has become the dominant agent output format, and the original motivation for this library's agent-output positioning