Find your way around the editor

Three columns

When your project opens you see the editor. On a computer it has three columns; on a phone the bottom bar switches between Project, Code, Preview and Assistant.

The top bar

• The back arrow returns to your projects list.
• Next to it is your project name. Click it to rename. You can also rename or delete a project from its card on the home page.
• Save saves your open files. When you have unsaved changes, a count appears.
• Deploy publishes your app. We use it in lesson 5.
• More actions (the three dots) has Export as zip, Publish as a template and Rebuild the preview.

The left column

Three tabs: Files, History and Customise. Customise only appears on projects that came from a template, like yours.

In Files:

1. Open the folder tree. Find src/App.jsx and index.html. Click a file to open it in the middle.
2. Use New file and New folder (names can contain a slash for folders). Hover a file to see rename and delete buttons.
3. Notice a Locked tag on files under src/core. This template protects the files that make it work.

The middle: code

Files open as tabs. A dot on a tab means unsaved changes. Edit something small, for example change a word in the page text, and watch:

• The dot appears on the tab and Save shows a count.
• The Preview on the right updates with your unsaved edit. Preview shows what is on screen.
• Press Ctrl+S (Cmd+S on a Mac) to save the file, or choose Save.

Closing a tab with unsaved changes asks first. Leaving the page with unsaved edits triggers a browser warning.

At the bottom, Problems lists errors and warnings from the preview with a count. Open it and choose an entry to jump to the line.

Locked files

Click a locked file. A banner says "This file is locked by the template. You can read it but not change it." You can choose Unlock for editing and a confirmation warns that parts of the template may stop working, and that your earlier versions stay in History. A lock-again button on the file puts it back. Leave them locked unless you have a reason to change them.

The right: preview and assistant

The Preview is your site as it stands. Use the device buttons and Rebuild the preview if it gets stuck. Underneath, the Assistant takes requests in plain words. That is lesson 4.

When a file changed somewhere else

If a file changes under you (for example the assistant edited it while you had it open), saving shows "This file changed somewhere else". Choose Keep my version to replace it, or Use the newer version to load it and lose your edits to that file.

Try it yourself

1. Open index.html and change the page title. Save with Ctrl+S.
2. Create a new file notes.txt and delete it again.
3. Rename your project from the top bar.

Recap

• The top bar has Save, Deploy and More actions.
• Left: Files, History, Customise. Middle: code tabs. Right: Preview and Assistant.
• Locked files are protected by the template; unlocking is possible but risky.
• Preview includes your unsaved edits.