Embedding
What is an Embed?
An embed enables you to include a running sandbox in your documentation, blog post, or website.
Embeds are now supported as a beta feature for cloud sandboxes. There are a few distinctions between browser and cloud sandbox embeds worth noting. Cloud sandboxes have more computing power because they run in VMs. They also support any programming language, not just JavaScript. That said, cloud sandbox embeds are currently limited in terms of interactions compared to browser sandboxes, as explained further below.
Cloud sandbox embeds are a great solution if you want to show examples of applications that go beyond front-end JavaScript (namely, Python, Go, Rust and more).
Unlike browser sandbox embeds, which will use the resources of the viewer's machine to run, these embeds run in CodeSandbox microVMs. This allows them to run with optimal performance regardless of the viewer's device.
Embeds for cloud sandboxes are currently in beta.
Generate an Embed URL
You can generate a URL to embed by clicking the Share
button inside the editor of a cloud sandbox and then clicking on 'Copy embed code'.
This will give you HTML code with an iFrame that you can paste into your content.
Example Embed
Below is an example of the iFrame to embed a Rust sandbox:
<iframe
style={{
width: "100%",
height: 900,
outline: "1px solid #252525",
border: 0,
borderRadius: 8,
marginBottom: 16,
zIndex: 100
}}
src="https://codesandbox.io/p/sandbox/fork-syscall-example-7giodp?file=/src/main.rs"
></iframe>
This code outputs the following embed:
Limitations
As cloud sandbox embeds are in beta, some more advanced options are currently unavailable.
Notably, the embed viewer cannot make changes to the sandbox before forking it, so inline editing is not currently supported on these embeds.
Additionally, cloud sandbox embeds still lack some of the customization options that are available in browser sandbox embeds.