# 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 `.html` file
- 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.html
```

Some JavaScript features (like `fetch`, ES modules, and CORS) won't work with `file://` URLs. Use the Play button instead for full compatibility.