Embedding projects
What are StackBlitz embeds?
A StackBlitz embed allows you to display our editor with your code into sites for documentation, blog posts, and any sites that support embedded content. By using the StackBlitz SDK, you can customize your embedded StackBlitz project to display the editor, preview, file explorer, and more.
How can I embed my project?
Create a new project and get the embed code from the “Share” dropdown link in the top navigation like so:
Paste the embed code in any iframe:
<iframe src="https://stackblitz.com/edit/angular?embed=1"></iframe>
Embed URL options
Below is the list of supported query parameters you can specify in the embed URL to customize the embed's appearance and functionality:
| Parameter | Value | Description |
|---|---|---|
ctl | 0 / 1 | Require users to “click to load” the embed |
devToolsHeight | 0 < height < 100 | Set the height of the Console in the editor preview |
embed | 0 / 1 | Force embed view regardless of screen size |
file | File path | The default file to have open in the editor |
hideDevTools | 0 / 1 | Hide the Console in the editor preview |
hideExplorer | 0 / 1 | Hide file explorer pane in embed view |
hideNavigation | 0 / 1 | Hide the preview’s URL bar |
initialPath | URL path | The initial URL path (URI encoded) the preview should open |
showSidebar | 0 / 1 | Show the sidebar in embed view (large viewports only) |
terminal | String | The name of a npm script to run on project load (WebContainers only) |
terminalHeight | 0 < height < 100 | Set the height of the Terminal |
theme | light / dark | Set the color theme of the editor UI |
view | editor / preview | Which view to open by default |
Alternatively, you can use our JavaScript SDK methods for embedding StackBlitz projects in web pages, and avoid creating and configuring iframes.
Embedding on blogging sites
StackBlitz embeds are supported on DEV and Medium and accept the embed URL options.
DEV
To embed a StackBlitz project in DEV, take your project URL and use it inside the DEV's liquid tag, like so:
{% stackblitz https://stackblitz.com/edit/vitejs-vite-y8mdxg?file=index.html %}
Medium
To embed a StackBlitz project in Medium, take your project URL (for instance: https://stackblitz.com/edit/angular) and paste it. After you hit enter, it should automatically become an embed.