React Component Preview for VS Code (JSX / TSX)

A high-performance VS Code extension providing live in-editor previews of React components directly beside your code, complete with SCSS & CSS Modules support, comment-based mock data, and an ephemeral Redux store with action inspection.

✨ Features

• ⚡ Instant In-Editor Preview: Renders your JSX / TSX components natively in VS Code's Integrated Browser without needing to start your entire web application or external windows.
• 📱 Responsive Viewport Presets: Easily test components in Responsive, Mobile (375 × 667), Tablet (768 × 1024), and Desktop (1280 × 800) device frames with real dimensions.
• 🌓 Canvas Theme Modes: Switch the preview canvas between Dark, Light, and Transparency Checkerboard backgrounds with one click.
• 🔍 Camera Navigation & Focal Scroll Zoom: Smoothly zoom from 10% to 500% by scrolling your mouse wheel (anchored to your cursor). Freely pan the camera across large components via Middle-click drag, Space + drag, background drag, or the Pan Tool (H). Includes instant Fit to Screen and Reset Camera buttons.
• 🗂️ Multi-Component Dropdown: Switch between any exported component in the current file directly from the preview header.
• 💬 Comment-Driven Mock Data: Define mock props, store, slice, and viewport directly above your component using clean YAML syntax.
• 🎨 SCSS & CSS Modules Out-of-the-Box: Native compilation and Hot Module Replacement (HMR) for .scss and *.module.scss files powered by Vite & Sass.
• 🔄 Multi-Variant Tabs: Switch between different scenarios (e.g. Default, Admin State, Logged Out State, Error State) with a single click.
• 🛡️ Ephemeral Mock Redux Store: Safely renders components relying on useSelector and useDispatch without crashes, side-effects, or singleton pollution.
• 🧩 Provider Wrapper Decorators (wrapperPath): Wrap components in custom app providers (e.g. ThemeProvider, QueryClientProvider, Router).
• 🌐 Live HTTP & API Network Inspector: Automatically intercepts and logs requests made by axios, window.fetch, and Redux Toolkit createApi (RTK Query) with method, URL, status code, duration, request payload, and response data.
• 🎯 Console & Action Inspector: Bottom drawer that records and displays live console.log, info, warn, and error outputs, dispatched Redux actions, invoked callback props, and HTTP network requests with instant text search, filter tabs, copy-to-clipboard, and timestamps.
• 📺 VS Code Output Channel Streaming: Automatically streams all in-preview console logs directly into VS Code's Component Preview output channel.
• 🔒 Component Lock / Pin: Freeze and keep the current preview active with a single click, allowing you to browse or edit other files across your codebase without losing your component view.
• 🛑 Full Server Lifecycle Control: Turn off or restart the background Vite server anytime via the editor title bar, status bar, command palette, or in-preview header.
• 🚨 Visual Error Boundary & VS Code Problems Diagnostics: Catches syntax or runtime exceptions gracefully with clean stack traces and a retry button, and automatically surfaces runtime errors into VS Code's Problems panel with inline squigglies under the exact line in your editor.
• ⚡ Interactive In-Editor CodeLens: Action buttons (▶ Preview <Component />, 🐞 Debug <Component />, 🔄 N Variants, 🔒 Locked) appear directly above component declarations and /* @preview */ comment blocks for one-click preview launches.
• 🐞 Native In-Editor Debugging with Gutter Breakpoints: Debug components directly inside VS Code with source-level gutter breakpoints, call stacks, variable inspection, and step-through debugging via VS Code's editor-browser engine. Launch via one-click CodeLens, editor title button, preview header, or shortcut (Ctrl+Alt+D).
• 🖥️ Pure Integrated Browser Architecture: Pure in-editor preview without custom Webview wrappers or external windows. Requires VS Code 1.112+ (displays an actionable update toaster notification on older VS Code versions).
• 🌗 VS Code Theme Synchronization: Automatically matches the preview canvas, top navigation bar, and controls with your active VS Code color theme (Auto, Dark, Light, Checkerboard).

🚀 Quick Start

1. Open any .jsx or .tsx file in VS Code.
2. Click the Preview play icon in the editor title bar, or press Ctrl+Shift+P (or Cmd+Shift+P) and run:

   > Component Preview: Open Component Preview
   

3. The preview will open beside your code and update automatically as you edit or navigate between components.

📝 Writing Preview Comments

Place a /* @preview ... */ comment block directly above your component declaration:

1. Basic Props Example

/* @preview
props:
  label: "Submit Order"
  variant: "primary"
  disabled: false
*/
export const Button: React.FC<ButtonProps> = ({ label, variant, disabled, onClick }) => {
  return (
    <button className={`btn ${variant}`} disabled={disabled} onClick={onClick}>
      {label}
    </button>
  );
};

Note: Any callback prop starting with on* (such as onClick, onSubmit) is automatically mocked. Clicking the button logs the event and arguments directly into the Action Inspector!

2. Multi-Variant State Tabs

To test multiple states (e.g. loading, error, success), declare multiple @preview blocks with scenario names:

/* @preview: Primary Button
props:
  label: "Save Changes"
  variant: "primary"
*/
/* @preview: Danger Action
props:
  label: "Delete Item"
  variant: "danger"
*/
/* @preview: Disabled
props:
  label: "Processing..."
  disabled: true
*/
export const Button = ({ label, variant, disabled }) => { ... };

Tabs will automatically appear at the top of the preview window: [ Primary Button ] [ Danger Action ] [ Disabled ]

3. Redux Store Support (Real Store & Ephemeral Mocking)

The preview extension supports both real production Redux stores (with all reducers, middlewares, sagas, thunks, and RTK Query) and lightweight mock stores:

A. Real Store with Middlewares (storePath)

Point storePath to your store module (relative to the component file or via path aliases like @/store):

/* @preview: Admin User (Real Store)
storePath: "./store"
store:
  auth:
    isLoggedIn: true
    user:
      name: "Sarah Connor"
      role: "admin"
*/
/* @preview: Logged Out (Inherits Store)
store:
  auth:
    isLoggedIn: false
    user: null
*/
export const UserProfile = () => { ... };

• All Reducers & Middlewares Active: Real state mutations, createAsyncThunk, redux-saga, RTK Query, and custom middlewares run in their entirety.
• Store Factories Supported: If your store exports setupStore (or createStore), the harness initializes a fresh, isolated store instance for each variant tab, preloaded with the YAML store: data.
• Store Singletons Supported: If your module exports export const store = configureStore(...) or export default store, it mounts directly.
• Named Exports: Need a specific store or sub-slice? Use storePath: "./authStore#setupAuth".
• Inheritance & Opt-out: Defining storePath in the first variant applies to all subsequent variants for that component automatically. Use storePath: none to explicitly fall back to a mock store.

B. Ephemeral Mock Store (Zero-Config)

If storePath is omitted, the extension automatically creates a lightweight mock store that safely serves any useSelector without needing a real store configured:

/* @preview: Quick Mock
store:
  cart:
    itemCount: 4
*/

C. Live Action & Middleware Inspector

Whenever actions are dispatched (via dispatch({ type: ... }), thunks, or middlewares):

• Real reducers process the action and update the UI.
• The Action Inspector at the bottom records the dispatch in real time:

  ⚡ REDUX  auth/loginRequest  18:15:30
  payload: { "provider": "google" }
  

🎨 SCSS & CSS Modules

SCSS files can be imported directly into your component:

import React from 'react';
import styles from './Card.module.scss';
import './global.scss';

export const Card = ({ title }) => {
  return <div className={styles.container}>{title}</div>;
};

The extension compiles SCSS using sass in real time. Changes to .scss files trigger instant Hot Module Replacement without reloading the page.

🛑 Managing the Preview Server

You can turn off, restart, or start the background preview server at any time using multiple convenient methods:

1. Editor Title Bar: Click the Stop icon $(debug-stop) that automatically appears in the editor title bar whenever the server is active.
2. VS Code Status Bar: Click the $(server) Preview: <port> item located at the bottom right of VS Code to turn off the server.
3. In-Preview Header: Click the red Stop Server button next to the Lock toggle in the preview header.
4. Command Palette (Ctrl+Shift+P / Cmd+Shift+P):
   • Component Preview: Stop Preview Server
   • Component Preview: Restart Preview Server
   • Component Preview: Start Preview Server
5. Auto-Stop on Close: Enable componentPreview.stopServerOnClose to shut down the server automatically whenever you close the preview panel tab.

When the server is stopped while the preview panel is open, a clear status card with a "Start Preview Server" button will be displayed so you can resume anytime with a single click.

🐞 Debugging Components

The extension features first-class debugging support so you can pause execution, set breakpoints, step through component renders and event handlers, inspect scopes and closures, and view call stacks directly inside VS Code:

1. In-Editor CodeLens Debugging

• Set any breakpoint in your .jsx or .tsx file (e.g. at the top of the component or inside an onClick callback).
• Click the 🐞 Debug <Component /> CodeLens button that appears directly above your component declaration line.
• VS Code automatically connects its built-in JavaScript debugger (pwa-chrome or pwa-msedge), navigates to the live component preview with Vite sourcemaps, and halts execution directly at your source line when the component mounts or when you trigger an event!

2. Preview Toolbar Debug Controls

• In the top preview navigation bar, click the Debug button to attach or launch the debugger for the currently displayed component.
• Open the dropdown arrow next to Debug for more options:
  • Start VS Code Debugger: Launches browser session with full source breakpoint binding.
  • Open Webview DevTools: Opens Chromium DevTools for the webview to inspect DOM elements, CSS styles, and network calls.
  • Trigger debugger; statement: Instantly halts execution if DevTools or VS Code Debugger is open.

3. Editor Title Bar & Keyboard Shortcut

• Click the Debug icon $(debug-alt) in the editor tab title bar when viewing any React file.
• Or press Ctrl+Alt+D (or Cmd+Alt+D on macOS).

4. Interactive Console REPL Debugging

• Open the Console & Actions drawer at the bottom of the preview canvas.
• Click the Bug icon in the drawer actions to launch debugging.
• Type debugger; or $debug() in the REPL prompt at the bottom to pause execution and inspect local scopes.

⚙️ Extension Settings

⌨️ Default Keybindings

🛠️ Development & Building

• Install dependencies: npm install
• Build extension: npm run build
• Run parser tests: npx tsx test/testParser.ts
• Run Vite server tests: npx tsx test/testViteServer.ts
• Run debugging integration tests: npx tsx test/testDebuggingIntegration.ts
• Run full test suite: npm test