Docs
Markdown Content

Markdown Content

A component that renders markdown content.

Markdown Example

This is a sample paragraph that demonstrates how markdown content can be rendered in your application. It shows various markdown elements working together.

Features List

  • Clean and simple syntax
  • Support for headings and paragraphs
  • Bullet point lists
  • Easy to read and write
  • Customizable styling

Text Formatting

You can make text bold, italic, or both. You can also use strikethrough text.

Links and Images

Here's a link to GitHub and below is a sample image:

Markdown Logo

Code Examples

Inline code: const greeting = "Hello World!"

Code Block

// Code block
function sayHello() {
  console.log("Hello!");
}

Blockquotes

This is a blockquote It can span multiple lines

And can be nested

Tables

Header 1Header 2Header 3
Row 1DataData
Row 2DataData

Task Lists

  • Completed task
  • Pending task
  • Another task

Horizontal Rule

Ordered List

  1. First item
  2. Second item
  3. Third item
    1. Sub-item 1
    2. Sub-item 2

This component provides a simple way to render Markdown content with optimized performance through memoization. The implementation uses memoized blocks which prevents unnecessary re-renders and improves rendering efficiency, especially when dealing with streaming content.

The memoization approach is inspired by the Vercel AI SDK's markdown chatbot example. As they explain, memoization caches parsed Markdown blocks and reuses them to avoid redundant parsing and rendering operations. This is particularly beneficial when content is being streamed or updated frequently, as it ensures that only changed blocks are re-rendered rather than the entire content.

Installation

pnpm dlx shadcn@latest add https://simple-ai.dev/r/markdown-content.json

Usage

import { MarkdownContent } from "@/components/ui/markdown-content"
<MarkdownContent id="my-id" content={content} />

Examples

Streaming

This component supports streaming content with automatic batching

JSX RendererModel Selector