The code

Your app is made of standard code: React, TypeScript, Vite and Tailwind CSS. You never need to touch it, but it’s there, readable and editable, in the Code tab. It belongs to you: you can download it at any time.

The code editor

Click the Code tab at the top of the editor. The first time, “Loading the editor…” shows for a moment: it’s Monaco, the editor behind VS Code, with syntax highlighting, search and the usual shortcuts.

The tab has three parts:

• on the left, the tree of project files (collapsible folders);
• at the top, the tabs of open files, and below them the path of the file on screen;
• in the middle, the file itself.

What’s where

Path	Contents
src/App.tsx	The app’s entry point (the file opened by default).
src/pages/	The app’s pages, one per screen.
src/components/	Reusable pieces of interface (header, cards, forms…).
src/index.css	The theme: colors by role and fonts (what Design mode’s Theme tab adjusts).
public/	Files served as is, including the project images (public/assets/).
worker/index.ts	The app server (/api routes), only if your app has one. See The app server.

Open files: tabs

• A single click on a file opens it in a temporary tab, with its name in italics: the next file you open replaces it. Handy for browsing the project without piling up tabs.
• A double click (on the file or on its tab) pins the tab: it stays open. A file you edit is pinned automatically.
• Close a tab with its cross, or with a middle click.
• A file that’s changed and not yet saved shows a dot on its tab and in the tree.

Open tabs are remembered for each project, between visits (in this browser).

Images (PNG, JPEG, WebP…) show as a preview instead of their binary content, with the URL the site shows them at. SVG files, which are text, open in the editor.

Create, rename and delete files

1. Create: click New file at the top of the tree, type the full path (for example src/components/Footer.tsx) and press Enter. Missing folders are created with the file. Esc cancels.
2. Rename or move: hover a file in the tree and click the pencil (Rename). Edit the path (you can change folders) and confirm with Enter.
3. Delete: hover the file and click the bin (Delete). The file shows struck through, marked “Deleted when you save”; Restore cancels the deletion.

These operations, like your text edits, only apply when you save. If the path isn’t accepted, a message says so: “Invalid path (e.g. src/components/Footer.tsx)” or “This file already exists”. Automatically managed folders (node_modules, dist, .git, .highwind) and the .env.local file can’t be changed.

Note

Images aren’t renamed here: use the Images tab, which also updates the site code that references them. See Project images.

Save or discard

As soon as you change something, the bar above the file shows the number of changes (“2 changes”) and two buttons:

• Save (or Ctrl + S, Cmd + S on a Mac): saves all files changed, created, renamed or deleted at once, and creates a new version. A message confirms it in the chat: “Manual changes saved (version N): …”. The preview updates.
• Discard: drops all unsaved changes and goes back to the current version’s code.

When there’s nothing to save, the bar reminds you: “Ctrl+S saves a new version”.

Caution

Save before writing to the agent. As long as you have unsaved code changes, you can’t send a message in Building mode: “Save or discard your code changes before sending a message.” This prevents you and the agent from editing the same files at the same time. (In Discussion mode, sending still works: the agent doesn’t change anything.) If you leave the editor with unsaved changes, your browser asks you to confirm.

When the code is read-only

• While the agent is working: the bar shows “The agent is working: read-only”. You can read the code (and watch it change), not edit it.
• On an old version: the bar shows “Version N · read-only”, and the editor reminds you “Older version: restore it to edit it.” See Versions and history.

Download the code

The Download the code (.zip) button (the download icon in the editor’s top bar) downloads all the code of the version on screen: the current version, or the old version you’re viewing. The file is named after your project and the version, for example yoga-studio-v12.zip.

The ZIP contains the app’s source code. It does not contain generated folders (node_modules, dist), nor the files managed by Highwind that hold your keys (project secrets, database access): they never leave Highwind.

Run the app on your computer

You need Node.js installed on your computer.

1. Unzip the file.

2. Open a terminal in the app folder (the one that contains package.json).

3. Install the dependencies:

   npm install

4. Start the development server:

   npm run dev

5. Open the address shown in the terminal (by default http://localhost:5173).

To build the production version (the static files to host), run npm run build: the result is in the dist/ folder.

Note

The site itself starts as is. If your app has a server (worker/ folder) or a backend, those parts depend on configuration and keys managed by Highwind, which aren’t in the ZIP: they won’t work locally without extra setup on your side.

See also

Versions and historyEach save creates a version.

The Changes tabWhat each version changed.

Design modeEdit without writing code.

The app serverYour app's /api routes.