Spaces The Code Editor

The code editor is where you write your project's HTML, CSS, and JavaScript, and it updates the live preview automatically as you type.

Writing Code In The Browser

The editor is the main workspace inside a Space. It behaves like a lightweight code editor - you type your HTML, CSS, and JavaScript into it, and it keeps track of your project's files as you build it out.

  • Syntax highlighting to make code easier to read
  • Separate areas or files for HTML, CSS, and JavaScript, depending on the project type
  • Standard editing behavior you'd expect from any text editor - typing, selecting, undo/redo

Live Reloading As You Type

The defining feature of the editor is that it doesn't wait for you to explicitly save or run anything. As you type, the connected preview picks up your changes and re-renders, so you can see the effect of a change almost as soon as you make it.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    background-color: lightyellow;
  }
  h1 {
    color: teal;
  }
</style>
</head>
<body>

<h1>Hello from my Space</h1>
<p>Try changing the background-color above and watch the preview update.</p>

</body>
</html>
Note: Because changes appear so quickly, it's easy to experiment - change one value, glance at the preview, change it again. Small, frequent edits are a natural way to work in this kind of editor.
Local Editor + ServerSpaces Editor
Edit file, save itEdit file, nothing to save
Switch to browser, refreshPreview updates on its own
Requires a local server runningPreview is already connected
  • Keep an eye on the preview panel while you type to catch mistakes early
  • Break larger changes into smaller ones so it's easier to tell what caused a visual change
  • Use undo if a change breaks something and you want to step back quickly

Beyond typing code, the editor is really the whole workflow: write, glance at the preview, adjust, repeat - without any separate build or refresh step interrupting that loop.