Embed Live Code Editor in your Website

01 Quick start

Paste one iframe

This is the whole setup. Monaco (VS Code’s editor), file tabs, a sandboxed live preview and a console — all in one frame.

index.html

<iframe src="https://xcodx.io/playground/lite.html"
        width="100%" height="560" loading="lazy"
        allow="clipboard-write" title="XCODX Code Editor"></iframe>

Plain HTML / CSS / JS runs instantly with no network. React, Vue, Svelte, TypeScript and bare npm imports compile in the reader’s browser — the same engine the full IDE uses.

02 Resizable

Let readers resize it

Wrap the iframe in a resize:both box. Because the box has a real width plus max-width:100%, readers can drag its bottom-right corner in both directions — wider and taller.

resizable.html

<!-- explicit width + max-width:100%  =>  drag resizes BOTH ways -->
<div style="resize:both;overflow:hidden;
            width:760px;max-width:100%;height:560px;
            min-width:320px;min-height:320px;
            border:1px solid #1a2030;border-radius:12px">
  <iframe src="https://xcodx.io/playground/lite.html"
          style="width:100%;height:100%;border:0;display:block"
          allow="clipboard-write" loading="lazy" title="XCODX Editor"></iframe>
</div>

Why an explicit width? A box pinned to width:100% has no room to grow sideways, so it resizes only vertically — the usual “it only enlarges down” surprise. Give it a real width (e.g. 760px) with max-width:100% and the corner drags both ways while never overflowing on mobile. The editor re-flows automatically, switching to a compact Code / Preview / Console view when it gets narrow.

03 Live example

Try it right here

A real embed of the editor, in a resizable box. Grab the bottom-right corner and drag.

↘ Drag the corner · edit the code · press Run · then Open in Full XCODX Studio.

04 Preload code

Open on your own code

Pass a project in the URL hash as base64 JSON — ideal for a tutorial that opens on the exact snippet you’re teaching.

preload.html

<script>
  const project = {
    title: "Counter", entry: "index.html",
    files: {
      "index.html": "<button id=x>0</button><script src=app.js><\/script>",
      "app.js": "let n=0;x.onclick=()=>x.textContent=++n"
    }
  };
  // UTF-8-safe base64 — the same payload the editor's #share= accepts
  const hash = btoa(unescape(encodeURIComponent(JSON.stringify(project))));
  const src  = "https://xcodx.io/playground/lite.html?layout=split#project=" + hash;
  document.write('<iframe src="' + src + '" width="100%" height="560" loading="lazy"></iframe>');
</script>

files can be an object ({ name: content }) or an array of { name, content }. entry is the HTML document to preview.

05 Parameters

URL parameters

Append these to the src to tune the embed.

Parameter	Values	What it does
`layout`	`split` · `preview` · `editor`	Editor + preview side by side (default), preview only, or editor only.
`console`	`0`	Hide the console panel.
`autorun`	`0`	Wait for the reader to press Run instead of running on view.
`title`	text	Label shown in the editor’s title bar.
`allow`	origin(s)	Restrict `postMessage` loads to these origins (comma-separated). See Security.
`#project`	base64 JSON	Preload files (see above). Goes in the hash, not the query.

06 postMessage

Drive it from your page

Already have the iframe on the page? Swap the project at any time with postMessage — perfect for a “pick an example” switcher.

switcher.js

const frame = document.querySelector("iframe");

// wait for the editor, then push — no race, no timers
window.addEventListener("message", function (e) {
  if (e.data && e.data.type === "xcodx-embed:ready") {
    frame.contentWindow.postMessage({
      type: "xcodx-embed:load",
      project: { entry: "index.html", files: { "index.html": "<h1>Swapped!</h1>" } }
    }, "*");
  }
});

The frame posts { type: "xcodx-embed:ready" } as soon as the editor mounts, so you can push with no timers. A project posted before that is queued and applied on load — so waiting is optional either way.

07 Security

Secure by default

The editor is built to be safe to drop onto any page. Here is the hardened iframe and exactly what protects your site and your readers — zero setup on your end.

hardened.html

<iframe src="https://xcodx.io/playground/lite.html"
        width="100%" height="560" loading="lazy"
        title="XCODX Code Editor"
        referrerpolicy="strict-origin-when-cross-origin"
        allow="clipboard-write"
        sandbox="allow-scripts allow-same-origin allow-popups
                 allow-popups-to-escape-sandbox allow-forms allow-modals"></iframe>

S1

Sandboxed by design

Code runs in an isolated frame. It can’t read your page’s DOM, cookies or storage, or navigate your site.

S2

Nothing is uploaded

Previews render in the reader’s browser. No code leaves the device to run a preview.

S3

No credentials

The frame carries no cookies to your site and asks for none. No signup, no API key, no tracking.

S4

HTTPS-only embedding

frame-ancestors 'self' https: — only secure pages can frame it. No allowlist to manage.

S5

CSP-hardened

The editor ships a strict Content-Security-Policy; scripts are pinned to known origins.

S6

Always current

The frame fetches the live build itself, so security fixes reach your embed with no action from you.

Every sandbox token above is the minimum the editor needs: allow-scripts runs the code, allow-same-origin lets the frame load its own runtime, allow-popups + allow-popups-to-escape-sandbox open the “Open in Full Studio” hand-off in a new tab, and allow-forms + allow-modals let the preview use forms and alert/confirm. referrerpolicy means the editor only ever sees your origin, never full URLs.

Lock the sender. Add ?allow=https://your-site.com (comma-separate for several) and the frame accepts postMessage project loads only from those origins. It’s opt-in: without it, loads are accepted from any parent, exactly as before — so adding it can only tighten, never break.

08 Hand-off

The hand-off to the full IDE

Every embed shows a one-click Open in Full XCODX Studio button. When a reader clicks it, their current files — including their edits — open at xcodx.io/editor with nothing lost.

Always on. The button can’t be turned off or repointed by the host page — that free hand-off is what makes the editor free to embed. It’s the only “catch,” and it’s a good one for your readers: a full IDE, one click away.

09 Good to know

Questions, answered

The short version of everything above.

Which frameworks run inline?

Plain HTML / CSS / JS runs instantly with no network. React (JSX/TSX), Vue SFCs, Svelte, TypeScript, SCSS/Less and bare npm imports compile in the reader’s browser. Very large multi-file apps and full Angular workspaces are the full IDE’s job — which is exactly what the hand-off is for.

Does my readers’ code get uploaded?

No. Previews render in the reader’s browser inside a sandboxed frame; nothing is uploaded to run a preview.

Will my snippet go stale?

No. The frame loads the current editor build itself from the manifest, so improvements and security fixes reach your embed automatically.

Any allowlist or setup on your side?

None. frame-ancestors 'self' https: lets any secure page embed it — no request, no key, no configuration.

Prefer a script over an iframe?

There’s an inline component that runs code right in the page flow — see the playground README.

Get started

Add a live editor in one line

Copy the iframe, paste it into your page, and ship. It works on any HTTPS site — free, no signup, no key.

Get the snippet → Open the editor

Embed Live Code editor on your website

Paste one iframe

Let readers resize it

Try it right here

Open on your own code

URL parameters

Drive it from your page

Secure by default

Sandboxed by design

Nothing is uploaded

No credentials

HTTPS-only embedding

CSP-hardened

Always current

The hand-off to the full IDE

Questions, answered

Which frameworks run inline?

Does my readers’ code get uploaded?

Will my snippet go stale?

Any allowlist or setup on your side?

Prefer a script over an iframe?

Add a live editor in one line