Reactive MD
Literate UI/UX for product teams.
Write product specs with working prototypes. Document user journeys with clickable components. No Figma exports, no separate prototyping tools — just markdown and React, rendered live in VS Code.
"Instead of imagining that our main task is to instruct a computer what to do, let us concentrate rather on explaining to human beings what we want a computer to do."
— Donald Knuth
Jupyter brought literate programming to data science. Reactive MD brings it to UI/UX.
✨ Key Features
| Feature |
Description |
| ⚡ Live Reload |
See changes as you type — no manual refresh |
| 📝 Markdown Fences |
jsx live renders components inline with prose |
| 🎨 Tailwind v4 |
Beautiful styling, zero config |
| 📦 npm Packages |
motion, lucide-react, dayjs — bundled for offline |
| 📁 Local Imports |
Keep components alongside your specs |
| 🎯 TypeScript |
Full .tsx support |
🚀 Quick Start
Option 1: JSX/TSX Files
- Open any
.jsx or .tsx file
- Press
Cmd+K P (Mac) / Ctrl+K P (Windows/Linux)
- Start coding — preview updates live!
Option 2: Markdown Code Fences
```jsx live
function Hello() {
return <h1 className="text-2xl font-bold text-blue-600">Hello World!</h1>;
}
```
Press Cmd+Shift+V for markdown preview, or Cmd+K P for interactive mode.
🎯 Two Preview Modes
| Mode |
Keyboard |
Best For |
| Markdown Preview |
Cmd+Shift+V |
Documentation, static examples |
| Interactive Preview |
Cmd+K P |
Hooks, state, animations |
Markdown Preview renders server-side HTML (hooks show initial state).
Interactive Preview runs full React runtime with live reload.
📦 Works With Your Favorite Libraries
import { motion } from 'motion/react';
import { Heart } from 'lucide-react';
import dayjs from 'dayjs';
function Demo() {
return (
<motion.div
initial={{ scale: 0 }}
animate={{ scale: 1 }}
className="flex items-center gap-2 p-4"
>
<Heart className="text-red-500" />
<span>Built with love • {dayjs().format('MMMM D, YYYY')}</span>
</motion.div>
);
}
Bundled for offline use: lucide-react, motion, clsx, dayjs, es-toolkit, uuid.
💡 These bundled packages work in Markdown Preview (offline). Other npm packages (zustand, jotai, swr, react-hook-form, etc.) require Interactive Preview + internet via esm.sh CDN.
⚙️ Configuration
| Setting |
Default |
Description |
reactiveMd.debounceMs |
300 |
Live reload delay (100-2000ms) |
reactiveMd.showCodeLens |
true |
Show "▶ Preview" above exported components |
reactiveMd.staticPreviewOverlay |
"full" |
Markdown overlay style |
📋 Requirements
- VS Code 1.106.0+
- Internet connection (for npm packages via CDN)
🐛 Troubleshooting
Preview not showing?
- Ensure file is
.jsx or .tsx (not .js)
- Reload:
Cmd+Shift+P → "Developer: Reload Window"
- Check Output panel:
View → Output → "Reactive MD"
See Troubleshooting Guide for more solutions.
📖 Learn More
🤝 Contributing
Have a recipe idea? Want to share a use case? Contribute to recipes.
Found a bug? Open an issue.
Built by Million Views
Literate UI/UX for product teams
License
MIT © Million Views
