Projects can be started directly from the editor. The launch process consists on running the command dev using the project's selected package manager (npm, yarn, bun or pnpm).

By default, projects are based on Next.JS and the dev command will start a new server that the editor will reach to display the project in the preview panel using an iFrame.

In other words, the editor will run the project in development mode and display it in the preview panel.

To start the project, just click the start buttonlocated in the toolbar of the editor's preview panel.

In case of a first launch, the process can take a few seconds to start the server until the the project is displayed in the panel.

Each time the project is played, the editor will update the assets located in the public folder of the project. If new assets were added to the project (especially images), this can take few seconds too to generate all new necessary files before the project can be played.

To stop the project and get back to the edit mode, just click the stop buttonlocated in the toolbar of the editor's preview panel.

Note that when stopping the project, the server is still running in background to avoid the next launch to take time to start.

Sometimes, it's useful to refresh the project that is running instead of stopping it and starting it again. This allows to bypass the export process or the editor. Just click the refresh buttonlocated in the toolbar of the editor's preview panel.