Skip to main content

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 embed 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:

Share Button in StackBlitz Editor

Embed and Preview tabs in StackBlitz Editor

Paste the embed code in any iframe:

<iframe src="https://stackblitz.com/edit/angular?embed=1"></iframe>

Embed Options#

Below is the list of supported query parameters you can specify in the embed URL to customize the embed's appearance and functionality:

fileFile pathThe default file to have open in the editor
embed0 / 1Force embed view regardless of screen size
hideExplorer0 / 1Hide file explorer pane in embed view
hideNavigation0 / 1Hide the browser navigation UI
ctl0 / 1Require user to 'click to load' the embed
vieweditor / previewWhich view to open by default
hidedevtools0 / 1Hide the debugging console in the editor preview
devtoolsheight0 < height < 1000Set the height of the debugging console in the editor preview
initialpathURL pathThe initial URL path (URI encoded) the preview should open

Alternatively, you can use our JavaScript SDK methods for easily embedding StackBlitz projects on the page and avoid all the hassles of creating/configuring iframes.

If you want to embed content in Medium, simply take your project URL (i.e. https://stackblitz.com/edit/angular) and paste it. After you hit enter, it should automatically become an embed.