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.

Embedding Cloud Sandboxes

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.

💡

MicroVM embeds are a feature of cloud sandboxes. If you have an example from a repository you want to embed, you can import the repository as a synced template, which allows you to access (and embed) the code as a cloud sandbox.

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.

First-Time Setup Secrets