Overview

@deltakit/markdown is a React markdown renderer purpose-built for AI streaming. It parses and renders markdown incrementally, so settled blocks usually stay stable and partial syntax never flickers on screen.

Why a Separate Renderer?

Libraries like react-markdown are excellent general-purpose markdown renderers with full CommonMark compliance and a rich plugin ecosystem. If you're rendering static markdown content, react-markdown is the right choice.

However, when used with AI streaming, traditional renderers re-run a full parse pipeline on every token. This causes:

• Full reparse cost on every incoming token
• Broken partial syntax — unclosed ** renders as plain text, then flickers bold when closed
• Layout shifts on code blocks — ``` renders as a paragraph until the closing fence arrives

@deltakit/markdown solves these problems by design. It parses markdown into blocks, keeps settled blocks stable via React.memo, and buffers uncertain inline syntax until it resolves.

What's Included

• StreamingMarkdown — Main React component with block-level memoization for active streaming
• Markdown — Lightweight component for completed/historical messages (no streaming overhead)
• useStreamingMarkdown — Headless hook for custom rendering
• parseIncremental — Framework-agnostic parser (importable from @deltakit/markdown/core)

Installation

pnpm add @deltakit/markdown

Quick Example

import { useStreamChat } from "@deltakit/react";
import { StreamingMarkdown } from "@deltakit/markdown";

function Chat() {
  const { messages, sendMessage } = useStreamChat({
    api: "/api/chat",
  });

  return (
    <div>
      {messages.map((msg) => (
        <div key={msg.id}>
          {msg.parts
            .filter((p) => p.type === "text")
            .map((p, i) => (
              <StreamingMarkdown key={i} content={p.text} />
            ))}
        </div>
      ))}
    </div>
  );
}

Supported Markdown Features

Features not supported in v0.1.0: nested blockquotes, reference links, HTML entities, escape sequences, and the remark/rehype plugin system. See Migration from react-markdown for a full comparison.

Bundle Size

@deltakit/markdown has zero runtime dependencies. The minified + gzipped bundle is approximately 3.8kb.

Next Steps

• Quick Start: Install and render streaming markdown in minutes
• StreamingMarkdown: How block-level rendering works
• Migration from react-markdown: Side-by-side comparison and migration guide