stackblitz-core-workflow-b

# 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 ```typescript 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 ```typescript 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 ```typescript // 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!")' }, }); ``` ### Step 4: URL-Based Embedding ```html <!-- iframe em...