About

Imported from jeremylongshore/tons-of-skills-marketplace (skills/.curated/stackblitz-core-workflow-b/SKILL.md). Install upstream with npx skills add jeremylongshore/tons-of-skills-marketplace --skill stackblitz-core-workflow-b. Copyright stays with the author (MIT).

StackBlitz Core Workflow B: Embedding & Sharing

Name: stackblitz-core-workflow-b
Author: jeremylongshore

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

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

<!-- 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 Handling

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

Resources

StackBlitz SDK
Embed URL Parameters
WebContainer API

Next Steps

For common errors, see stackblitz-common-errors.

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/jeremylongshore-tons-of-skills-marketplace-stackblitz-co-4c61fb/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

jeremylongshore-tons-of-skills-marketplace-stackblitz-co-4c61fb.ocm.jsonjson

{
  "ocm": "1",
  "id": "jeremylongshore-tons-of-skills-marketplace-stackblitz-co-4c61fb",
  "kind": "skill",
  "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\".",
  "publisher": "jeremylongshore",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "coding"
    ],
    "tags": [
      "skill-md",
      "saas",
      "ide",
      "webcontainers",
      "stackblitz",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "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\"."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/jeremylongshore/tons-of-skills-marketplace",
      "path": "skills/.curated/stackblitz-core-workflow-b/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/jeremylongshore/tons-of-skills-marketplace/blob/HEAD/skills/.curated/stackblitz-core-workflow-b/SKILL.md",
      "key": "jeremylongshore/tons-of-skills-marketplace/skills/.curated/stackblitz-core-workflow-b/SKILL.md"
    },
    "compatibility": "Designed for Claude Code",
    "allowed_tools": [
      "Read,",
      "Write,",
      "Edit,",
      "Bash(npm:*),",
      "Grep"
    ],
    "license": "MIT"
  },
  "instructions": "# StackBlitz Core Workflow B: Embedding & Sharing\n\n## Overview\n\nEmbed interactive StackBlitz projects in documentation, blog posts, and tutorials using the StackBlitz SDK. Supports embedding from GitHub repos, existing StackBlitz projects, or inline code.\n\n## Instructions\n\n### Step 1: Embed from GitHub\n\n```typescript\nimport sdk from '@stackblitz/sdk';\n\n// Embed a GitHub repo as an interactive editor\nsdk.embedGithubProject('embed-container', 'vitejs/vite/packages/create-vite/template-react-ts', {\n  openFile: 'src/App.tsx',\n  height: 500,\n  theme: 'dark',\n  clickToLoad: true,  // Don't load unti",
  "cost": {
    "context_tokens": 618
  }
}

Fetch it by URL: GET /api/v1/registry/jeremylongshore-tons-of-skills-marketplace-stackblitz-co-4c61fb/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.