Overview

The editor is the screen that opens when you open a project. It’s where you talk to the agent, watch your app being built live, fine-tune it and publish it. It has three areas: a bar at the top, a panel on the left (the chat with the agent or Design mode) and, on the right, the preview of your app with its tabs.

The top bar

From left to right:

Item	What it does
Hide panel / Show panel	Collapses or reopens the left panel to give the preview the full width. If the agent is working while the panel is collapsed, a turquoise dot blinks on the button. Your choice is remembered between visits.
Project name	The name shown on your dashboard. Change it in the project settings.
Version badge (v12)	Opens the version History: you can view an older version and restore it. See Versions and history.
Preview · Code · Images · Changes	The four tabs of the right side (detailed below). On a small screen, only the icons are shown.
Download the code (.zip)	Downloads all the code of the version on screen. See The code.
Project settings (settings icon)	Name, instructions for the agent, publishing, backend, connectors, secrets and deletion. See Project settings.
Publish	Puts your app online. The button tells you where you stand: Publish (never published), Publishing… (in progress), Update (a newer version than the live one exists) or Published (the live version is the latest). See Publish your app.

The left panel: Chat, Design (and Kameleoon)

A switch at the top of the panel picks what it shows:

• Chat: the conversation with the agent. You describe what you want, it changes your app and you follow each step of its work. This is the default mode. See Chatting with the agent.
• Design (with the Free badge): you edit text, colors, fonts and spacing yourself, without the agent and without spending credits. See Design mode.
• Kameleoon: only shows up when your Kameleoon account is connected and the project is linked to a Kameleoon site. You manage your experiments and goals there. See The Kameleoon panel.

Good to know:

• The chat stays loaded when you switch to Design: whatever you were typing is kept.
• When the agent starts, the editor switches back to the chat on its own so you can follow its work. If you’re looking at another mode while it works, an animated dot shows on Chat.
• You can widen or narrow the panel by dragging the divider between the panel and the preview.

The right side: the preview and the tabs

Preview

Your live app, updated while the agent writes the code. Screen sizes, address bar, server logs and an error banner with Fix. Learn more.

Code

Your app’s code in a real editor (Monaco, the one behind VS Code): read, edit, create files, save. Learn more.

Images

The project’s image library: upload your logo and photos, rename them, attach them to the chat. Learn more.

Changes

What each version changed, file by file, line by line. Learn more.

Switching tabs reloads neither the preview nor the code editor: each tab is just as you left it.

A typical round trip

1. Describe your idea in the chat, for example:

   A website for a yoga studio in Lyon, with the class schedule and a booking form.

2. Watch the app being built in the preview. On the very first generation, a “Highwind is building your app” screen lists the files being written, then the app appears as soon as the page is ready.

3. Refine it by chatting: “use warmer colors”, “add a pricing page”… To target a specific element, use Select an element in the chat’s + menu.

4. Fine-tune the details yourself by switching to Design: a heading, a color, a font. It’s free.

5. Publish with the Publish button at the top right, then Update for each new version you want to put online.

The guided tour

The first time you open a project that already has a version (and once the agent has finished working), a short four-step tour shows you the essentials:

1. Ask for what you want: the chat input.
2. Edit without the agent: the switch to Design mode.
3. The code is yours: the Code, Images and Changes tabs.
4. Publish in one click: the Publish button.

Move on with Next, finish with Let’s go, or leave at any time with Skip the tour (or Esc). The tour only shows once per account.

Tip

If you leave the editor with unsaved code changes, your browser asks you to confirm, so you don’t lose anything by accident. Design mode edits, on the other hand, are saved as you go.

See also

Chatting with the agentAsk, follow, stop, attach images.

Design modeEdit without the agent, for free.

Versions and historyGo back at any time.

Build your first appFrom the first request to a published app.