Tutorials

Editor and Preview Tutorial

Build a file editor with command execution and live preview.

Workspace shape

A useful browser IDE has a file tree, editor, terminal, preview iframe, and a runtime container that stays in sync with edited files.

The public root API exposes filesystem writes, command execution, server lifecycle events, and preview helpers.

  • Keep file state in the host UI.
  • Mirror files into the runtime filesystem through container.fs.
  • Run commands through the public spawn API.
  • Drive preview iframes from server-ready or port events.

Production security

If users can edit arbitrary code, move execution into a cross-origin sandbox. Keep the editor host and runtime host on separate origins.

Note

Same-origin previews are appropriate for trusted demos. Cross-origin sandboxing is the default for untrusted code.