MarkdownRenderer

Renders markdown, syntax highlighting included.

Renders a markdown string — tables, code blocks with syntax highlighting, and maths included. Good for LLM output, or for prose that lives in your database.

export const client = "only";

import { MarkdownRenderer } from "@squadbase/vantage/markdown";

const content = `## 今週の所感

関東の売上が **前週比 +12.4%** と伸びました。要因は次の 2 点です。

1. 7/18 のキャンペーン
2. 新規顧客 128 件の獲得

| 地域 | 売上 | 前週比 |
| --- | --- | --- |
| 関東 | ¥640,000 | +12.4% |
| 関西 | ¥380,000 | -2.1% |

\`\`\`sql
select region, sum(amount) from sales group by 1
\`\`\`
`;

export default function Example() {
  return (
    <div className="w-[36rem] rounded-xl border p-5">
      <MarkdownRenderer content={content} />
    </div>
  );
}

import { MarkdownRenderer } from "@squadbase/vantage/markdown";

Why it’s on its own subpath

It is deliberately not re-exported from @squadbase/vantage/components. Markdown rendering carries Shiki with every language grammar, and the import edge alone is something bundlers cannot drop. Sitting in the shared barrel, it would add roughly 11 MB and 300 files to the build output of apps that never render markdown.

Behind its own entry, only the apps that import it pay for it.

// This one is heavy — and that's fine
import { MarkdownRenderer } from "@squadbase/vantage/markdown";

// This one stays light
import { DashboardCardPreset } from "@squadbase/vantage/components";

Streaming LLM output

Since only content changes, you can hand it a partially-streamed string. Incomplete markdown — an unclosed code fence, say — still renders without breaking.

const [text, setText] = useState("");
// …setText((prev) => prev + chunk) as chunks arrive

<MarkdownRenderer content={text} />;