Overview
Embed a CodeSandbox project in a page or board card to keep the project alongside related notes and documentation.
Paste the CodeSandbox URL and select Embed. Afterward, use Open Sandbox to open the project or Change Link to update the URL.
When to use it
Keep a demo project beside notes about a feature or prototype.
Add a working example to project documentation.
Link a sandbox to a bug report or technical investigation.
Keep a CodeSandbox project handy on a board card for a task.
Features and settings
Setting
CodeSandbox URL
Set the URL of the CodeSandbox project to embed. Use Paste CodeSandbox URL... when prompted, then select Embed.
Built in
Open the project
Select Open Sandbox to open the embedded CodeSandbox project.
Built in
Change the project link
Select Change Link to replace the URL associated with the embed.
Built in
Manage embed settings
Use CodeSandbox Settings to access the blockâs settings.
How to use it
Choose where the embed belongs
Open the page or board card where you want to keep the CodeSandbox project.
Add the CodeSandbox block
Use the editorâs block controls to add a CodeSandbox block.
Enter the project URL
Select Paste CodeSandbox URL... and enter the URL of the project you want to embed.
Embed and use the project
Select Embed. To open the project later, select Open Sandbox; to replace it, select Change Link.
Where it works
On any page
In the / menu
Inside board cards
Turn other blocks into it
Own settings panel
Lara can add it for you
Examples
Feature documentation
Embed a demo project beside notes that explain how a feature works. Readers can open the sandbox from the documentation.
Prototype review
Keep a prototypeâs CodeSandbox project on a board card with review notes so the project and feedback stay together.
Bug investigation
Embed a project used to reproduce an issue alongside the investigation notes.
Tips · Limitations
Tips
Embed the project that best matches the notes around it, such as a demo or reproduction.
Use Open Sandbox when you want to work in the CodeSandbox project itself.
Use Change Link when the project URL needs to be replaced.
Keep the embed close to the documentation that explains its purpose.
Limitations
The embed is for CodeSandbox projects; it is not a general-purpose embed for links to other services.
You need a CodeSandbox project URL to create the embed.
Frequently asked questions
How do I embed CodeSandbox in my notes?
Add a CodeSandbox block, enter the project URL with Paste CodeSandbox URL..., and select Embed.
What URL do I need for a CodeSandbox embed?
Use the URL of the CodeSandbox project you want to embed.
How do I open an embedded CodeSandbox project?
Select Open Sandbox on the embed to open the project.
How do I change the CodeSandbox project in an embed?
Select Change Link and provide the URL of the project you want to use instead.
Where can I use a CodeSandbox embed?
You can use the CodeSandbox block on a page or a board card.
Build your next page with CodeSandbox
Open Workspace, type / and add it in a second. Free to start, no credit card.