ReactLens
A code-first component preview and visual testing tool for React, built into VS Code.
Preview and iterate in your editor. Test visually in CI. Write zero custom API. Pay nothing.
What It Does
- Inline previews — Clickable "Preview" links appear above
@preview annotations in your code
- Live rendering — Components render in a VS Code side panel with hot reload
- Resolution switching — Toggle between device presets (Mobile, Tablet, Desktop) or use custom sizes
- Visual snapshot testing — Capture baseline screenshots and diff them in CI (coming soon)
- Zero custom API — Preview files are plain
.tsx files. Your linter, formatter, and TypeScript just work.
Quick Start
1. Install the extension
Install from the VS Code Marketplace (coming soon), or build from source:
bun install
bun run build
Then press F5 in VS Code to launch the extension in a dev host.
2. Add a preview annotation
/**
* @preview {
* name: "Default",
* props: { "label": "Click me", "size": "md" }
* }
*/
export const Button = ({ label, size }: Props) => (
<button className={`btn btn-${size}`}>{label}</button>
);
3. Click "Preview" above your component
A side panel opens with your component rendered live.
For Complex Components
Create a .preview.tsx file:
// Card.preview.tsx
import { Card } from './Card';
import { Title } from './Title';
/** @preview { name: "Card with actions" } */
export default () => (
<Card header={<Title text="Settings" />}>
<p>Adjust your preferences.</p>
</Card>
);
Development
bun install # Install dependencies
bun run watch # Watch mode (rebuilds on change)
bun run build # Production build + package .vsix
bun run test # Run tests
Press F5 in VS Code to launch the Extension Development Host.
Architecture
ReactLens is a VS Code extension with two bundles:
- Extension host (Node.js) — Parses source files, provides inline preview links, manages webview panels
- Webview (Browser) — Renders previews, toolbar, and diff viewer
See CLAUDE.md for full architecture details and ROADMAP.md for the implementation plan.
License
MIT
