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:

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:

`file`	File path	The default file to have open in the editor
`embed`	`0` / `1`	Force embed view regardless of screen size
`hideExplorer`	`0` / `1`	Hide file explorer pane in embed view
`hideNavigation`	`0` / `1`	Hide the browser navigation UI
`ctl`	`0` / `1`	Require user to 'click to load' the embed
`view`	`editor` / `preview`	Which view to open by default
`hidedevtools`	`0` / `1`	Hide the debugging console in the editor preview
`devtoolsheight`	`0` < `height` < `1000`	Set the height of the debugging console in the editor preview
`initialpath`	URL path	The 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.