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:

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:

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, 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 DevTools 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 DevTools 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.