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

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

ParameterValueDescription
ctl0 / 1Require users to “click to load” the embed
devToolsHeight0 < height < 100Set the height of the Console in the editor preview
embed0 / 1Force embed view regardless of screen size
fileFile pathThe default file to have open in the editor
hideDevTools0 / 1Hide the Console in the editor preview
hideExplorer0 / 1Hide file explorer pane in embed view
hideNavigation0 / 1Hide the preview’s URL bar
initialPathURL pathThe initial URL path (URI encoded) the preview should open
showSidebar0 / 1Show the sidebar in embed view (large viewports only)
terminalStringThe name of a npm script to run on project load (WebContainers only)
terminalHeight0 < height < 100Set the height of the Terminal
themelight / darkSet the color theme of the editor UI
vieweditor / previewWhich 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.