Markstream Svelte
- Confirm Svelte 5; ask Svelte 4 users to upgrade.
- Add package and only requested peers.
- Import CSS after resets; KaTeX CSS for math.
- Treat the package as beta and confirm the app accepts that API maturity.
- Default to
<MarkdownRender {content} />.- For streaming AI chat, keep
contentand use built-in smooth streaming first.smoothStreaming="auto"is the default and activates whentypewriter={true}ormaxLiveNodes <= 0.typewriteronly controls the blinking cursor and defaults tofalse.fadecontrols node enter and streamed-text fade animations and defaults totrue.
- Streaming vs recovering history: in chat UIs the same renderer starts streaming and later switches to history when
final={true}.- Streaming:
smoothStreaming="auto",fade={false},typewriter={true}. This is a conservative visual/performance choice, not an API incompatibility. This adapter has not adopted Vue 3's bounded append fades, so verify its animation behavior before enabling both. - Recovering history:
smoothStreaming={false},fade={true},typewriter={false}. Content is already complete — pacing would slow it down, but fade gives a polished entry animation. - Dynamic switch:
smoothStreaming={isStreaming ? 'auto' : false},fade={!isStreaming}.
- Streaming:
- Use
nodes+finalfor worker-preparsed content, shared AST stores, or custom AST control.
- For streaming AI chat, keep
- Use
$props()and callbacks. - Workers:
setKaTeXWorker,setMermaidWorker,workers/*?worker. - Custom UI: prefer the renderer-local
customComponentsprop for one surface; use scopedsetCustomComponents,customId, andcustomHtmlTagswhen shared registration is intentional. - Keep browser-only workers and heavy peers behind SvelteKit client boundaries.
- Verify with
svelte-check, build, or e2e.
Useful Doc Targets
docs/guide/svelte.mddocs/frameworks/svelte.md