Markstream Svelte
Overview
Integrate Markstream using Svelte 5 runes and SvelteKit-safe browser boundaries.
When to Use
Use for Svelte 5 or SvelteKit package setup, streaming state, workers, or scoped custom components. Svelte 4 is unsupported.
Workflow
Inspect the existing package manager, installed package version and project conventions. A requested scoped integration already authorizes routine source/dependency edits; seek approval only for a material scope expansion or unresolved beta/alpha adoption decision.
- Confirm Svelte 5 and acceptance of a beta package.
- Install only requested peers; import package CSS after resets and KaTeX CSS only for math.
- Start with
<MarkdownRender {content} /> and smooth streaming auto.
- For live chat disable fade and opt into the cursor; on completion set
final, disable pacing/cursor, and enable fade only if desired.
- Use
nodes only for worker-owned parsing or shared AST state.
- Use
$props() and callbacks. Configure KaTeX or Mermaid workers only when requested.
- Prefer renderer-local
customComponents; use scoped registration only when sharing is intentional.
- Keep browser-only workers behind SvelteKit client boundaries; validate with
svelte-check, build, or e2e.
Example
<script lang="ts">
import MarkdownRender from 'markstream-svelte'
import 'markstream-svelte/index.css'
let { content, isDone }: { content: string; isDone: boolean } = $props()
</script>
<MarkdownRender
{content}
final={isDone}
fade={isDone}
typewriter={!isDone}
smoothStreaming={isDone ? false : 'auto'}
htmlPolicy="safe"
/>
Limitations
- Svelte 4 is unsupported and the package is beta.
- Workers and heavy peers require client-side bundler support.
- This skill does not migrate unrelated Svelte architecture.
Security & Safety Notes
Keep safe HTML and strict Mermaid defaults. Review dependencies and never run browser-only peers during SSR.
Verify props, export paths and peer ranges against the installed package, not a mutable upstream main. Test partial and completed streams, malformed/untrusted Markdown, links and image URLs, cancellation and reduced motion. Safe HTML and strict diagrams reduce exposure but do not alone enforce URL/network privacy or application component permissions.