CodePen
前端创意 playground 与社区
访问 CodePen 更多 代码沙盒HTML/CSS/JS 三栏即时预览，是前端demo的事实标准。海量他人作品可 fork 学习，年度 DEV Challenge 也在此举办。
CodePen 速览
| 官网 | https://codepen.io |
|---|---|
| 分类 | 代码沙盒 |
| 价格 | 部分免费 |
| 平台 | Web |
| 适合 | 写 CSS 效果 demo、面试作品和教学示例 |
主要功能
- 三栏编辑 + 即时预览
- 支持 Sass、Babel、TypeScript 预处理器
- 海量社区作品可 fork
- Pen 可嵌入博客
如何使用 CodePen
- 新建 Pen，直接开写
- 需要外部库就在设置里加 CDN
- 保存后获得可分享链接
注意事项
- 免费档功能受限（私有 Pen、资产托管）
- 不适合多文件大项目
CodePen 的替代品
标签
常见问题
免费档有什么限制？
私有 Pen、协作模式、资产上传等要 Pro；公开 Pen 无限制。
能跑 npm 包吗？
通过 CDN 引入浏览器版；完整 npm 支持在 CodeSandbox 更好。
CodePen 免费吗？
CodePen 标注为 部分免费。订阅前请查看厂商自己的价格页面，因为套餐与限额会变动。
CodePen 可以用什么代替？
以下是 代码沙盒 中做同类事情的其他工具。
CodePen 是一款独立的第三方服务。ToolVault 收录它仅供参考，与厂商无任何关联；在依赖它之前，请到官网核实最新价格与条款。