Skip to content

embedding.md

Latest commit

 

History

History
53 lines (40 loc) · 2.19 KB

embedding.md

File metadata and controls

53 lines (40 loc) · 2.19 KB
Raw

Embedding BrowserCode

BrowserCode runs entirely in the browser. An embed is our page inside your iframe.

<iframe
	src="https://browsercode.io/embed?repo=github.com/sveltejs/kit&view=preview"
	allow="cross-origin-isolated"
	style="width: 100%; height: 600px; border: 0"
></iframe>

Required headers

BrowserPod needs SharedArrayBuffer, which browsers expose only on cross-origin isolated pages. Isolation is inherited from the top-level document, so the embedding page must send both headers itself:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

The iframe must carry allow="cross-origin-isolated". Without all three the embed reports that the headers are missing.

require-corp blocks cross-origin resources on your page that do not send Cross-Origin-Resource-Policy or use CORS.

Parameters

Parameter Value
repo Any GitHub URL or owner/repo, optionally .../tree/<ref>/<dir>
framework A template id (vite, react, svelte, vue, nextjs, nuxt, express)
agent A CLI agent id (claude, codex)
view Comma separated: files, search, editor, terminal, preview

Behaviour

  • Pass one of agent, repo or framework. With none, the default template boots.
  • view defaults to every pane.
  • Agents are terminal first, so view only decides whether the preview pane comes with it.
  • One agent session per browser. A second embed of the same agent, or the same agent open in another tab, shows the duplicate session dialog.
  • codex asks for an OpenAI API key inside the frame.
  • claude opens a new tab for OAuth sign-in.
  • Controls without meaning are omitted: a preview-only embed has no hide button and no port badge.

Examples

/embed?repo=https://github.com/user/repo/tree/main/examples/demo
/embed?framework=vite&view=preview
/embed?framework=nextjs&view=files,editor,terminal
/embed?agent=claude
/embed?agent=codex&view=terminal