Live Preview
Preview your HTML, CSS, and JavaScript projects directly inside the app — no setup required.
Getting Started
Open a Project
Open a folder that contains an .html file (like index.html).
Start the Preview
A Play button will appear in the top-right corner of the title bar, near the Settings icon. Click it to start the preview.
View Your Page
The app will automatically switch to the Preview panel and load your page. Your HTML page is now running on a local server.
Live Reload
When the preview is running, any changes you make to your files will automatically refresh the preview:
| Change Type | Behavior |
|---|---|
| CSS changes | Styles update instantly without reloading the page |
| HTML / JS changes | The page reloads automatically |
You don't need to manually refresh. Just save your file and the preview updates.
Stopping the Preview
When the server is running, the Play button turns into a green Stop button with the port number displayed (e.g., :8080).
Click the Stop button to shut down the preview server.
Multiple Projects
If you have multiple workspaces open, each one gets its own preview server on a different port. You can run previews for multiple projects at the same time.
When Does the Play Button Appear?
The Play button only shows up for plain HTML/CSS/JS projects. It will appear when:
- Your project folder has at least one
.htmlfile - Your project does not contain framework or compiled language files (like
.ts,.tsx,.py,.rs,.go,.java, etc.)
For framework-based projects (React, Next.js, Vue, etc.), use npm run dev in the terminal instead and point the Preview to localhost:3000 (or whatever port your framework uses).
Opening Local HTML Files Directly
You can also open any HTML file directly by typing a file:// path in the Preview URL bar:
file:///Users/yourname/projects/my-page/index.htmlSome JavaScript features (like fetch, ES modules, and CORS) won't work with file:// URLs. Use the Play button instead for full compatibility.