Embedding

What is an Embed?

An embed lets you include a running sandbox in your documentation, blog post, or website.

Embedding Sandboxes

Sandbox embeds enhance the learning and reading experience for anyone by providing a practical, interactive, and hassle-free way to explore and experiment with code examples. In addition, embeds allow users to interact with code examples directly from an article or blog post, from where users can directly run, modify, and experiment with the code in a live environment. Also, embeds can be a great solution if you want to show examples of applications.

Generate an Embed URL

You can generate a URL to embed by clicking the Share button inside the editor of a 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 React 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/react-new?file=/src/index.js"
></iframe>

This code outputs the following embed:

Limitations

As Sandbox embeds are in beta, some more advanced options are currently unavailable.

Notably, the embed viewer cannot change the sandbox before forking it, so inline editing is not currently supported on these embeds.

Additionally, Sandbox embeds still lack some of the customization options available in legacy sandbox embeds.