Opening & Managing Files

Opening a file

1. Open any .jsx or .js file in VS Code, the way you normally would (Explorer, Ctrl+P, etc.)
2. Click the Open Preview icon in the top-right of the editor tab (or run React Visualizer: Open Preview from the Command Palette, Ctrl+Shift+P).
3. The React Preview panel opens beside your editor and renders your component live.

The first time you open a preview, a one-time setup runs in the background (usually 30–60 seconds) to prepare the local rendering engine. Every launch after that is instant.

Switching between files

Just switch tabs in VS Code — the preview and click-to-code sync automatically follow whichever .jsx/.js/.tsx file is active.

Saving your work

There's no separate "sandbox" copy to manage: you're always editing your real file. Save it exactly as you always do in VS Code (Ctrl+S), and that save also creates a Manual entry in your Revision History.