Developercodesandbox.io
Can you embed CodeSandbox in an iframe?
Yes, with the embed code from the editor or with an /embed/ URL. Replace /s/ with /embed/ in the sandbox URL to get the embed version.
Checked Test again
Live check
Two links, two results
Sandbox pageEmbeddable
codesandbox.io/p/sandbox/react-new- X-Frame-Options
- Not sent
- CSP frame-ancestors
- Not sent
- Response
- 200 OK · 135 ms · HTTPS
Embed URLEmbeddable
codesandbox.io/embed/new?codemirror=1- X-Frame-Options
- Not sent
- CSP frame-ancestors
- Not sent
- Response
- 200 OK · 162 ms · HTTPS
Steps
How to embed CodeSandbox
- Open the sandbox in the CodeSandbox editor.
- In the editor header, clickEmbed
- Choose the options that you want. Then copy the iframe code.
- Paste the iframe code into the HTML of your page.
- To set the view or the theme, use an /embed/ URL with query parameters.
Embed code
Paste this into your page
HTML
<iframe
src="https://codesandbox.io/embed/{sandbox-id}?view=preview&theme=light"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="{sandbox title}"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts">
</iframe>Set view to editor, split or preview. Set theme to dark or light.
URL patterns
Swap the link you have for the embed URL
- You havehttps://codesandbox.io/s/{sandbox-id}Use in the iframehttps://codesandbox.io/embed/{sandbox-id}
Replace /s/ with /embed/ in the sandbox URL.
Good to know
- Add codemirror=1 to make the embed much smaller.
- Add runonclick=1 to load the preview only when the visitor asks for it.
Sources
- CodeSandbox Docs · Embedding (Sandboxes)codesandbox.io/docs/learn/browser-sandboxes/embedding
- CodeSandbox Docs · Embedding (Legacy Sandboxes)codesandbox.io/docs/learn/legacy-sandboxes/embedding
- CodeSandbox Docs · Embedding (VM Sandboxes)codesandbox.io/docs/learn/vm-sandboxes/embedding
- iframecheck live check · both links
Profile updated