"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, Literate Programming (1984)
Knuth's insight was simple but radical: programs should be written for people first, machines second. This idea gave us Jupyter Notebooks for data science and Org mode for Emacs wizards.
Reactive MD brings literate programming to UI/UX.
Write product specs, wireframes, and user journeys with embedded, interactive React components. Unlike static mockups or separate prototyping tools, these documents let you tell a story with working visuals — prose and prototypes in one scrollable narrative.
Ideate, visualize, and collaborate all in one place
Test responsive designs with a synchronized "Document Bus"
🎨 Tailwind v4
Full utility support, zero config
📦 npm Packages
Pre-bundled high-quality libraries (100% offline)
📁 Local Imports
Import .jsx, .tsx, and .css files relatively
⚛️ React 19
Modern runtime for high-fidelity interactive previews
🎯 TypeScript
Full .tsx support with type stripping
🚀 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>;
}
```
🎯 Two Preview Modes
Mode
Keyboard
Best For
Markdown Preview
Cmd+Shift+V
Documentation, static examples, fast review
Interactive Preview
Cmd+K P
Hooks, state, animations, responsive testing
Markdown Preview renders server-side HTML (hooks show initial state).
Interactive Preview runs full React runtime with live reload and pre-bundled libraries.
📦 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.9 }}
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 Libraries
Reactive MD is designed to work 100% offline. The following libraries are pre-bundled directly into the extension:
AI agents can work more effectively with Reactive MD using available skills:
reactive-md skill — Specialized in creating functional markdown documents with embedded interactive React components for product specs, wireframes, and prototypes.
elementary skill — Token-based design system expertise for themeable interfaces and design system compliance.
See the recipes/ folder for examples of what's possible with Reactive MD — from simple components to self-contained project folders with local imports.
Case Studies — eCommerce PDPs, SaaS dashboards, social feeds.
