Svelte 5 streaming Markdown renderer for AI chat

markstream-svelte is the Svelte 5 renderer in the Markstream family. It uses Svelte 5 runes and provides the same component names, worker helpers, and streaming behavior as the Vue and React packages. The package is beta, so check the current release notes before treating the API as fixed.

Svelte 4 is not supported.

When to use markstream-svelte

Use markstream-svelte when:

• Content streams from an LLM, SSE, or WebSocket into a Svelte 5 app
• Incomplete Markdown states and token-by-token updates must stay readable
• Long AI responses or long documents matter
• Mermaid/KaTeX/code blocks appear during streaming
• You need Markstream's cross-framework parser behavior
• You need custom Svelte 5 components inside Markdown

For normal chat streaming, pass the raw content string and final state. The nodes path is available for apps that already own parser or AST state.

Quick Start

pnpm add markstream-svelte svelte@^5

<script lang="ts">
  import MarkdownRender from 'markstream-svelte'
  import 'markstream-svelte/index.css'

  let { content = '# Hello from markstream-svelte' }: { content?: string } = $props()
</script>

<MarkdownRender {content} />

Streaming SSE example

<script lang="ts">
  import MarkdownRender from 'markstream-svelte'
  import 'markstream-svelte/index.css'

  let content = $state('')
  let final = $state(false)
</script>

<MarkdownRender {content} {final} fade={false} />

Optional peers and what they enable

Peer	Enables
mermaid	Mermaid diagrams
katex	Inline and block math rendering
stream-monaco	Monaco-powered code blocks
@terrastruct/d2	D2 diagrams
@antv/infographic	Infographic blocks

Plain Markdown does not require these optional peers. Install them only for the block types you render.

Shiki is not documented for markstream-svelte unless you add a supported integration path.

When not to use this package

• You are on Svelte 4
• You need a fully stable Svelte renderer API today
• You only render short static Markdown and do not need streaming mid-state handling
• Your app already has a simpler static Markdown stack that covers all content types

Known limitations / maturity

• Svelte 5 runes: uses $props(), $state(), $derived()
• Two input paths: raw content and pre-parsed nodes
• Smooth streaming: smoothStreaming="auto" can pace the raw content path for typewriter-style LLM output
• Safe HTML policy: defaults to safe HTML handling and URL/SVG sanitization paths, but you should still review the policy for untrusted content
• Custom components: slot Svelte components into Markdown
• Optional peers: Mermaid, KaTeX, Monaco, D2, Infographic
• Worker parity: same Katex/Mermaid worker setup as Vue/React
• Beta status: check npm and the Svelte guide for the latest API maturity

Try it

• Live playground
• Full documentation