Live Preview
Reloading the preview
If the preview ever looks stuck, click the reload icon (⟳) in the top-right of the Live Visualizer panel to refresh it.
Click-to-code navigation
Click anywhere inside the preview and the 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.
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 the next time you use that view.
Tailwind CSS toggle
If your component uses Tailwind CSS classes (or is simply designed assuming a standard browser reset), the Tailwind toggle next to the "Live Visualizer" title 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.