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".

🚀 Quick Start

$3

``bash
npm install markdown-flow-ui


or

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

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

$3

`tsx
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 (
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

$3

`tsx
const CustomBar: CustomRenderBarProps = ({ displayContent, onSend }) => {
return (


;
``

🌐 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

📞 Support

- 📖 Documentation
- 🐛 Issue Tracker
- 💬 Discussions