Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>Component ViewerNew to Visual Studio Code? Get it now.
Component Viewer

Component Viewer

Chaitanya Sai Terli

|
198 installs
| (0) | Free
Live preview of React components directly in VS Code
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

VS Code Component Preview Extension

This extension provides a live preview of components directly in VS Code.

Features

  • Show a live preview of your component in a side panel
  • Auto-updates as you type
  • Supports VS Code's theme colors

Usage

  1. Open a file containing your component
  2. Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac) to open the command palette
  3. Type "Show Component Preview" and select the command
  4. A preview panel will open showing your component

Development

  1. Clone this repository
  2. Run npm install to install dependencies
  3. Press F5 to start debugging

Requirements

  • VS Code 1.85.0 or higher

Extension Settings

This extension doesn't contribute any settings yet.

Known Issues

  • Basic preview implementation, may not support all component types
  • Styling is limited to basic CSS
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft