You're viewing the changeset-release/main deployment.
View on main →

Codesandbox

Embed Codesandbox examples

Summary

Embed live CodeSandbox examples.

Linked previews use shadcn Card with optional title, description and Badge tags. The preview image or placeholder remains the link to CodeSandbox. Interactive embeds keep their iframe.

Give the sandbox a preview image with img. Like an <img src>, it can be relative to the article:

|-- authoring
|   |-- codesandbox.mdx  <= relative to this article
|   `-- cell-fracture.webp

<Codesandbox id="3rjsl" title="Cell fracture" img="cell-fracture.webp" />

result:

Cell fracture
Cell fracture
Tip

A relative img gets its dimensions added automatically, just as a relative Img does. A full URL (img="https://…") works too, as is.

The same image is the page's thumb in the Entries listing.

Without img

CodeSandbox no longer serves screenshots of sandboxes, so without img a placeholder stands in, still linking to the sandbox:

<Codesandbox id="3rjsl" title="Cell fracture" />

result:

Cell fracture

Optional metadata can accompany either an image or a placeholder:

<Codesandbox
  id="3rjsl"
  title="Cell fracture"
  description="Explore a physics example with Rapier."
  tags={["physics", "rapier"]}
/>
Cell fracture
Explore a physics example with Rapier.
physicsrapier

With only an id, the placeholder link is still labelled CodeSandbox followed by that id.

Note

screenshot_url is the former name of img. It still works, but is deprecated.

Props
PropTypeDescription
idstringSandbox id, e.g. 3rjsl for https://codesandbox.io/s/3rjsl
titlestringCaption under the preview
imgstringPreview image: relative to the article, or a full URL
descriptionstringText under the title
tagsstring[]Tags under the title, e.g. tags={["physics", "rapier"]}
embedbooleanEmbeds the live sandbox in an iframe instead of linking to it

docs/authoring/codesandbox.mdx

Edit this page