Tour the Studio editor

Open any project from Your projects and you land in the editor. On a computer it has three columns; on a phone, use the bottom bar (Project, Code, Preview, Assistant) to switch.

The top bar

• The back arrow returns to your projects.
• Your project's name: click it to rename.
• Save saves open files. A count of unsaved files appears beside it.
• Deploy publishes your app. See Deploy your app.
• More actions (the three dots): Export as zip, Publish as a template and Rebuild the preview.

Left: Files, History, Customise

• Files is the project tree. Use the file and folder buttons for New file and New folder (names can include / for folders). On a file, use the pencil to rename and the bin to delete.
• History holds save points. See History and save points.
• Customise only appears on projects that came from a template.

Files the template protects show a Locked tag. See below.

Middle: the code editor

Click a file to open it in a tab. A dot on a tab means unsaved changes. Press Ctrl+S (Cmd+S on a Mac) to save the current file. Closing a tab with unsaved changes asks first. Pictures show as an image preview, and other binary files cannot be edited as text.

At the bottom, Problems lists errors and warnings from the preview; choose one to jump to the line.

Right: Preview and Assistant

The Preview shows your app as it stands, including unsaved edits. Switch Phone size, Tablet size or Desktop size, or choose Rebuild the preview if it looks stuck. Below it, the Assistant takes your requests. See Describe your app.

Locked files

Templates can lock files that make them work. A locked file opens read-only with the banner "This file is locked by the template. You can read it but not change it." Choose Unlock for editing if you really need to; the warning explains parts of the template may stop working, and your earlier versions stay in History. A lock-again button puts the lock back.

Good to know

• If a file was changed somewhere else, for example by the assistant, saving shows "This file changed somewhere else". Choose Keep my version or Use the newer version.
• Leaving the page with unsaved edits triggers a browser warning.
• Deleted files can be recovered from History.