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

# Deploy & Preview

> See your project live and publish it to the world

HelloLeo makes it easy to see your project in action and publish it when you're ready.

## Live Preview

Every project has a **live preview** that updates automatically as Leo makes changes. You can:

* **See changes instantly** - Watch your project update in real-time
* **Test functionality** - Interact with your app before publishing
* **Mobile preview** - Toggle mobile view to see how it looks on different devices
* **Open in new tab** - View your preview in a full browser window

## Publishing Your Project

When you're ready to make your project live:

1. **Click "Publish"** in the top-right corner of your project
2. The **Publish Modal** opens with all your deployment options
3. **Configure your URL** - Choose a custom subdomain or use the default
4. **Click "Publish"** or **"Update Published Version"**
5. **Share your live URL** - Copy and share with others

### The Publish Modal

The Publish Modal gives you full control over your deployment:

* **Live URL display** - See your current live URL at a glance
* **Copy URL** - One-click copy to clipboard
* **Custom subdomain** - Change your HelloLeo subdomain anytime
* **Custom domain** - Connect your own domain (Pro feature)
* **HelloLeo watermark** - Toggle the "Built with HelloLeo" badge (Pro feature)

<Note>
  Private projects show "This project is private" in the Publish Modal. Click **Publish** to make them public and deploy.
</Note>

## Deployment Options

### Default Deployment

* Automatic subdomain: `your-project-name.helloleo.app`
* Instant deployment
* No configuration needed

### Custom Subdomain

* Choose your own subdomain: `myproject.helloleo.app`
* Must be unique and available
* Follows subdomain naming rules (lowercase, numbers, hyphens)
* Change it anytime from the Publish Modal

### Custom Domain

* Use your own domain: `app.yourdomain.com`
* Requires DNS configuration (CNAME to `custom.helloleo.app`)
* Available on Pro plan
* See [Custom Domains](/features/custom-domains) for setup instructions

## Preview Features

<CardGroup cols={2}>
  <Card title="Mobile View" icon="mobile">
    Toggle mobile preview to see how your app looks on phones and tablets
  </Card>

  <Card title="Reload Preview" icon="refresh">
    Refresh the preview if something doesn't look right
  </Card>

  <Card title="Network Monitor" icon="activity" href="/features/network-monitor">
    Debug API calls and see what's happening behind the scenes
  </Card>

  <Card title="Code Editor" icon="code" href="/features/code-editor">
    Make manual edits when needed
  </Card>
</CardGroup>

## Deployment Status

Your project can have different deployment statuses:

* **Not Published** - Project exists but hasn't been published yet
* **Private** - Project is private; publish to make it public
* **Publishing** - Leo is building and deploying your project
* **Published** - Your project is live and accessible
* **Error** - Something went wrong; check the error message

## Publishing Private Projects

If your project is set to **Private**:

1. Open the **Publish Modal**
2. You'll see "This project is private"
3. Click **Publish** to make it public and deploy
4. Your project is now live and accessible to everyone

To keep a project private, don't publish it or toggle it back to private in Project Settings.

## Troubleshooting Deployment

If deployment fails:

1. **Check the error message** - The Publish Modal will display what went wrong
2. **Review your code** - Use the code editor to check for issues
3. **Try again** - Often a simple retry fixes temporary issues
4. **Get help** - Join our [Discord](https://discord.gg/RBJnhMa8p6) for support

## Next Steps

<CardGroup cols={2}>
  <Card title="Custom Domains" icon="globe" href="/features/custom-domains">
    Use your own domain
  </Card>

  <Card title="Private Projects" icon="lock" href="/features/private-projects">
    Control project visibility
  </Card>

  <Card title="Project Settings" icon="settings" href="/features/project-settings">
    Configure your project
  </Card>
</CardGroup>