MarkdownFlow UI Component Library

React component library for rendering interactive MarkdownFlow documents with typewriter effects, real-time streaming, and advanced Mermaid diagram support.

MarkdownFlow (also known as MDFlow or markdown-flow) extends standard Markdown with AI to create personalized, interactive pages. Its tagline is "Write Once, Deliver Personally".

English | 简体中文

🚀 Quick Start

Install

npm install markdown-flow-ui
# or
yarn add markdown-flow-ui
# or
pnpm add markdown-flow-ui

Basic Usage

import { MarkdownFlow } from "markdown-flow-ui";

function App() {
  return (
    <MarkdownFlow
      initialContentList={[
        {
          content:
            "# Hello World\n\nThis is **MarkdownFlow** with typewriter effect!",
        },
      ]}
      enableTypewriter={true}
      typingSpeed={30}
    />
  );
}

Interactive Elements

import { MarkdownFlow } from "markdown-flow-ui";

function InteractiveExample() {
  const content = `
Choose your language: ?[%{{lang}} English | 中文 | Español]

Your name: ?[%{{name}} Enter your name...]

?[Continue | Cancel]
`;

  return (
    <MarkdownFlow
      initialContentList={[{ content }]}
      onSend={(params) => {
        console.log("User interaction:", params);
        // Handle button clicks and input submissions
      }}
    />
  );
}

📖 Documentation

For detailed API documentation, examples, and advanced usage, see:

📋 API Reference - Complete API documentation with examples

🧩 Advanced Examples

Custom Render Bar

const CustomBar: CustomRenderBarProps = ({ displayContent, onSend }) => {
  return (
    <div className="flex gap-2 mt-4">
      <button
        onClick={() => onSend({ buttonText: "Regenerate" })}
        className="px-4 py-2 bg-blue-500 text-white rounded"
      >
        Regenerate
      </button>
      <button
        onClick={() => navigator.clipboard.writeText(displayContent)}
        className="px-4 py-2 bg-gray-500 text-white rounded"
      >
        Copy
      </button>
    </div>
  );
};

<MarkdownFlow customRenderBar={CustomBar} initialContentList={messages} />;

🌐 MarkdownFlow Ecosystem

markdown-flow-ui is part of the MarkdownFlow ecosystem for creating personalized, AI-driven interactive documents:

markdown-flow - The main repository containing homepage, documentation, and interactive playground
markdown-flow-agent-py - Python agent for transforming MarkdownFlow documents into personalized content
markdown-it-flow - markdown-it plugin to parse and render MarkdownFlow syntax
remark-flow - Remark plugin to parse and process MarkdownFlow syntax in React applications

💖 Sponsors

AI-Shifu.com

AI-powered personalized learning platform

📄 License

MIT License - see LICENSE file for details.

🙏 Acknowledgments

React Markdown for markdown processing
Mermaid for diagram rendering
Highlight.js for syntax highlighting
Tailwind CSS for styling
Radix UI for accessible components

ai-shifu/markdown-flow-ui