2.6.0

🎉 MDX Component Support

Added full MDX component support to Streamdown, allowing you to embed custom Svelte components directly in your markdown content using JSX-style syntax.

What's New

• MDX Component Syntax: Use PascalCase component tags in your markdown

  • Self-closing: <Card title="Hello" />
  • With children: <Alert type="warning">Important message</Alert>

• Rich Attribute Support: Multiple attribute types are fully supported

  • Strings: name="value"
  • Numbers: count={42}
  • Booleans: active={true}

• Nested Components: Components can be nested within each other with proper depth tracking

• Streaming-Safe: Incomplete MDX components are automatically handled during streaming, ensuring clean rendering at every stage

• Snippet Integration: MDX components render through Svelte snippets passed to the Streamdown component, giving you full control over component behavior

Example Usage

<Streamdown markdown={content}>
  {#snippet mdx({ token, props, children })}
		{#if token.tagName === 'Card'}
			<div class="rounded-lg border border-border p-4 shadow-md">
				<h6 class="mb-2 text-xl font-medium text-muted-foreground">{props.title}</h6>
				{@render children()}
			</div>
		{/if}
{/snippet}
</Streamdown>

or by passing Svelte component directly

<Streamdown 
markdown={content}
mdxComponents={{
		Card
	}}
/>

Then in your markdown:

<Card title="Welcome">
  This is **markdown** content inside a component!
</Card>