Streamdown 2.4: More customization, accessibility and custom rendering

Streamdown v2.4 introduces customization hooks, accessibility features, and user experience improvements for developers rendering markdown.

Teams can now customize the appearance of their markdown output using several new properties. You can override the built-in icons by passing a specific component map to the icons prop.

1
import { Streamdown, type IconMap } from "streamdown"
2

3
<Streamdown
4
  icons={{ CheckIcon: MyCheckIcon }}
5
>
6
  {content}
7
</Streamdown>

The createCodePlugin now accepts a themes option for light and dark Shiki themes, a startLine meta option for custom starting line numbers, and an inlineCode virtual component for styling inline code independently from blocks.

1
import { createCodePlugin } from "streamdown"
2

3
const codePlugin = createCodePlugin({
4
  themes: {
5
    light: "github-light",
6
    dark: "github-dark",
7
  },
8
})

Streamdown now supports internationalization and text direction. The dir prop automatically applies left-to-right or right-to-left formatting based on the first strong Unicode character, and the translations prop supports custom languages.

1
<Streamdown
2
  dir="auto"
3
  translations={{ copy: "نسخ", copied: "تم النسخ" }}
4
>
5
  {content}
6
</Streamdown>

Tables include a fullscreen overlay controlled via the controls prop, complete with scroll locking and Escape key support. Developers can hook into streaming events using the onAnimationStart and onAnimationEnd callbacks.

This release fixes empty lines collapsing in syntax-highlighted blocks and prevents ordered lists from retriggering animations during streaming.

For projects using Tailwind v4, the new prefix prop namespaces utility classes to avoid collisions.

<Streamdown prefix="sd-">{content}</Streamdown>

To get started, learn more.