# Local preview

Local preview lets you see sections, headers, and footers in real-time, without deploying them to the server.

### Starting the local preview server

To start the local preview server, run the following command:

```bash
npx @lightspeed/crane@latest preview
```

This will start a Vite dev server, which is responsible for displaying sections, headers, and footers. The URL where resources are available is printed in the terminal logs. Open it in a browser, and you will see all the available resources with their corresponding showcases.

#### Verbose mode

To enable debug logging, use the `--verbose` flag:

```bash
npx @lightspeed/crane@latest preview --verbose
```

This enables additional debug logs that can help troubleshoot issues during local development.

### Hot Reload

The local preview server picks up any changes you make to your sections, headers and footers. It will automatically rebuild the necessary resources and refresh the page. You will see your changes are reflected in real time without any manual rebuilds or refreshes.

### Stop the local preview server

Once you are done with the development of sections, headers and footers, you can stop the local preview server by pressing `Ctrl+C` in the terminal where it is running.

### Preview with browser extension

The Chrome browser extension called [Crane Dev Tools](https://chromewebstore.google.com/detail/crane-devtools/dlfmlicbfjebcgpboleillocookdkifo), developed by Lightspeed, lets you preview your local Crane theme in the Instant Site Editor without deployment or starting a local preview server.

By connecting to your local server, the extension renders your local theme directly in the Instant Site Editor, allowing you to test theme code, adjust settings, and review changes immediately using real site data.

To preview your local Crane theme in the Instant Site Editor, follow these steps:

1. Install [Crane Dev Tools](https://chromewebstore.google.com/detail/crane-devtools/dlfmlicbfjebcgpboleillocookdkifo) by Lightspeed from the Chrome Web Store.
2. Deploy your section once to register it in Instant Site.
3. Start your local Crane development server.
4. Open your theme in the Instant Site Editor.
5. Turn on the [Crane Dev Tools](https://chromewebstore.google.com/detail/crane-devtools/dlfmlicbfjebcgpboleillocookdkifo) extension.
6. Select the section or sections you want to preview.
7. Edit your code locally and see changes live in the Instant Site Editor.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ecwid.com/site-themes/develop-site-themes/local-preview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.