A React UI library for rendering markdown with interactive flow components, typewriter effects, and plugin support
npm install markdown-flow-uiReact 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 | 简体中文
``bash`
npm install markdown-flow-uior
yarn add markdown-flow-uior
pnpm add markdown-flow-ui
`tsx
import { MarkdownFlow } from "markdown-flow-ui";
function App() {
return (
{
content:
"# Hello World\n\nThis is MarkdownFlow with typewriter effect!",
},
]}
enableTypewriter={true}
typingSpeed={30}
/>
);
}
`
`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 (
onSend={(params) => {
console.log("User interaction:", params);
// Handle button clicks and input submissions
}}
/>
);
}
`
For detailed API documentation, examples, and advanced usage, see:
📋 API Reference - Complete API documentation with examples
`tsx
const CustomBar: CustomRenderBarProps = ({ displayContent, onSend }) => {
return (
onClick={() => onSend({ buttonText: "Regenerate" })}
className="px-4 py-2 bg-blue-500 text-white rounded"
>
Regenerate
onClick={() => navigator.clipboard.writeText(displayContent)}
className="px-4 py-2 bg-gray-500 text-white rounded"
>
Copy
);
};
``
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
MIT License - see LICENSE file for details.
- React Markdown for markdown processing
- Mermaid for diagram rendering
- Highlight.js for syntax highlighting
- Tailwind CSS for styling
- Radix UI for accessible components
- 📖 Documentation
- 🐛 Issue Tracker
- 💬 Discussions