Spaces Previewing Your Project

The preview panel shows your project running live, replacing the old habit of saving a file and refreshing a browser tab to see what changed.

What The Preview Shows

Alongside the editor, a Space shows a live preview: an embedded view that renders your HTML, CSS, and JavaScript exactly as a browser would, updating as you edit.

  • Reflects the current state of your code, not a saved or published version
  • Updates automatically as you type, without a manual refresh
  • Runs your JavaScript too, so interactive behavior is visible, not just layout and styling

From Manual Refresh To Instant Feedback

Working locally usually means a loop of: edit a file, switch to the browser, refresh, look, switch back. The preview in Spaces collapses that loop - there's no file to save and no tab to refresh, so the gap between making a change and seeing its effect nearly disappears.

StepWorking LocallyWorking In Spaces
Save your changeExplicit save actionNot needed
See the resultSwitch tabs, refreshPreview updates in place
Notice a mistakeAfter the next refreshAlmost immediately
Note: Keep the editor and the preview visible at the same time if you can - watching the preview change as you type is the fastest way to learn what each line of code actually does.

The preview only reflects what's actually inside your Space's files. If something doesn't show up, double check the code itself rather than assuming there's a delay - the update is usually near-instant.

  • Blank or unexpected preview: check for a typo or a missing closing tag first
  • JavaScript not running: check the browser's console for an error, the same as you would locally
  • Change not visible: confirm you edited the file that's actually being shown

This tight edit-then-see loop is one of the main reasons Spaces feels fast for small projects - most of the usual waiting between a change and its result is simply gone.

Exercise: Spaces Editing

What does editing a Space typically involve?