High-performance streaming markdown renderer for React Native with dynamic component injection
npm install streamdown-rnHigh-performance streaming markdown renderer for React Native, optimized for AI responses.
- Streaming-first — Renders markdown as it arrives, character by character
- Format-as-you-type — Formatting appears immediately (e.g., bo shows as bo**)
- Progressive components — Custom components stream with skeleton placeholders
- Block-level memoization — Stable blocks never re-render
- Full GFM support — Tables, strikethrough, task lists via remark-gfm
- Syntax highlighting — Prism-based code highlighting
``bash`
npm install streamdown-rnor
bun add streamdown-rn
`json`
{
"react": "^19.0.0",
"react-native": "^0.81.0"
}
`tsx
import { StreamdownRN } from 'streamdown-rn';
function ChatMessage({ content }: { content: string }) {
return (
{content}
);
}
`
Inject custom React Native components using the [{c:"Name",p:{...}}] syntax:
`tsx
import { StreamdownRN, type ComponentRegistry, type ComponentDefinition } from 'streamdown-rn';
// Define your component
const StatusCard = ({ title, status }) => (
);
// Create a registry
const registry: ComponentRegistry = {
get: (name) => definitions[name],
has: (name) => !!definitions[name],
validate: () => ({ valid: true, errors: [] }),
};
const definitions: Record
StatusCard: {
component: StatusCard,
skeletonComponent: StatusCardSkeleton, // Optional: shown while streaming
},
};
// Use it
{Here's a status card:
[{c:"StatusCard",p:{"title":"Build Status","status":"passing"}}]
More text below.}`
Components use a compact JSON syntax:
`
[{c:"ComponentName",p:{"prop1":"value","prop2":123}}]
- c — Component name (must exist in registry)p
- — Props object (JSON)
Components render progressively as props stream in. Define a skeletonComponent to show placeholders for missing props:
`tsx`
const StatusCardSkeleton = ({ title, status }) => (
{title ?
{status ?
);
Build skeleton components using provided primitives:
`tsx
import { Skeleton, SkeletonText, SkeletonCircle, SkeletonNumber } from 'streamdown-rn';
// Basic rectangle
// Text placeholder (single or multi-line)
// Circle (for avatars)
// Number placeholder
`
`tsx`
{content}
Enable debug callbacks to inspect the streaming state:
`tsx`
console.log('Blocks:', snapshot.registry.stableBlockCount);
console.log('Active:', snapshot.registry.activeBlock?.type);
}}
isComplete={streamingDone}
>
{content}
| Prop | Type | Description |
|------|------|-------------|
| children | string | Markdown content to render |componentRegistry
| | ComponentRegistry | Custom component definitions |theme
| | 'dark' \| 'light' | Color theme (default: 'dark') |onDebug
| | (snapshot: DebugSnapshot) => void | Debug callback |onError
| | (error: Error) => void | Error handler |isComplete
| | boolean | Set true when streaming finishes |
streamdown-rn includes built-in protection against XSS attacks:
All URLs in markdown links, images, and component props are automatically sanitized using an allowlist approach. Only these protocols are permitted:
- http:, https: — Web URLsmailto:
- — Email linkstel:
- , sms: — Phone links/path
- Relative URLs (, #anchor, ./file)
Blocked protocols (examples):
- javascript: — Script executiondata:
- — Inline data (can contain scripts)vbscript:
- — Legacy script executionfile:
- — Local file access
Component props from the [{c:"Name",p:{...}}] syntax are sanitized recursively. Any URL-like string values are checked against the allowlist.
`tsx
// This malicious input:
[{c:"Card",p:{"url":"javascript:alert(1)"}}]
// Results in sanitized props:
{ url: '' } // Dangerous URL replaced with empty string
`
Raw HTML in markdown (e.g., ) is rendered as plain text, not executed. We never use dangerouslySetInnerHTML.
You can use the sanitization functions directly if needed:
`tsx
import { sanitizeURL, sanitizeProps } from 'streamdown-rn';
// Sanitize a single URL
sanitizeURL('javascript:alert(1)'); // null
sanitizeURL('https://example.com'); // 'https://example.com'
// Sanitize an object with URL props
sanitizeProps({ href: 'javascript:evil()', title: 'Safe' });
// { href: '', title: 'Safe' }
``
See ARCHITECTURE.md for detailed implementation notes.
Apache-2.0