Code Editor guide

Getting started with Code Editor

Code Editor is a code editor for the files in your Files. It edits JavaScript, TypeScript, HTML, CSS, JSON, Markdown, Python and plain text, and runs HTML and JavaScript in a sandboxed preview. Nothing is uploaded.

Open Code Editor

Make or open a file

The Explorer shows your Files folders and files. The File and Folder buttons make new items in the selected folder. Right-click a row for Rename, Move to…, Copy path and Delete. Delete moves it to the Files Trash.

1. Click New file… (or New at the top).
2. Pick a Type, such as HTML. It sets the extension and the highlighting.
3. Type a Name and click Create. The file is made in Files and opens in a tab.
4. To edit a file you already have, click Open from Files…, or click it in the Explorer on the left.

Edit and save

The editor has line numbers, folding, bracket matching, search and replace, and several cursors (Ctrl+click adds one). Press Ctrl+Space for completion and snippets. Enter or Tab accepts.

Your edits are kept as a draft on this device until you save. A dot marks a tab with unsaved changes.

1. Press Ctrl+S, or click Save, to write the file back to the same Files file.
2. Click Save as to save a copy in a folder you pick.

Run a page

The preview has no network access. CSS, scripts and pictures that the page links by a relative path are taken from the same Files folder.

1. Open an HTML or JavaScript file.
2. Click Run, or press Ctrl+Enter.
3. The Preview opens on the right. Console messages and errors show under it. Click Close to hide it.

Extensions and other files

The Extensions panel has built-in helpers you can turn on and off: Formatter (Format document), Language mode switcher, and Snippets. Nothing is downloaded.

A Markdown file has a Preview button that shows it rendered. Pictures, audio, video and PDFs open in a view tab, which is read only.

Tip: Ctrl+B shows or hides the sidebar. Click Commands to search every command.

Keyboard shortcuts