A Svelte port of Streamdown by Vercel - an all in one markdown renderer, designed specifically for AI-powered streaming applications.
npm install svelte-streamdown
# or
pnpm add svelte-streamdown
# or
yarn add svelte-streamdown
Perfect for AI-powered applications that need to stream and render markdown content safely and beautifully, with support for incomplete markdown blocks, security hardening, and rich features like code highlighting, math expressions, and interactive diagrams.
Beautiful, responsive typography with built-in Tailwind CSS classes for headings, lists, code blocks, and more. Comes with a complete default theme that works out of the box.
Full support for
code, [^1]: Reference render in a popover by default. with rich content support and multiline
[!NOTE] š§ AI Prompting Tip: For best results, use our comprehensive prompt covering all supported markdown features.
LaTeX math support through KaTeX:
$$ \sum_{i=1}^n x_i $$
Example:
graph TD
A[Start] --> B{Is it working?}
B -->|Yes| C[Great!]
B -->|No| D[Debug]
D --> B
C --> E[End]
sequenceDiagram
participant User
participant Frontend
participant API
participant Database
User->>Frontend: Submit form
Frontend->>API: POST /api/data
API->>Database: INSERT query
Database-->>API: Success
API-->>Frontend: 200 OK
Frontend-->>User: Show success message
pie title Project Time Allocation
"Development" : 45
"Testing" : 25
"Documentation" : 15
"Meetings" : 15
| H1 | H2 | H3 |
|---|---|---|
| This cell spans 3 columns |
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| This cell spans 2 columns | Normal | |
| Normal | Normal | Normal |
| Header 1 | Header 2 |
|---|---|
| This cell spans | Cell A |
| two rows ^ | Cell B |
| Header 1 | Header 2 |
|---|---|
| Cell B | Cell A |
| --------------- | -------- |
| Footer |
| Left | Center | Right |
|---|---|---|
| A | B | C |
| Product Category ||| Sales Data Q1-Q4 2024 |||| | Product | Region || Q1 | Q2 | Q3 | Q4 | | Name | Type | Area | Revenue | Revenue | Revenue | Revenue | |-------------|---------|------------|---------|---------|---------|---------| | Laptop Pro | Electronics | North America || $45,000 | $52,000 | $48,000 | | Laptop Pro ^ | ^ | Europe | $32,000 | $38,000 | $41,000 | $44,000 | | Laptop Pro ^ | ^ | Asia || $28,000 | $35,000 | $42,000 | | Office Chair | Furniture | North America | $15,000 | $18,000 | $16,000 | $17,000 | | Office Chair ^ | ^ | Europe | $12,000 | $14,000 | $15,000 | $16,000 | | Wireless Mouse | Electronics | Global ||| $25,000 | $28,000 | |-------------|---------|------------|---------|---------|---------|---------| | Total Revenue ||| $152,000 | $185,000 | $187,000 | $205,000 |
a. First item
b. Second item
c. Third item
A. First item
B. Second item
C. Third item
i. First item
ii. Second item
iii. Third item
I. First item
II. Second item
III. Third item
First level (numeric) a. Second level (lowercase alpha) i. Third level (lowercase roman) - Fourth level (bullet) I. Fifth level (uppercase roman) A. Sixth level (uppercase alpha)
Back to the first level
[!IMPORTANT] Native support for Github style Alert
: Topic 1 : Description 1
: **Topic 2** : *Description 2*
: Topic 3 : Description 3
: Topic 3 : Description 3
Streamdown supports inline citations that allow you to reference external sources and display them in interactive popovers. Citations work out-of-the-box with a simple object structure and support nested references like this [cloudflare.website, vercel] will render into [cloudflare.website, vercel]
To enable inline citations, pass a sources object as a prop to the Streamdown component.
<script>
import { Streamdown } from 'svelte-streamdown';
let content = `According to [smith2023], AI is advancing rapidly. See also [nested.subsection] for related work.`;
let sources = {
"smith2023": {
title: "AI Research Paper",
url: "https://example.com/paper",
content: "Detailed content of the citation..."
},
"nested": {
"subsection": {
title: "Nested Citation",
url: "https://example.com/nested"
}
}
};
</script>
<Streamdown {content} {sources} />
Citations work with objects containing these properties:
title (or name or author): Display title for the citationurl (or href, url, link or source): Link to the sourcecontent (or text, summary or excerpt): Rich content to display in carousel modeStreamdown offers two ways to display citations:
You can control the display mode using the inlineCitationsMode prop:
<!-- List view -->
<Streamdown {content} {sources} inlineCitationsMode="list" />
<!-- Carousel view (default) -->
<Streamdown {content} {sources} inlineCitationsMode="carousel" />
Citations appear as clickable buttons that open popovers when clicked. The popover shows:
If your citation data structure doesn't match the default format, you can customize how citations are rendered using inlineCitationPreview, inlineCitationContent or inlineCitationPopover snippets:
<Streamdown {content} {sources}>
{#snippet inlineCitationPreview({ token })}
<!-- Customize the clickable citation button -->
{token.keys[0]}
{/snippet}
{#snippet inlineCitationContent({ source, key, token })}
<!-- Customize content displayed in popover -->
<div class="custom-content">
<h4>{source.customTitle || key}</h4>
<p>{source.customDescription}</p>
</div>
{/snippet}
</Streamdown>
These snippets allow you to:
inlineCitationPreview: Customize the content of the clickable button that appears in the textinlineCitationContent: Customize how individual citation content is displayed within popoversinlineCitationPopover: Completely customize the list of citationsThis Svelte port maintains feature parity with the original Streamdown while adapting to Svelte's patterns:
| Aspect | Original (React) | Svelte Port |
|---|---|---|
| Framework | React | Svelte 5 |
| Component API | JSX Components | Svelte Snippets |
| Styling | Tailwind CSS | Tailwind CSS (compatible) |
| Context | React Context | Svelte Context |
| Build System | Vite/React | Vite/SvelteKit |
| TypeScript | Full TS support | Full TS support |
| Engine | Remark / Rehype + marked | marked only |
[!NOTE] Streamdown comes with built-in Tailwind CSS classes for beautiful default styling. To ensure all styles are included in your build, add the following to your
app.cssor main CSS file: This setup is primarily necessary if you're using Tailwind CSS v4's new@sourcedirective or if you have aggressive purging enabled in older versions. If you're using standard Tailwind CSS v3+ with default purging, Streamdown's styles should be automatically included when the component is imported and used in your application.This ensures that all Streamdown's default styling is included in your Tailwind build process.
@import 'tailwindcss';
/* Add Streamdown styles to your Tailwind build */
@source "../node_modules/svelte-streamdown/**/*";
Streamdown includes an animation system designed specifically for streaming AI content, providing smooth and engaging visual feedback as text appears on screen.
The animation system works by:
Choose from 4 distinct animation styles:
fadeA clean fade-in effect where text smoothly appears from transparent to opaque.
blurText starts slightly blurred and comes into focus while fading in, creating a smooth reveal effect.
slideUpText slides up from below while fading in, creating a dynamic upward motion.
slideDownText slides down from above while fading in, creating a dynamic downward motion.
[!TIP] For production applications where the LLM is not streaming (static content), disable animations entirely by setting
animation.enabled = falseto minimize DOM elements and improve performance.If using AI SDK mind to smooth stream the content to using word-level tokenization to avoid partial words not being animated.
[!WARNING] Character-level tokenization (
tokenize: 'char') creates significantly more DOM elements than word-level tokenization. Use character tokenization sparingly and only when the typewriter effect is essential for your user experience.
<script>
import { Streamdown } from 'svelte-streamdown';
let content = `# Hello World
This is a **bold** text and this is *italic*.
\`\`\`javascript
console.log('Hello from Streamdown!');
\`\`\`
`;
</script>
<Streamdown {content} />
<script>
import { Streamdown } from 'svelte-streamdown';
let content = `# Custom Components Example
This heading will use a custom component!`;
</script>
<Streamdown {content}>
{#snippet heading({ children })}
<h1 class="mb-4 text-4xl font-bold text-blue-600">
{@render children()}
</h1>
{/snippet}
</Streamdown>
<script>
import { Streamdown } from 'svelte-streamdown';
let markdown = `
[Safe Link](https://trusted-domain.com/page)`;
</script>
<Streamdown
{content}
allowedImagePrefixes={['https://trusted-domain.com']}
allowedLinkPrefixes={['https://trusted-domain.com']}
/>
| Prop | Type | Default | Description |
|---|---|---|---|
content |
string |
- | Required. The markdown content to render |
sources |
Record<string, any> |
- | Citation data object for inline citations |
class |
string |
- | CSS class names for the wrapper element |
parseIncompleteMarkdown |
boolean |
true |
Parse and fix incomplete markdown syntax |
defaultOrigin |
string |
- | Default origin for relative URLs |
allowedLinkPrefixes |
string[] |
['*'] |
Allowed URL prefixes for links |
allowedImagePrefixes |
string[] |
['*'] |
Allowed URL prefixes for images |
skipHtml |
boolean |
- | Skip HTML parsing entirely |
unwrapDisallowed |
boolean |
- | Unwrap instead of removing disallowed elements |
urlTransform |
UrlTransform | null |
- | Custom URL transformation function |
theme |
DeepPartial<Theme> |
- | Custom theme overrides |
baseTheme |
'tailwind' | 'shadcn' |
'tailwind' |
Base theme to use before applying overrides |
mergeTheme |
boolean |
true |
Whether to merge theme with base theme |
shikiTheme |
BundledTheme |
'github-light' |
Code highlighting theme |
mermaidConfig |
MermaidConfig |
- | Mermaid diagram configuration |
katexConfig |
KatexOptions | ((inline: boolean) => KatexOptions) |
- | KaTeX math rendering options |
animation |
AnimationConfig |
- | Animation configuration for streaming content |
animation.enabled |
boolean |
false |
Enable/disable animations |
animation.type |
'fade' | 'blur' | 'typewriter' | 'slideUp' | 'slideDown' |
'blur' |
Animation style for text appearance |
animation.duration |
number |
500 |
Animation duration in milliseconds |
animation.timingFunction |
'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear' |
'ease-in' |
CSS timing function for animations |
animation.tokenize |
'word' | 'char' |
'word' |
Tokenization method for text animations |
animation.animateOnMount |
boolean |
false |
Run the token animation on mount or not, useful if you render the Streamdown component in the same time as the first token is receive from the LLM |
extensions |
Array<Extension> |
[] |
Custom marked tokenizers to render special markdown blocks or inline tokens |
mdxComponents |
Record<string, Component> |
{} |
Map of MDX component names to Svelte components (e.g., { Card, Button }) |
children |
Snippet<[{token:GenericToken, streamdown: StreamdownContext, children: Snippet |
undefined |
Snippet used to render elements not supported by Streamdown, custom extensions, and MDX components |
Text Elements: heading, p, strong, em, del
Links & Media: a, img
Lists: ul, ol, li
Code: code, codeSpan
Tables: table, thead, tbody, tr, th, td, tfoot
Special Content: blockquote, hr, alert, mermaid, math, footnoteRef, inlineCitation
MDX Components: Handled via a single mdx snippet that receives token, props, and children. Use token.tagName to differentiate between components.
Note: The above elements are supported by Streamdown and should be customized using individual props or the theme system. MDX components require the mdx snippet.
Streamdown comes with two built-in themes:
Beyond custom snippets, Streamdown provides a granular theming system that lets you customize every part of every component without writing custom snippets. You can use the built-in themes (default and shadcn) or create completely custom themes using the mergeTheme utility.
Every component has multiple themeable parts. For example, the code component has:
code: {
base: 'bg-gray-100 rounded p-2 font-mono text-sm', // Main code block
container: 'my-4 w-full overflow-hidden rounded-xl border', // Wrapper container
header: 'flex items-center justify-between bg-gray-100/80', // Header with language
button: 'cursor-pointer p-1 text-gray-600 transition-all', // Copy button
language: 'ml-1 font-mono lowercase', // Language label
pre: 'overflow-x-auto font-mono p-0 bg-gray-100/40' // Pre element
}
<script>
import { Streamdown } from 'svelte-streamdown';
let content = `# Custom Theme Example
\`\`\`javascript
console.log('Beautiful code blocks!');
\`\`\`
> This blockquote is also themed
| Header 1 | Header 2 |
|----------|----------|
| Cell 1 | Cell 2 |
`;
// Custom theme overrides
let customTheme = {
code: {
container: 'my-6 rounded-2xl border-2 border-purple-200 shadow-lg',
header: 'bg-purple-50 text-purple-700 font-medium',
button: 'text-purple-600 hover:text-purple-800 hover:bg-purple-100'
},
blockquote: {
base: 'border-l-8 border-purple-400 bg-purple-50 p-4 italic text-purple-800'
},
table: {
base: 'border-purple-200 shadow-md',
container: 'my-6 rounded-lg overflow-hidden'
},
th: {
base: 'bg-purple-100 px-6 py-3 text-purple-900 font-bold'
},
td: {
base: 'px-6 py-3 border-purple-100'
}
};
</script>
<Streamdown {content} theme={customTheme} />
Each component supports multiple themeable parts:
Headings (h1-h6): base
Text Elements (p, strong, em, del): base
Lists (ul, ol, li): base
Links (a): base, blocked (for blocked/unsafe links)
Code (code): base, container, header, button, language, skeleton, pre
Inline Code (inlineCode): base
Images (img): container, base, downloadButton
Tables (table, thead, tbody, tr, th, td): base, container (table only)
Blockquotes (blockquote): base
Alerts (alert): base, title, icon, plus type-specific styles (note, tip, warning, caution, important)
Mermaid (mermaid): base, downloadButton
Math (math, inlineMath): base
Other (hr, sup, sub): base
Themes are intelligently merged using Tailwind's class merging utility, so you only need to override the specific parts you want to customize while keeping the default styling for everything else.
Streamdown supports MDX-style JSX components, allowing you to embed custom Svelte components directly in your markdown content.
<script>
import { Streamdown } from 'svelte-streamdown';
let content = `
# Using MDX Components
<Card title="Hello" count={42}>
This is **markdown content** inside a component!
</Card>
<Button label="Click me" active={true} />
`;
</script>
<Streamdown {content}>
{#snippet mdx({ token, props, children })}
{#if token.tagName === 'Card'}
<div class="rounded-lg border border-gray-200 p-4 shadow-sm">
<h3 class="text-xl font-bold">{props.title}</h3>
<p class="text-gray-600">Count: {props.count}</p>
<div class="mt-2">
{@render children()}
</div>
</div>
{:else if token.tagName === 'Button'}
<button class="rounded px-4 py-2 {props.active ? 'bg-blue-500 text-white' : 'bg-gray-200'}">
{props.label}
</button>
{:else}
{@render children()}
{/if}
{/snippet}
</Streamdown>
Instead of using the mdx snippet with conditional logic, you can pass Svelte components directly using the mdxComponents prop:
<script>
import { Streamdown } from 'svelte-streamdown';
import Card from './Card.svelte';
import Button from './Button.svelte';
let content = `
# Using MDX Components
<Card title="Hello" count={42}>
This is **markdown content** inside a component!
</Card>
<Button label="Click me" active={true} />
`;
</script>
<Streamdown {content} mdxComponents={{ Card, Button }} />
Your Svelte components (Card.svelte, Button.svelte) should accept props and a children snippet:
<!-- Card.svelte -->
<script>
let { title, count, children } = $props();
</script>
<div class="rounded-lg border border-gray-200 p-4 shadow-sm">
<h3 class="text-xl font-bold">{title}</h3>
<p class="text-gray-600">Count: {count}</p>
<div class="mt-2">
{@render children()}
</div>
</div>
<!-- Button.svelte -->
<script>
let { label, active } = $props();
</script>
<button class="rounded px-4 py-2 {active ? 'bg-blue-500 text-white' : 'bg-gray-200'}">
{label}
</button>
This approach is cleaner when you have standalone component files, while the mdx snippet approach is better for inline component definitions or when you need shared logic across components.
Self-closing components:
<Component attr="value" count={42} enabled={true} />
Components with markdown children:
<Component title="Hello">
# This is a heading
This **markdown** content will be parsed!
</Component>
MDX components support three attribute value types:
attr="hello" ā "hello"count={42} or value={3.14} ā 42, 3.14active={true} or disabled={false} ā true, falsevalue={variableName} ā "variableName" (stored as string)<Card />, <MyComponent />, <Component123 /><card />, <myComponent /> (these are treated as HTML)MDX components are streaming-safe. Incomplete components are automatically handled during AI streaming:
<Component attr not rendered to prevent runtime errors<Card>content are auto-closed with </Card>This ensures your UI remains stable even when receiving partial markdown from streaming AI responses.
The mdx snippet receives three parameters:
token: The full MdxToken with tagName, attributes, selfClosing, etc.props: Object containing all parsed attributes (e.g., props.title, props.count)children: Snippet containing parsed markdown contentUse token.tagName to determine which component is being rendered:
<!-- Markdown: <Card title="Hello" count={5}>Content</Card> -->
<Streamdown {content}>
{#snippet mdx({ token, props, children })}
{#if token.tagName === 'Card'}
<div>
<h3>{props.title}</h3>
<span>Count: {props.count}</span>
{@render children()}
</div>
{:else if token.tagName === 'Alert'}
<div class="alert alert-{props.type}">
{@render children()}
</div>
{:else}
<!-- Fallback for unknown components -->
{@render children()}
{/if}
{/snippet}
</Streamdown>
Streamdown is extensible through the use of custom extensions.
An extension is an object that has a name, a level and a tokenizer function.
name: The name of the extensionlevel: The level of the extension, can be block or inlinetokenizer: The tokenizer function, see marked for more informationTo render the extension custom tokens, you can then simply use the children snippet.
<script lang="ts">
import { Streamdown, type Extension } from 'svelte-streamdown';
const markedCollapsible: Extension = {
name: 'collapsible',
level: 'block',
tokenizer(this, src) {
// Match [detail]...[detail] blocks (case insensitive)
const detailMatch = src.match(/^\[detail\](.*?)\[detail\]/is);
if (detailMatch) {
const content = detailMatch[1] || '';
const tokens = this.lexer.blockTokens(content);
return {
type: 'detail',
raw: detailMatch[0], // The entire matched string including tags
tokens
};
}
return undefined;
}
};
</script>
<Streamdown
extensions={[markedCollapsible]}
content={`
[detail]
This is a collapsible **section**
[detail]`}
>
{#snippet children({ token, streamdown, children })}
{#if token.type === 'detail'}
<details>
<summary> Detail </summary>
<div>
{@render children()}
</div>
</details>
{/if}
{/snippet}
</Streamdown>
# Clone the repository
git clone <repository-url>
cd svelte-streamdown
# Install dependencies
pnpm install
# Start development server
pnpm dev
# Run tests
pnpm test
# Build for production
pnpm build
# Build the library
pnpm build
# Preview the showcase app
pnpm preview
Contributions are welcome! This is a port of the original Streamdown project, so please:
MIT
Made with ā¤ļø and š¤