Skip to content
On this page

Embedding projects

Embedding is one way to display a StackBlitz editor in a documentation page, a blog post, or any other page. This page covers manual embedding in iframes. You can also do it programmatically by using our SDK.

Embedding StackBlitz project on a page

1. Open a project of your choosing and click the "Share" button in the top left navigation bar:

Share Button in StackBlitz Editor

2. In the popup window, choose the "Embed" tab. Customize your embed by choosing appropriate options from the panel on the right and check the preview on the bottom to see how your embed will look. If you're satisfied, copy the embed URL.

Embed and Preview tabs in StackBlitz Editor

TIP

You can customize your embed further by adding suitable query parameters.

3. Paste the embed URL into the desired iframe:

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

You can also embed StackBlitz projects into Medium or Dev posts.

Embedding StackBlitz projects 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:

liquid
{% 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.

Embed URL options

You can use the following URL query parameters to customize the appearance and functionality of the embedded project:

ParameterValueDescription
ctl0/1Prompts users to “click to load” the embed.
devtoolsheight0 - 100Sets the height of the console in the editor preview.
embed0/1Forces embed view regardless of screen size.
filefile pathSpecifies the default file to have open in the editor.
hidedevtools0/1Hides the console in the editor preview.
hideExplorer0/1Hides the file explorer pane in embed view.
hideNavigation0/1Hides the preview’s URL bar.
initialpathURL pathSpecifies the initial URL path (URI encoded) the preview should open.
showSidebar0/1Shows the sidebar in embed view (large viewports only)
terminalstringSpecifies the npm script to run on project load (WebContainers-based projects only).
terminalHeight0 - 100Sets the height of the terminal.
themelight - darkSets the color theme of the editor UI.
vieweditor - previewSpecifies which view to open by default.

Alternatively, you can use our JavaScript SDK methods for embedding StackBlitz projects in pages to avoid creating and configuring iframes.