umd-streamdown

v1.6.9

Published

4 months ago

UMD builds for Streamdown - A drop-in replacement for react-markdown, designed for AI-powered streaming

0High
0Medium
0Low

nativestranger

streamdown umd markdown react streaming ai react-markdown gfm katex mermaid syntax-highlighting browser

UMD Streamdown

UMD builds for Streamdown - A drop-in replacement for react-markdown, designed for AI-powered streaming.

This repository automatically builds and publishes UMD versions of Streamdown, making it easy to use via CDN or in environments that don't support modern ES modules.

🚀 Quick Start

CDN Usage (Full Build)

<!DOCTYPE html>
<html>
<head>
  <title>Streamdown UMD Demo</title>
</head>
<body>
  <div id="root"></div>

  <!-- Load React -->
  <script crossorigin src="https://unpkg.com/react@19/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@19/umd/react-dom.production.min.js"></script>
  
  <!-- JSX Runtime Polyfill -->
  <script>
    window.ReactJSXRuntime = {
      jsx: React.createElement,
      jsxs: React.createElement,
      Fragment: React.Fragment
    };
  </script>

  <!-- Load Streamdown UMD -->
  <script src="https://unpkg.com/umd-streamdown/dist/streamdown.umd.min.js"></script>

  <script>
    const markdown = '# Hello World\n\nThis is **streaming** markdown!';
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(React.createElement(Streamdown, { children: markdown }));
  </script>
</body>
</html>

NPM Installation

npm install umd-streamdown

Then use in your HTML:

<script src="node_modules/umd-streamdown/dist/streamdown.umd.min.js"></script>

📦 Build Variants

This package provides 4 different builds to match your needs:

| File | Size* | Description | Use Case | |------|-------|-------------|----------| | streamdown.umd.js | ~17MB | Full build, unminified | Development, debugging | | streamdown.umd.min.js | ~12MB | Full build, minified | Production, all features | | streamdown-core.umd.js | ~3MB | Core only, unminified | Development with external deps | | streamdown-core.umd.min.js | ~2MB | Core only, minified | Production, lighter bundle |

* Approximate sizes - all features bundled

Full vs Core Builds

Full Build (streamdown.umd.js):

✅ Everything bundled (KaTeX, Mermaid, Shiki)
✅ Zero external dependencies (except React)
✅ Works immediately
❌ Larger file size (~12MB minified)

Core Build (streamdown-core.umd.js):

✅ Lighter bundle (~2MB minified)
✅ Faster load times
❌ Requires external KaTeX, Mermaid, Shiki
💡 Best for CDN usage with separate script tags

🎯 Usage Examples

Basic Markdown Rendering

<script>
  const App = () => {
    const markdown = `
# Welcome to Streamdown

- 🚀 **Fast** rendering
- 🔄 **Streaming** support
- 📊 **Tables** and **task lists**
    `;

    return React.createElement(Streamdown, { 
      children: markdown,
      mode: 'static' 
    });
  };

  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(React.createElement(App));
</script>

With Code Highlighting

<script>
  const codeExample = `
# Code Example

\`\`\`javascript
function greet(name) {
  console.log(\`Hello, \${name}!\`);
}
\`\`\`
  `;

  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(React.createElement(Streamdown, { 
    children: codeExample,
    shikiTheme: ['github-light', 'github-dark']
  }));
</script>

Streaming Mode (for AI responses)

<script>
  function StreamingDemo() {
    const [content, setContent] = React.useState('');

    React.useEffect(() => {
      // Simulate streaming
      const text = '# Streaming Demo\n\nThis content appears gradually...';
      let index = 0;

      const interval = setInterval(() => {
        if (index < text.length) {
          setContent(text.slice(0, index + 1));
          index++;
        } else {
          clearInterval(interval);
        }
      }, 50);

      return () => clearInterval(interval);
    }, []);

    return React.createElement(Streamdown, {
      children: content,
      mode: 'streaming',
      parseIncompleteMarkdown: true
    });
  }

  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(React.createElement(StreamingDemo));
</script>

Using Core Build with External Dependencies

<!-- Load dependencies -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>

<!-- React -->
<script src="https://unpkg.com/react@19/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@19/umd/react-dom.production.min.js"></script>

<!-- JSX Runtime -->
<script>
  window.ReactJSXRuntime = {
    jsx: React.createElement,
    jsxs: React.createElement,
    Fragment: React.Fragment
  };
</script>

<!-- Core build (lighter) -->
<script src="https://unpkg.com/umd-streamdown/dist/streamdown-core.umd.min.js"></script>

<script>
  const mathExample = `
# Math Example

$$
E = mc^2
$$
  `;

  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(React.createElement(Streamdown, { children: mathExample }));
</script>

🎨 Features

All features from the original Streamdown package:

✅ Streaming-optimized - Handles incomplete Markdown gracefully
✅ GitHub Flavored Markdown - Tables, task lists, strikethrough
✅ Math rendering - LaTeX equations via KaTeX
✅ Mermaid diagrams - Render diagrams from code blocks
✅ Code syntax highlighting - Beautiful code blocks with Shiki
✅ Unterminated block parsing - Styles incomplete bold, italic, code, etc.
✅ Security-first - Built with rehype-harden
✅ Performance optimized - Memoized rendering

📚 API Reference

Props

All props from the original Streamdown are supported:

interface StreamdownProps {
  children: string;                    // Markdown content
  mode?: 'static' | 'streaming';      // Rendering mode (default: 'streaming')
  parseIncompleteMarkdown?: boolean;  // Handle incomplete syntax (default: true)
  className?: string;                  // Additional CSS classes
  shikiTheme?: [string, string];      // [light, dark] theme names
  components?: Record<string, Component>; // Custom component overrides
  mermaid?: MermaidOptions;            // Mermaid configuration
  controls?: ControlsConfig;           // Show/hide controls
  // ... and more
}

Global API

After loading the script, Streamdown is available globally:

window.Streamdown            // Main component
window.Streamdown.Block      // Block component (for advanced usage)
window.Streamdown.parseMarkdownIntoBlocks    // Utility function
window.Streamdown.parseIncompleteMarkdown    // Utility function

🔄 Automatic Updates

This repository automatically syncs with the official Streamdown releases:

⏰ Checks every 6 hours for new versions
🔨 Builds UMD bundles automatically
📦 Publishes to npm with matching version
🏷️ Creates GitHub releases with build artifacts
📝 Updates changelog automatically

📖 Examples

See the examples/ directory for complete working examples:

basic.html - Simple markdown rendering
streaming.html - Simulated AI streaming
full-featured.html - All features demo
core-build.html - Using the lighter core build

🛠️ Development

Building Locally

# Clone the repository
git clone https://github.com/nativestranger/umd-streamdown.git
cd umd-streamdown

# Install dependencies
npm install

# Build UMD bundles
npm run build

# Test the build
npm test

Project Structure

umd-streamdown/
├── .github/
│   └── workflows/
│       └── sync.yml           # Auto-sync workflow
├── dist/                      # Built files (generated)
├── examples/                  # Usage examples
├── scripts/                   # Build scripts
├── rollup.config.js          # Build configuration
├── package.json
└── README.md

🤝 Contributing

While this is primarily an automated wrapper, contributions are welcome:

🐛 Bug reports - If the UMD build doesn't work as expected
💡 Feature requests - Suggestions for build optimizations
📖 Documentation - Improvements to examples or README
🔧 Build improvements - Better bundle configurations

Please open an issue or submit a PR!

📜 License

Apache-2.0 - Same as the original Streamdown project.

This project wraps the official Streamdown package and all credit goes to the original authors at Vercel.

🔗 Links

Official Streamdown: https://streamdown.ai
Official Repository: https://github.com/vercel/streamdown
NPM Package: https://www.npmjs.com/package/umd-streamdown
Report Issues: https://github.com/nativestranger/umd-streamdown/issues

⚠️ Notes

This is an unofficial UMD wrapper - For ES modules, use the official package
React 18+ or 19 must be loaded before this script
Bundle sizes are large due to included dependencies - Consider using the core build for production
Not affiliated with Vercel - This is a community project

💖 Acknowledgments

Streamdown by Vercel
Inspired by umd-react
Thanks to all contributors of the original Streamdown project

Made with ❤️ for the community