Support for Chart Rendering via Vega Lite

[zhengyufanevan-spec]

Problem Statement

I'm always frustrated when I want to render charts directly from Vega-Lite JSON inside Streamdown messages.

Currently, Streamdown treats all code blocks the same, so I cannot display interactive charts inline while keeping all the built-in features like copy/download buttons and syntax highlighting for other code blocks.

Proposed Solution

I would like Streamdown to support rendering vega-lite fenced code blocks using Vega-Lite.

When a code block is marked as vega-lite (i.e., ```vega-lite), Streamdown should parse the JSON and render it as an interactive Vega-Lite chart.

All other code blocks should continue to render with Streamdown's default behavior, preserving syntax highlighting, copy/download actions, and language badges.

Invalid JSON should gracefully fall back to default code rendering or show an error placeholder.

Alternatives Considered

I've also considered:

• Using custom React components to intercept code blocks before rendering. While this works, it requires manual overrides and breaks Streamdown’s built-in features for non-chart code blocks.

• Using Markdown extensions outside of Streamdown, but that would prevent streaming-friendly rendering and incremental updates.

Use Case

import { Streamdown } from 'streamdown';
import { VegaLiteChart } from './VegaLiteChart';

const markdown = `
Here is a chart:

\`\`\`vega-lite
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      { "a": "A", "b": 28 },
      { "a": "B", "b": 55 },
      { "a": "C", "b": 43 }
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": { "field": "a", "type": "nominal" },
    "y": { "field": "b", "type": "quantitative" }
  }
}
\`\`\`

And some code:

\`\`\`ts
console.log("Hello Streamdown");
\`\`\`
`;

<Streamdown content={markdown} />;

Priority

Critical

Contribution

• I am willing to help implement this feature

Additional Context

• This would enable LLM-driven chart generation directly in Streamdown streams.
• Could also support multiple charts per message and incremental updates while streaming.
• Would make Streamdown a full-featured interactive Markdown + chart rendering solution.

[GaryBer]

I had a similar requirement and I was able to accomplish it by forking Streamdown, then getting everything to build via pnpm run build then adding this export and rebuilding

To link to the local package, I used npm workspaces in package.json. You must remove the streamdown dependency and run npm install for npm to switch over to the local package

then created a custom code component that is able to switch based on type between custom content and the default behavior

got it to work with vaga-lite

output

[haydenbleasel]

Hey! Thanks for the detailed request — and shoutout to the commenter who got it working by forking.

The good news is you won't need to fork anymore! We've added a custom renderers API coming in the next release that handles this exact use case:

import { Streamdown } from "streamdown";
import type { CustomRendererProps } from "streamdown";
import { CodeBlockContainer, CodeBlockHeader } from "streamdown";
import { useEffect, useRef } from "react";

const VegaLiteRenderer = ({ code, language, isIncomplete }: CustomRendererProps) => {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (isIncomplete || !containerRef.current) return;

    let cancelled = false;

    const render = async () => {
      const spec = JSON.parse(code);
      const vegaEmbed = (await import("vega-embed")).default;
      if (cancelled || !containerRef.current) return;

      containerRef.current.innerHTML = "";
      await vegaEmbed(containerRef.current, spec, { actions: false, renderer: "svg" });
    };

    render();
    return () => { cancelled = true; };
  }, [code, isIncomplete]);

  return (
    <CodeBlockContainer isIncomplete={isIncomplete} language={language}>
      <CodeBlockHeader language={language} />
      {isIncomplete ? (
        <div className="flex h-48 items-center justify-center rounded-md bg-muted">
          <span className="text-muted-foreground text-sm">Loading chart...</span>
        </div>
      ) : (
        <div ref={containerRef} className="overflow-hidden rounded-md p-4" />
      )}
    </CodeBlockContainer>
  );
};

<Streamdown
  plugins={{
    renderers: [
      { language: ["vega", "vega-lite"], component: VegaLiteRenderer },
    ],
  }}
>
  {markdown}
</Streamdown>

Custom renderers are checked first, so your vega-lite blocks get the chart while everything else (ts, json, etc.) keeps the default code block with syntax highlighting, copy/download buttons, and language badges. We also export internal components like CodeBlockContainer and CodeBlockHeader so your renderer gets consistent styling out of the box.