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

# Live Preview

> Preview your applications in real-time with ChatAndBuild's integrated preview system

## Overview

ChatAndBuild's live preview system allows you to see your applications running in real-time as you develop. Whether you're building a React app, a static website, or a full-stack application, the preview updates automatically as you make changes.

## Preview Features

<CardGroup cols={2}>
  <Card title="Hot Reload" icon="bolt">
    Automatic refresh when you save files, showing changes instantly without manual refresh.
  </Card>

  <Card title="Copy URL and Share" icon="server">
    Share your projects with team members and clients
  </Card>

  <Card title="Mobile Preview" icon="mobile">
    Responsive preview with device simulation for mobile and tablet testing.
  </Card>

  <Card title="Screenshot capture" icon="laptop">
    Take screenshots of your application for documentation and sharing
  </Card>
</CardGroup>

## Getting Started

### Opening Preview

* The preview opens automatically when you build your app
* Alternatively, you can click **“Build My App Preview”** in the top-right corner of the **Preview** section.

### Main Preview Window

The preview window includes:

* **Address bar**: Shows current URL which you can copy and share with your friends
* **Refresh button**: Manual refresh if needed
* **Device selector**: Switch between desktop, tablet, and mobile views
* **Zoom controls**: Adjust preview scale
* **Full screen**: Open preview in full browser windowDeveloper Tools

## Live Reload Features

### Automatic Refresh

The preview automatically refreshes when you:

* **Save HTML files**: Instant page reload
* **Update CSS**: Live style injection without reload
* **Modify JavaScript**: Hot module replacement when supported
* **Change configuration**: Restart development server

## <Icon icon="lightbulb" size={20} /> Tips

### Development Workflow

1. **Start with preview**: Open preview before making changes
2. **Make small changes**: Test incrementally for faster feedback
3. **Monitor console**: Watch for errors and warnings
4. **Test responsiveness**: Check different screen sizes
5. **Use browser tools**: Leverage built-in debugging features

## Troubleshooting

### Common Issues

<AccordionGroup>
  <Accordion title="Preview Not Loading">
    <iframe src="https://drive.google.com/file/d/1AtLVc6kb9rC3vkTQZEaCFnF3h8JWbkHn/view?usp=sharing" title="Embedded content" className="w-full h-96 rounded-xl" />
  </Accordion>

  <Accordion title="Changes Not Reflecting">
    **Symptoms**: Code changes don't appear in preview

    **Solutions**:

    * Check if hot reload is enabled
    * Look for compilation errors in terminal
    * Hard refresh the preview (Ctrl+Shift+R) or by clicking "Build My App Preview"
  </Accordion>
</AccordionGroup>

<Note>
  Need help setting up your development environment? Check out our [Code Editor](/docs/workbench/editor) and [Terminal](/docs/workbench/terminal) guides.
</Note>