Skip to main content
This page documents the TypeScript interfaces and types exported from streamdown. Import them directly in your code: 
import type {
  StreamdownProps,
  BlockProps,
  ControlsConfig,
  LinkSafetyConfig,
  LinkSafetyModalProps,
  MermaidOptions,
  MermaidErrorComponentProps,
  AllowedTags,
  AnimateOptions,
  StreamdownContextType,
} from "streamdown";

​
StreamdownProps

The full props type for the Streamdown component. Extends Options (the react-markdown options type) with streaming-specific fields. 
export type StreamdownProps = Options & {
  mode?: "static" | "streaming";
  dir?: "auto" | "ltr" | "rtl";
  BlockComponent?: React.ComponentType<BlockProps>;
  parseMarkdownIntoBlocksFn?: (markdown: string) => string[];
  parseIncompleteMarkdown?: boolean;
  normalizeHtmlIndentation?: boolean;
  className?: string;
  shikiTheme?: [ThemeInput, ThemeInput];
  mermaid?: MermaidOptions;
  controls?: ControlsConfig;
  isAnimating?: boolean;
  animated?: boolean | AnimateOptions;
  caret?: "block" | "circle";
  plugins?: PluginConfig;
  remend?: RemendOptions;
  linkSafety?: LinkSafetyConfig;
  lineNumbers?: boolean;
  allowedTags?: AllowedTags;
  literalTagContent?: string[];
  translations?: Partial<StreamdownTranslations>;
  icons?: Partial<IconMap>;
  prefix?: string;
  onAnimationStart?: () => void;
  onAnimationEnd?: () => void;
};
For prose descriptions of each prop, see the Streamdown component reference. The inherited Options fields are:
​
children
string
The Markdown string to render.
​
components
Components
Custom React components for HTML elements and the special inlineCode key.
​
rehypePlugins
PluggableList
Rehype plugins. Defaults to defaultRehypePlugins.
​
remarkPlugins
PluggableList
Remark plugins. Defaults to defaultRemarkPlugins.
​
allowElement
AllowElement
Function (element, index, parent) => boolean | null | undefined called for each element. Return false to remove.
​
allowedElements
readonly string[]
Allowlist of HTML element tag names. Elements not in the list are removed.
​
disallowedElements
readonly string[]
Blocklist of HTML element tag names. Elements in the list are removed.
​
skipHtml
boolean
When true, raw HTML in the Markdown source is dropped.
​
unwrapDisallowed
boolean
When true, children of removed elements are kept (unwrapped) rather than deleted.
​
urlTransform
UrlTransform
Function (url, key, node) => string | null | undefined applied to all URL attributes. Use to rewrite or block URLs.
​
remarkRehypeOptions
Readonly<RemarkRehypeOptions>
Options forwarded to remark-rehype.

​
BlockProps

Props for the Block component (and any custom BlockComponent). 
export type BlockProps = Options & {
  content: string;
  shouldParseIncompleteMarkdown: boolean;
  shouldNormalizeHtmlIndentation: boolean;
  index: number;
  isIncomplete: boolean;
  dir?: "ltr" | "rtl";
  animatePlugin?: AnimatePlugin | null;
};
​
content
string
required
The raw Markdown string for this block.
​
index
number
required
Zero-based index of this block in the full block list.
​
isIncomplete
boolean
required
true when streaming and this block contains an unclosed code fence.
​
shouldParseIncompleteMarkdown
boolean
required
Mirrors parseIncompleteMarkdown from the parent Streamdown.
​
shouldNormalizeHtmlIndentation
boolean
required
When true, HTML indentation normalization is applied to content before rendering.
​
dir
"ltr" | "rtl"
Resolved text direction for this block.
​
animatePlugin
AnimatePlugin | null
Animate plugin instance for tracking previously-rendered character counts.
For full field descriptions, see Block.

​
ControlsConfig

Configures which action controls appear on code blocks, tables, and Mermaid diagrams. 
export type ControlsConfig =
  | boolean
  | {
      table?:
        | boolean
        | {
            copy?: boolean;
            download?: boolean;
            fullscreen?: boolean;
          };
      code?:
        | boolean
        | {
            copy?: boolean;
            download?: boolean;
          };
      mermaid?:
        | boolean
        | {
            download?: boolean;
            copy?: boolean;
            fullscreen?: boolean;
            panZoom?: boolean;
          };
    };
When the top-level value is a boolean:
  • true — enable all controls on all block types
  • false — disable all controls on all block types
When an object is provided, each key (table, code, mermaid) can itself be true, false, or a fine-grained object:
​
table
boolean | object
Controls for table blocks.
​
code
boolean | object
Controls for code blocks.
​
mermaid
boolean | object
Controls for Mermaid diagram blocks.
Examples: 
// Disable all controls
<Streamdown controls={false}>{markdown}</Streamdown>

// Enable table controls only
<Streamdown controls={{ table: true, code: false }}>{markdown}</Streamdown>

// Fine-grained: table download only, no code download
<Streamdown
  controls={{
    table: { copy: true, download: true, fullscreen: false },
    code: { copy: true, download: false },
  }}
>
  {markdown}
</Streamdown>

​
LinkSafetyConfig

Controls the link safety interstitial shown before the browser navigates to an external URL. 
export interface LinkSafetyConfig {
  enabled: boolean;
  onLinkCheck?: (url: string) => Promise<boolean> | boolean;
  renderModal?: (props: LinkSafetyModalProps) => React.ReactNode;
}
​
enabled
boolean
required
When true, clicking an external link shows a confirmation modal before navigation. When false, links behave normally.
​
onLinkCheck
(url: string) => Promise<boolean> | boolean
Optional async or synchronous function called with the URL before the modal is shown. Return true to allow navigation immediately (skip the modal), or false to show the modal.Use this to implement an allowlist of trusted domains:
<Streamdown
  linkSafety={{
    enabled: true,
    onLinkCheck: (url) => {
      const { hostname } = new URL(url);
      return hostname.endsWith(".example.com");
    },
  }}
>
  {markdown}
</Streamdown>
​
renderModal
(props: LinkSafetyModalProps) => React.ReactNode
Replaces the built-in modal with a custom React component. Called with LinkSafetyModalProps when the modal should be shown.

​
LinkSafetyModalProps

Props passed to a custom renderModal function. 
export interface LinkSafetyModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  url: string;
}
​
isOpen
boolean
required
Whether the modal should be visible.
​
onClose
() => void
required
Call this to close the modal without navigating.
​
onConfirm
() => void
required
Call this to confirm navigation and open the URL.
​
url
string
required
The URL the user clicked.

​
MermaidOptions

Options for Mermaid diagram rendering. Passed to the mermaid prop on Streamdown. 
export interface MermaidOptions {
  config?: MermaidConfig;
  errorComponent?: React.ComponentType<MermaidErrorComponentProps>;
}
​
config
MermaidConfig
Configuration object forwarded directly to Mermaid’s initialize() call. Accepts any option from the Mermaid configuration reference.
<Streamdown
  mermaid={{
    config: { theme: "dark", securityLevel: "loose" },
  }}
>
  {markdown}
</Streamdown>
​
errorComponent
React.ComponentType<MermaidErrorComponentProps>
Custom component rendered when a Mermaid diagram fails to parse or render. Receives MermaidErrorComponentProps.

​
MermaidErrorComponentProps

Props provided to a custom Mermaid error component. 
export interface MermaidErrorComponentProps {
  chart: string;
  error: string;
  retry: () => void;
}
​
chart
string
required
The raw Mermaid diagram source that failed to render.
​
error
string
required
The error message from Mermaid.
​
retry
() => void
required
Call this function to attempt rendering the diagram again. Useful if the failure is transient (e.g. the diagram was still being streamed when rendering was first attempted).

​
AllowedTags

export type AllowedTags = Record<string, string[]>;
A map from custom HTML tag names to their permitted attribute names. Passed to the allowedTags prop on Streamdown to extend the default rehype-sanitize schema. 
const allowedTags: AllowedTags = {
  mention: ["user_id", "team_id"],
  badge: ["type", "color"],
};

​
AnimateOptions

Options for configuring word- or character-level entrance animations. Passed as the animated prop on Streamdown (or to createAnimatePlugin directly). 
export interface AnimateOptions {
  animation?: "fadeIn" | "blurIn" | "slideUp" | (string & {});
  duration?: number;
  easing?: string;
  sep?: "word" | "char";
  stagger?: number;
}
​
animation
"fadeIn" | "blurIn" | "slideUp" | string
default:"fadeIn"
The animation name. Built-in options are "fadeIn", "blurIn", and "slideUp". You can pass any custom animation name as a string (e.g. one defined in your own CSS with a sd- prefixed keyframe).
​
duration
number
default:"150"
Duration of each token’s animation in milliseconds.
​
easing
string
default:"ease"
CSS easing function applied to each animated token (e.g. "ease-in-out", "linear").
​
sep
"word" | "char"
default:"word"
Granularity of animation:
  • "word" — each word (and adjacent whitespace) is a separate animated unit
  • "char" — each individual character is animated (whitespace is grouped)
​
stagger
number
default:"40"
Delay in milliseconds added between consecutive animated tokens, creating a cascading wave effect. The nth new token gets a delay of n * stagger milliseconds.

​
StreamdownContextType

The shape of the value provided by StreamdownContext. 
export interface StreamdownContextType {
  controls: ControlsConfig;
  isAnimating: boolean;
  lineNumbers: boolean;
  linkSafety?: LinkSafetyConfig;
  mermaid?: MermaidOptions;
  mode: "static" | "streaming";
  shikiTheme: [ThemeInput, ThemeInput];
}
​
controls
ControlsConfig
Resolved controls configuration.
​
isAnimating
boolean
Whether the parent Streamdown is currently animating.
​
lineNumbers
boolean
Whether code block line numbers are enabled.
​
linkSafety
LinkSafetyConfig | undefined
Resolved link safety configuration.
​
mermaid
MermaidOptions | undefined
Resolved Mermaid options.
​
mode
"static" | "streaming"
The current rendering mode.
​
shikiTheme
[ThemeInput, ThemeInput]
Active Shiki theme pair [lightTheme, darkTheme].

Build docs developers (and LLMs) love

Get started for freeTalk to us