StackBlitz embed 仅支持项目级嵌入，不支持单个 index.html 直传；必须使用合法项目 URL（如 github/username/repo），根目录需含 index.html 和空 package.json 以触发识别，路径、协议、元信息缺一不可。
StackBlitz embed 的 HTML 嵌入方式只支持项目级，不支持单个 index.html 文件直传
StackBlitz 官方 embed 功能本质是嵌入一个完整项目（即 GitHub 仓库或 StackBlitz 内部项目），不是把本地写的 HTML 文件“上传后嵌入”。你没法把一个独立的 index.html 拖进去生成 embed 代码——它没这个入口。
常见错误现象：Failed to load project、空白 iframe、控制台报 CORS 或 404；根本原因是用了非项目路径（比如直接指向 raw.githubusercontent.com 的 HTML 链接）。
- 必须是一个合法的 StackBlitz 项目 URL，形如
https://stackblitz.com/github/username/repo或https://stackblitz.com/edit/xxx-yyy-zzz - 项目根目录下要有
index.html（且最好带<script></script>或基础结构，纯静态 HTML 可能被 sandbox 拦截） - GitHub 仓库需公开，私有库即使加 token 也无法被 embed 加载
如何快速创建一个可 embed 的最小 HTML 项目
别从零配 webpack/vite，StackBlitz 对纯 HTML 项目有原生支持，但需要“骗过”它的启动检测：它默认找 package.json 或框架配置，没找到就可能不运行。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 GitHub 新建仓库，放一个
index.html（内容至少包含<h1>OK</h1>） - 在同一目录下加一个空的
package.json（内容只需{}），这能触发 StackBlitz 识别为“前端项目”并启用预览 - 访问
https://stackblitz.com/github/你的用户名/仓库名，确认右侧面板能正常加载并显示页面 - 点击右上角
Share→Embed，复制生成的<iframe></iframe>代码
embed iframe 的关键参数和兼容性注意点
生成的 <iframe></iframe> 默认带 height="400" 和 frameborder="0"，但实际嵌入博客时容易出问题。
-
height值太小会导致底部被截断，建议设为"500"起步，或用 CSS 配合height: 100%+ 父容器定高 - 部分博客平台（如 Hexo、VuePress）会过滤
allow="clipboard-read; clipboard-write"这类属性，删掉它反而更稳 - StackBlitz embed 不支持
dark mode自动适配，iframe 内始终用项目设置的主题（可在项目.stackblitzrc里配"theme": "dark"） - 移动端 Safari 对跨域 iframe 的 localStorage 访问限制更严，含本地存储逻辑的 HTML 可能报
SecurityError
为什么本地开发好的 HTML 放进 StackBlitz 后样式/脚本失效
不是代码写错了，而是路径和执行环境变了。StackBlitz 的预览服务跑在子域名（https://your-project.stackblitz.io）下，所有相对路径都以此为基准。
-
<script src="main.js"></script>会请求https://xxx.stackblitz.io/main.js，不是你仓库里的main.js—— 必须确保该文件存在于项目根目录 - CSS 中的
background: url(./img/a.png)同理，图片必须提交到仓库且路径匹配 - 避免用
file://协议测试，它和 StackBlitz 的 HTTP 环境完全不兼容 - 第三方 CDN（如
unpkg、jsdelivr）通常可用，但某些库（如 Vue 3 的 ESM 版本）需显式加?module
