Literate UI/UX for product teams.
"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.
Requires VS Code 1.106.0+.
- Open VS Code
- Press
Cmd+Shift+X(Mac) orCtrl+Shift+X(Windows/Linux) - Search for "Reactive MD"
- Click Install
Or install from the command line:
code --install-extension million-views.reactive-md- Open any
.jsxor.tsxfile - Press
Cmd+K P(Mac) /Ctrl+K P(Windows/Linux) - Start coding — preview updates live!
```jsx live
function Hello() {
return <h1 className="text-2xl font-bold text-blue-600">Hello World!</h1>;
}
```| 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.
| Feature | Description |
|---|---|
| ⚡ Live Reload | See changes as you type — no manual refresh |
| 📝 Markdown Fences | jsx live renders inline in both previews |
| 📱 Device Emulation | Test responsive designs with a synchronized "Document Bus" |
| 🎨 Tailwind v4 | Full utility support, zero config |
| 📦 npm Packages | Pre-bundled high-quality libraries |
| 🔍 CodeLens | Click "▶ Preview" above exported components |
| ⚛️ React 19 | Modern runtime for high-fidelity interactive previews |
| 🎯 TypeScript | Full .tsx support with type stripping |
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>
);
}Reactive MD includes a curated set of pre-bundled packages, so you can use common libraries immediately without extra install/setup steps.
The following libraries are included in the extension:
lucide-react, motion/react, clsx, dayjs, uuid, es-toolkit, zustand, jotai, react-hook-form, zod, @hookform/resolvers/zod, @heroicons/react, tailwind-merge, class-variance-authority.
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 (includes Wireframe/Elementary themes and optional components).
Both skills are available at github.com/million-views/skills and provide domain-specific patterns, examples, and guardrails for working with this tool.
With the reactive-md skill loaded in your AI assistant, these prompts produce documents that replace meetings — not add to them.
Convention: all reactive-md documents live under
product/in the source root — avoiding collision withspecs/(test suites),docs/(site tooling), anddesign/(design-system tooling). Two levels, no deeper:product/<name>/spec.mdfor a product or subsystem vision;product/<name>/<feature>/spec.mdfor a feature deep dive. The entry point is alwaysspec.md—find product/ -name "spec.md"lists every document in the repo.
Replace the PRD → mockup → prototype handoff chain with one document.
Using the reactive-md skill, write a product spec for [your feature or idea].
Structure it as: WHO this is for → THE PROBLEM → WHY NOW → each screen as a
live demo → end-to-end integration. Add design decisions after every demo —
the choices that can't be seen in the UI. This document should make a kickoff
meeting unnecessary.
Wire up the full flow so reviewers can walk through it without a live demo call.
Using the reactive-md skill, prototype the [checkout / signup / onboarding / ...]
flow. Show each screen as a live component with navigation state. Wire the full
flow together at the end — first-time user and returning user scenarios.
A reviewer should be able to say yes or no without scheduling a follow-up.
Using the reactive-md skill, write an A/B test proposal for [CTA copy / pricing
layout / onboarding step / ...]. State the hypothesis, show both variants as live
components side by side, and define the success metric. No follow-up meeting
should be needed to reach a decision.
Prose and charts in the same artifact — readable as an article, vivid as a dashboard.
Using the reactive-md skill, write a visual essay about [retention funnel /
MAU trends / cohort analysis / ...]. Weave the narrative as prose with embedded
SVG charts. The document should read like an article and argue a point, not just
display numbers.
Verify that your components respond to the emulated device, not the VS Code window.
Using the reactive-md skill, audit the mobile and tablet layout of [component or
screen]. Use device emulation (iPhone portrait and tablet landscape) to verify
container query behavior. Document what breaks at each breakpoint and why.
Replace frozen screenshots with components that actually run.
Using the reactive-md skill, document [component name / design token / pattern]
in our design system. Show every state as a live example — not a screenshot.
Include usage guidelines as prose alongside each demo.
The document makes a call — not just shows data.
Using the reactive-md skill, write a competitive analysis for [your product /
category]. Structure it as: executive summary with verdict first → scored
comparison matrix → feature-by-feature table → key insights with implications →
a prioritized recommendation. A reader who only reads the summary should know
where we stand and what to do next.
Provide screenshots of the current experience — no codebase reading needed. The AI embeds them as-is, names the friction, then proposes the fix as a live React component.
Using the reactive-md skill, audit and redesign the [screen/flow].
I've placed screenshots of the current experience in screenshots/current/.
Embed each screenshot as a plain image, then annotate friction points below
it — where users struggle, abandon, or make errors. For each screen, propose
the redesign as a live React component with a design decisions block covering
what changed, what was preserved, and what was rejected. End with migration
notes. A reviewer should be able to approve or push back without scheduling
a call.
Give the team a prioritized list of fixes, not a vague "needs improvement" verdict.
Using the reactive-md skill, map the UX debt in [feature/flow]. I've placed
screenshots of the current screens in screenshots/current/. For each screen,
embed the screenshot and annotate the friction points as prose. Then propose
the improved version as a live React component. Conclude with a prioritized
fix list — quick wins first, structural changes last — so the team can scope
the work without a follow-up meeting.
Wire up the path from today's state to the target state in incremental steps.
Using the reactive-md skill, propose a migration path for redesigning
[checkout / settings / onboarding / ...] in our existing app. I've placed
screenshots of the current screens in screenshots/current/. Embed them to
establish the baseline, then show each proposed stage as a live React
component with device emulation at the intended viewport. End with a rollout
strategy — which changes can ship independently and which are coupled.
reactiveMd.debounceMs(default: 300ms): Controls live reload delay. Increase if updates feel too frequent.reactiveMd.showCodeLens(default: true): Shows "▶ Preview" buttons above exported components.reactiveMd.previewOverlay(default: "full"): Controls error card display ("full", "minimal", or "none").reactiveMd.updateMode(default: "live"): Choose "live" for real-time updates or "on-save" for updates only when files are saved.
Access settings via Cmd+, (Mac) or Ctrl+, (Windows/Linux) and search for "Reactive MD".
Reactive MD documents require the extension to render — raw markdown with live fences is inert on GitHub. Pattern recipes (product specs, user flows, A/B tests, competitive analyses, and more) are available at github.com/million-views/skills. Load the reactive-md skill in your AI assistant and reference them by name.
MIT © Million Views
Built by Million Views
Literate UI/UX for product teams