react-visual-lens

Figma-like visual editor for live React applications. Select any element, edit its styles in a properties panel, and save changes back to source code.

Features

• Click-to-select any React component with real component names
• Visual properties panel: position, dimensions, layout, spacing, fill, stroke, typography, effects
• Live DOM preview — see changes instantly before saving
• Save to source code via AST manipulation (inline styles + Tailwind CSS)
• Component layer tree with drag-to-reorder
• Works with Vite and Next.js

Quick Start

Vite

npm install -D react-visual-lens

// vite.config.ts
import react from '@vitejs/plugin-react';
import { reactLensPlugin } from 'react-visual-lens/vite';

export default defineConfig({
  plugins: [
    react(),
    reactLensPlugin({ tailwind: true })
  ]
});

Next.js

// next.config.js
const { withReactLens } = require('react-visual-lens/next');
module.exports = withReactLens({ tailwind: true })({ /* your config */ });

// pages/api/__reactlens/[...slug].ts
import handler from "react-visual-lens/next-api"
export default handler

Usage

• Hover any element to see its component name and dimensions
• Click to select and inspect properties
• Edit any value in the sidebar for instant live preview
• Toggle panel from the floating ReactLens pill at the top-right
• Cmd+S to save changes to source code
• Cmd+Z to undo
• Panel state persists across refreshes
• Layers tab to see and reorder the component tree

Requirements

• React 17+ (development mode)
• Vite 5+ or Next.js 14+
• Node.js 18+

License

MIT