Overview
Embed a StackBlitz project in your notes by providing its project URL. The embed gives you a convenient way to return to the project from your page.
Use the block when you want a project alongside related notes, instructions, or planning. You can open the project or change its link from the embed.
When to use it
Keep a StackBlitz demo next to notes about how it works.
Link a project from a page of development tasks or review notes.
Save a project alongside documentation for a feature.
Collect project links on a page for a lesson or workshop.
Features and settings
Setting
StackBlitz project URL
Provide the URL of the StackBlitz project you want to embed. Use the link for the project you want readers to open from the page.
Built in
Open the project
Choose Open Project to go to the linked StackBlitz project.
Built in
Change the link
Choose Change Link when you want the embed to point to a different StackBlitz project.
Built in
Configure the embed
Use StackBlitz Settings to access the block's URL setting.
How to use it
Add the StackBlitz block
Add a StackBlitz block to your page.
Open its settings
Open StackBlitz Settings for the block.
Provide the project URL
Use Paste StackBlitz URL... to enter the URL of the project you want to embed.
Embed the project
Choose Embed to use the URL for the StackBlitz embed.
Open or update the project
Choose Open Project to visit the linked project, or Change Link to use a different URL.
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
Project demo with notes
Embed a StackBlitz demo next to notes describing its behavior. Open the project from the page when you want to revisit it.
Feature documentation
Keep a project link with the notes for a feature. If the project changes, use Change Link to update the embed.
Workshop resources
Add a StackBlitz project to a workshop page alongside your session notes so it is easy to return to.
Tips · Limitations
Tips
Use the URL for the specific StackBlitz project you want to open.
Keep the embed near the notes that explain or refer to its project.
Use Change Link if you need the embed to point to another project.
Choose Open Project when you want to visit the linked project.
Limitations
The embed requires a StackBlitz project URL.
The StackBlitz block is not available from the slash menu.
Frequently asked questions
How do I embed a StackBlitz project in my notes?
Add a StackBlitz block, open StackBlitz Settings, provide the project URL with Paste StackBlitz URL..., and choose Embed.
What URL do I use for a StackBlitz embed?
Use the URL of the StackBlitz project you want to embed.
How do I open an embedded StackBlitz project?
Choose Open Project on the embed to visit the linked project.
How do I change the StackBlitz project in an embed?
Choose Change Link and provide the URL of the project you want to use instead.
Can I add a StackBlitz project from the slash menu?
No. The StackBlitz block is not available from the slash menu.
Build your next page with StackBlitz
Open Workspace, type / and add it in a second. Free to start, no credit card.