Streaming Markdown

StreamingMarkdown uses Streamdown with Shiki for syntax highlighting. Shiki ships many themes and languages by default, which can significantly increase your bundle size.

See Optimization for how to trim the Shiki payload after install.

Renders Markdown (including incremental streams) with Streamdown and design-system typography

npx shadcn@latest add @dr-ui/streaming-markdown

function greet(name: string): string {  return `Hello, ${name}!`;}

Installation

npx shadcn@latest add @dr-ui/streaming-markdown

Optimization

Syntax highlighting is the main bundle cost. Reduce it in two ways: load only the themes your app uses, and switch from Shiki’s full language bundle to the web bundle (~56 languages instead of ~235).

In a representative app setup, these changes reduced the number of Shiki-related files from 360 to 122. Font assets are not trimmed — they stay as part of the standard app stack.

1. Limit themes with createCodePlugin

StreamingMarkdown highlights code with github-light and github-dark-dimmed. In streaming-markdown.tsx, use createCodePlugin with only those themes instead of the default code export (which registers every bundled theme):

import { createCodePlugin } from '@streamdown/code';

const plugins = {
  code: createCodePlugin({
    themes: ['github-light', 'github-dark-dimmed'],
  }),
  // ...
};

Keep shikiTheme on <Streamdown /> aligned with the same pair:

const shikiTheme = ['github-light', 'github-dark-dimmed'] as const;

2. Point your bundler at lib/shiki-themes.ts and use the Shiki web language bundle

createCodePlugin still resolves themes through Shiki’s themes.mjs, which lists every bundled theme. The install includes lib/shiki-themes.ts as a drop-in replacement that only imports the two themes above. Point your bundler at that file when Shiki loads ./themes.mjs.

Vite — add a resolveId plugin and alias shiki to the web bundle:

// vite.config.ts
import path from 'path';

export default defineConfig({
  plugins: [
    {
      name: 'shiki-themes-subset',
      enforce: 'pre',
      resolveId(source, importer) {
        if (
          source === './themes.mjs' &&
          importer?.includes('shiki/dist/')
        ) {
          return path.resolve(__dirname, './lib/shiki-themes.ts');
        }
      },
    },
  ],
  resolve: {
    alias: [
      { find: '@', replacement: path.resolve(__dirname, './src') },
      { find: /^shiki$/, replacement: 'shiki/bundle/web' },
    ],
  },
});

Adjust the path if your project keeps lib/ under src/ (for example ./src/lib/shiki-themes.ts).