Embedding

What is an Embed? Permalink for this section

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

Embedding Sandboxes Permalink for this section

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.

💡

Embeds for Sandboxes are currently in beta.

Generate an Embed URL Permalink for this section

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 Permalink for this section

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:

index.js - nodebox - CodeSandbox

Sandbox template

CodeSandbox

/

React

Open Editor

index.js - nodebox - CodeSandbox

• 1

Limitations Permalink for this section

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.

[CLI & API](/content/docs/learn/browser-sandboxes/cli-api "CLI & API"/index.html) [Custom NPM Registry](/content/docs/learn/browser-sandboxes/custom-npm-registry "Custom NPM Registry"/index.html)