# Markstream Svelte

> Integrate the beta markstream-svelte package in Svelte 5 or SvelteKit apps. Use when Codex needs Svelte 5 runes, CSS and optional peers, smooth streaming, worker setup, renderer-local or scoped custom components, or SSR-safe boundaries. Svelte 4 is unsupported.

- Skill: `simon-he95/markstream-svelte-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add simon-he95/markstream-svelte-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/simon-he95/markstream-svelte-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Simon-He95 (https://skillmd.com/u/simon-he95)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/simon-he95/markstream-svelte-2

---


# 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 `content` and use built-in smooth streaming first.
    - `smoothStreaming="auto"` is the default and activates when `typewriter={true}` or `maxLiveNodes <= 0`.
    - `typewriter` only controls the blinking cursor and defaults to `false`.
    - `fade` controls node enter and streamed-text fade animations and defaults to `true`.
  - **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}`.
  - Use `nodes` + `final` for worker-preparsed content, shared AST stores, or custom AST control.
- Use `$props()` and callbacks.
- Workers: `setKaTeXWorker`, `setMermaidWorker`, `workers/*?worker`.
- Custom UI: prefer the renderer-local `customComponents` prop for one surface; use scoped `setCustomComponents`, `customId`, and `customHtmlTags` when 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.md`
- `docs/frameworks/svelte.md`