Live Preview
Reloading the preview
If the preview ever looks stuck, click the reload icon (⟳) in the React Preview panel's toolbar to refresh it.
Click-to-code navigation
Click anywhere inside the preview and your VS Code editor will automatically jump to and highlight the exact line of code responsible for that element — a fast way to find what you need to change.
If you click a text field or button inside the preview, focus deliberately stays there — VS Code's editor won't steal it, so anything you type goes into the previewed page, not into your source file.
Mobile, Tablet, Computer viewpoints
Three icons above the preview let you switch how the preview is sized:
- 🖥 Computer: full-width desktop view (shown by default every time you open a file)
- 📱 Mobile: a phone-sized frame (390 × 844 by default)
- ▭ Tablet: a tablet-sized frame (820 × 1180 by default)
When Mobile or Tablet is selected, two small width/height fields appear next to the icons — change these to test any custom screen size you like. Your custom sizes are remembered while the preview stays open in that session.
Tailwind CSS toggle
If your component uses Tailwind CSS classes (or is simply designed assuming a standard browser reset), the Tailwind toggle in the preview toolbar controls how the preview renders:
- On (default): the preview supports Tailwind CSS classes and applies a standard style reset, so fonts, headings, and form fields render the way they would in a real website.
- Off: the preview uses completely raw, un-reset browser styling. Turn this off only if you're intentionally testing how your component looks without any style reset applied.
Most users should leave this On. Your choice is remembered across sessions.