The editor

Code on the left, your project running on the right. It saves as you type.

Starting a project

From scratch: on My projects, type a name and press New website (HTML, CSS and JavaScript) or New Python program.
From the Library: open any project in the Remix Library and press Remix this.
From someone's project: on a published project's code page, press Remix.

Files

Your files are tabs across the top of the code. A website starts with index.html, style.css and script.js. A Python program starts with main.py.

Add a file: press +, type a name, press Enter. Website files must end in .html, .css or .js; Python files in .py.
Delete a file: press the × on its tab, then Delete? to confirm. The main file (index.html or main.py) can't be deleted.
Link files together: in HTML, use <link rel="stylesheet" href="style.css"> and <script src="game.js"></script> like on any website. In Python, import helpers loads helpers.py.

The preview

For websites, the preview updates about half a second after you stop typing. Click inside it to use the keyboard in your game. ↻ Restart (or Ctrl + Enter) reloads it from the beginning, which is handy after a game over. ⛶ Full screen fills the screen with just the preview, for playing properly. Press Esc to come back.

Saving with localStorage works in the preview (high scores, saved drawings). It's kept per project, in your browser.

Layout and full screen

The three buttons at the top right switch what you see:

Code only: the whole width for your code. The preview keeps running out of sight.
Code and preview: side by side (stacked on a phone). Drag the bar between them to give either side more room; double-click it to split evenly again.
Preview only: just your project, or just the output for Python.

The ⛶ button (or Ctrl + Shift + F) puts the whole editor in full screen, with the site's menu out of the way. Press Esc or the button again to leave.

Editor settings

Press Aa in the top bar:

Theme: light or dark code.
Text size: bigger for a projector or tired eyes, smaller to fit more on screen.
Wrap long lines: off means long lines run off to the side and you scroll across, like most code editors.
Update the preview as I type (websites): turn it off when your project is slow to restart or you're mid-way through a big change. A ▶ Run button appears, and the preview only updates when you press it or Ctrl + Enter.

Settings and layout are remembered in your browser, so a shared Chromebook keeps whatever the last person picked.

The console

Press Console above the preview to see what your code prints with console.log(). When something breaks, the console opens by itself, shows the error in red, and tells you the file and line:

Uncaught ReferenceError: bst is not defined (game.js line 13)

That's your first clue: go to that line and look for a typo.

Saving

Everything saves automatically. The top bar shows Saved · edited 2 minutes ago. If it says Couldn't save, check your internet connection. Your changes are still in the editor, so don't close the tab yet.

Keyboard shortcuts

Keys	What it does
`Ctrl` + `S`	Save now and refresh the preview
`Ctrl` + `Enter`	Run a Python program, or restart a website's preview. In the publish box, it publishes.
`Ctrl` + `F`	Find (and replace) in the current file
`Ctrl` + `Z` / `Ctrl` + `Y`	Undo / redo. Each file remembers its own history.
`Tab` / `Shift` + `Tab`	Indent / un-indent the selected lines
`Ctrl` + `/`	Comment out the selected lines
`Ctrl` + `D`	Also select the next match of the selected word, to edit both at once
`Alt` + `↑` / `↓`	Move the current line up or down
`Ctrl` + `Shift` + `F`	Full screen on and off
`Esc`	Close the Publish, History or settings box; leave full screen

On a Mac, use ⌘ instead of Ctrl.

When your code won't work

Open the Console and read the error. It names the file and line.
Check spelling. getElementByID and getElementById are different to the computer.
Check pairs: every ( { [ and quote needs a partner.
Undo back to when it worked (Ctrl + Z), or restore an older version from History.