Streamdown Profiler

Introduction

The profiler is a separate entry, @lobehub/streamdown/profiler, so it never lands in your bundle unless you import it. Create a profiler, provide it above any <Streamdown />, and read its snapshot. Without a provider, Streamdown skips all measurement.

import { Streamdown } from "@lobehub/streamdown";
import {
  createStreamdownProfiler,
  StreamdownProfilerProvider,
} from "@lobehub/streamdown/profiler";
import { useMemo, useSyncExternalStore } from "react";

const Message = ({ content }: { content: string }) => {
  const profiler = useMemo(
    () => createStreamdownProfiler({ label: "chat" }),
    [],
  );
  const snapshot = useSyncExternalStore(
    profiler.subscribe,
    profiler.getSnapshot,
  );

  return (
    <StreamdownProfilerProvider profiler={profiler}>
      <Streamdown content={content} />
      <small>root commit avg {snapshot.root.avgMs.toFixed(2)}ms</small>
    </StreamdownProfilerProvider>
  );
};

High-TPS stream

Two thousand characters per second of mixed markdown: long paragraphs, a code fence, a table and a diagram. The panel shows main-thread load (event-loop lag, plus the Compute Pressure API where available), root and block commit cost, reveal frame cost and input chunk size.

createStreamdownProfiler

createStreamdownProfiler(options?: CreateStreamdownProfilerOptions): StreamdownProfiler

The returned StreamdownProfiler has getSnapshot(), subscribe(listener) and reset(label?), plus the record* methods Streamdown calls internally (recordRootCommit, recordBlockCommit, recordAnimationFrame, recordCalculation, recordInputAppend).

Snapshot

StreamdownProfilerSnapshot contains:

useStreamdownProfiler

useStreamdownProfiler() returns the profiler from the nearest provider, or null.

API