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.

💡

Embeds for Devboxes 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 Devbox and then clicking on 'Copy embed code'.

This will give you HTML code with an iFrame that you can paste into your content.

Devbox Embed

💡

MicroVM embeds are a feature of Devboxes. 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 Devbox.

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 sandbox 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 legacy sandbox embeds.

Getting Started Secrets