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 Devboxes. There are a few distinctions between Sandbox and Devbox embeds worth noting. Devboxes have more computing power because they run in VMs. They also support any programming language, not just JavaScript. That said, Devbox embeds are currently limited in terms of interactions compared to Sandboxes, as explained further below.

Embedding Devboxes

Devbox 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 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.

Generate an Embed URL

You can generate a URL to embed by clicking the Share button inside the editor of a Devbox 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 Devbox embeds are in beta, some more advanced options are currently unavailable.

Notably, the embed viewer cannot make changes to the Devbox before forking it, so inline editing is not currently supported on these embeds.

Additionally, Devbox embeds still lack some of the customization options that are available in Sandbox embeds.