MarkdownRenderer

Streaming-aware markdown renderer that handles headings, bold, italic, inline code, code blocks, lists, blockquotes, links, and horizontal rules. Designed to work with StreamingText for progressive rendering.

MarkdownRenderer — Live Demo

AI-Native Design Systems

Building interfaces for AI products requires fundamentally different thinking than traditional web apps.

Key Principles

Here are the core ideas:

Design for uncertainty — AI outputs are non-deterministic
Stream everything — token-by-token rendering feels alive
Trust signals — users need to know when to verify

Code Example

typescript

import { StreamingText } from "@arc-lo/ui";

function ChatMessage({ stream }) {
  return (
    <StreamingText.Root stream={stream}>
      <StreamingText.Content />
      <StreamingText.Cursor />
    </StreamingText.Root>
  );
}

Why This Matters

The best AI products don't just show answers — they communicate confidence and invite collaboration.

Traditional design systems give you Button, Input, and Modal. But none of them have a ConfidenceBadge or a RefusalCard.

That's the gap arclo fills.

Works with shadcn/ui
Built on Radix conventions
Fully TypeScript + Tailwind

Import

tsx

import { MarkdownRenderer } from "@arc-lo/ui";

Basic usage

tsx

<MarkdownRenderer content={markdownString} />

With StreamingText

tsx

<StreamingText.Root stream={stream}>
  <StreamingText.Content
    render={(text) => <MarkdownRenderer content={text} />}
  />
  <StreamingText.Cursor />
</StreamingText.Root>

Custom code block rendering

tsx

import { highlight } from "sugar-high";

<MarkdownRenderer
  content={markdown}
  renderCode={(code, lang) => (
    <div className="rounded-xl border bg-gray-50 overflow-hidden">
      {lang && (
        <div className="border-b bg-gray-100 px-4 py-1 text-xs">
          {lang}
        </div>
      )}
      <pre className="p-4 text-sm">
        <code
          dangerouslySetInnerHTML={{
            __html: highlight(code),
          }}
        />
      </pre>
    </div>
  )}
/>

Supported syntax

Element	Syntax	Rendered as
`Heading`	# H1, ## H2, ### H3	<h1>–<h6>
`Bold`	text	<strong>
`Italic`	text	<em>
`Inline code`	`code`	<code>
`Code block`	```lang\ncode\n```	<pre><code>
`Link`	[text](url)	<a>
`Unordered list`	- item	<ul><li>
`Ordered list`	1. item	<ol><li>
`Blockquote`	> text	<blockquote>
`Horizontal rule`	---	<hr>

Props

Prop	Type	Default	Description
`content`	`string`	—	Markdown text to render (required)
`renderCode`	`(code: string, lang?: string) => ReactNode`	—	Custom code block renderer