Embed StackBlitz projects and manage WebContainer snapshots for sharing. Use when embedding code playgrounds in docs, creating shareable examples, or building interactive tutorials with StackBlitz. Trigger: "embed stackblitz", "stackblitz embed", "stackblitz share project".
Embed interactive StackBlitz projects in documentation, blog posts, and tutorials using the StackBlitz SDK. Supports embedding from GitHub repos, existing StackBlitz projects, or inline code.
import sdk from '@stackblitz/sdk';
// Embed a GitHub repo as an interactive editor
sdk.embedGithubProject('embed-container', 'vitejs/vite/packages/create-vite/template-react-ts', {
openFile: 'src/App.tsx',
height: 500,
theme: 'dark',
clickToLoad: true, // Don't load until user clicks
});
sdk.embedProject('embed-container', {
title: 'React Counter Demo',
template: 'node',
files: {
'src/App.tsx': `
import { useState } from 'react';
export default function App() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
}`,
'package.json': JSON.stringify({
dependencies: { react: '^18', 'react-dom': '^18' },
}),
},
}, {
openFile: 'src/App.tsx',
terminalHeight: 25,
});
// Open project in full StackBlitz editor
sdk.openGithubProject('user/repo', { openFile: 'README.md' });
// Open inline project
sdk.openProject({
title: 'Quick Demo',
template: 'node',
files: { 'index.js': 'console.log("Hello!")' },
});
<!-- iframe embed (no SDK needed) -->
<iframe
src="https://stackblitz.com/edit/vitejs-vite?embed=1&file=src/main.ts&theme=dark"
style="width:100%;height:500px;border:0;border-radius:4px;overflow:hidden;"
></iframe>
<!-- GitHub repo embed -->
<iframe
src="https://stackblitz.com/github/user/repo?embed=1&file=README.md"
style="width:100%;height:500px;border:0;"
></iframe>
| Error | Cause | Solution |
|---|---|---|
| Embed shows loading forever | Missing template files | Ensure package.json is included |
clickToLoad not working | SDK version mismatch | Update @stackblitz/sdk |
| GitHub embed 404 | Wrong repo path | Use owner/repo/path/to/subdir format |
For common errors, see stackblitz-common-errors.