> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kleap.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Live Preview

> See your app in real-time as you build

The live preview shows your site as it's being built. Every change appears instantly, right inside the Kleap editor.

## How It Works

Kleap builds your site with a real, ephemeral build and renders it live inside the editor. What you see in the preview is exactly what your visitors get once you publish.

* **Updates instantly** when the AI edits your code or you make a change
* **Reflects the real build** — the same output as production, not a mockup
* **Fully interactive** — click, type, and navigate like a live site

Your site is built with **Astro 5** (static HTML), **Tailwind CSS v4**, and **React 19 islands** for interactivity — so the preview is fast and matches the published result.

## Preview Panel

The preview panel on the right side of the editor shows:

* Your rendered site
* Real-time updates as the AI (or you) edit code
* Interactive elements (click, type, navigate)

### Controls

| Control             | Action                               |
| ------------------- | ------------------------------------ |
| **Refresh**         | Reload the preview                   |
| **Open in new tab** | View in full browser window          |
| **Device toggle**   | Switch between desktop/tablet/mobile |
| **URL bar**         | Navigate to different pages          |

## Keeping the Preview Fresh

The preview rebuilds automatically whenever your site changes. If it ever looks out of date:

1. **Send a new message** — any chat interaction rebuilds and refreshes it
2. **Click Refresh** — in the preview panel
3. **Reopen the app** — from your apps list

## Preview vs. Published Site

The preview lives inside the editor and is only visible to you while you work. To get a permanent, public, shareable URL, [publish your app](/features/publishing).

Publishing happens **automatically** after each generation, and you can also publish on demand with the **Publish** button. Your published site lives at:

```
https://your-app.kleap.io
```

<Info>
  Publishing and hosting are free — they don't use credits. Sites are served on a global edge network with automatic HTTPS. For custom domains, see [custom domains](/features/custom-domains).
</Info>

## Testing Your App

### Interactive Testing

In the preview, you can:

* Click buttons and links
* Fill out forms
* Navigate between pages
* Test responsive layouts

### Mobile Testing

Click the device toggle to switch between:

* **Desktop** (1280px+)
* **Tablet** (768px)
* **Mobile** (375px)

### Console Access

Open browser DevTools to see:

* Console logs
* Network requests
* JavaScript errors

## Common Issues

<AccordionGroup>
  <Accordion title="Preview not loading">
    1. Check if you have a stable internet connection
    2. Try refreshing the preview
    3. Send a new message to rebuild the preview
    4. Clear browser cache and reload
  </Accordion>

  <Accordion title="Changes not showing">
    1. Wait a few seconds for the rebuild to finish
    2. Try refreshing the preview
    3. Check for errors in the chat
  </Accordion>

  <Accordion title="Slow preview">
    Large sites or complex operations may take longer. Consider:

    * Breaking changes into smaller steps
    * Optimizing images and assets
    * Removing unused code
  </Accordion>
</AccordionGroup>

## Preview vs Production

| Aspect     | Preview                 | Production                           |
| ---------- | ----------------------- | ------------------------------------ |
| Where      | Inside the editor       | Public URL (`your-app.kleap.io`)     |
| Visibility | Only you, while editing | Public, 24/7                         |
| Purpose    | Build and test          | Live for visitors                    |
| Output     | Real build              | Same build, on a global edge network |

<Card title="Ready to go live?" icon="rocket" href="/features/publishing">
  Publish your app to production
</Card>