stackblitz-core-workflow-b

name	stackblitz-core-workflow-b
description	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".
allowed-tools	Read, Write, Edit, Bash(npm:*), Grep
version	1.5.0
license	MIT
author	Jeremy Longshore <[e-mail]>
tags	["saas","ide","webcontainers","stackblitz"]
compatibility	Designed for Claude Code

StackBlitz Core Workflow B: Embedding & Sharing

Overview

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.

Instructions

Step 1: Embed from GitHub

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
});

Step 2: Embed Inline Project

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,
});

Step 3: Open in New Tab

sdk.(, { :  });


sdk.({
  : ,
  : ,
  : { :  },
});