Packages & Implementations
All available parsers and renderers, plus live framework demos. Toggle to view source for each example.
Architecture Overview
Markdown UI uses a two-stage approach: Parsers convert widget syntax to JSON, then Renderers display interactive components in your framework. Choose one parser + one renderer for your stack.
Choose Framework
React @markdown-ui/react ↗
Live
import { MarkdownUI } from '@markdown-ui/react';
import '@markdown-ui/react/widgets.css';
import { Marked } from 'marked';
import { markedUiExtension } from '@markdown-ui/marked-ext';
const marked = new Marked();
marked.use(markedUiExtension);
export default function ReactDemo() {
const exampleMarkdown = `# React Implementation
This demo runs using **@markdown-ui/react**:
```markdown-ui-widget
button-group react-choice [Hooks Context Redux] Hooks
```
```markdown-ui-widget
select react-version [16 17 18 19] 18
```
```markdown-ui-widget
slider react-components 1 50 1 12
````;
const renderedHtml = marked.parse(exampleMarkdown);
return <MarkdownUI html={renderedHtml} />;
} 
Svelte 
Vue Widget Events
No events yet
Interact with any framework's widgets to see events here.
All Packages
Parser Packages
P
@markdown-ui/mdui-lang
Core DSL parser for converting widget syntax to JSON. Use this if you're building custom Markdown parsers or need standalone widget parsing.
import { parseDSL } from '@markdown-ui/mdui-lang';
const result = parseDSL('button-group plan [Basic Pro] Basic'); M
@markdown-ui/marked-ext
Marked.js extension that integrates mdui-lang parser. Use this if you're using Marked.js as your primary Markdown parser.
import { markedUiExtension } from '@markdown-ui/marked-ext';
marked.use(markedUiExtension); Renderers
Usage Pattern
Choose one parser + one renderer for your framework:
npm install @markdown-ui/marked-ext @markdown-ui/react