CodePen是面向前端代码实验与作品展示的在线开发环境。一个Pen通常由HTML、CSS和JavaScript三个编辑区组成，代码变化可即时反映在预览中，适合验证想法、制作演示和分享可复现示例。

产品界面

CodePen编辑器将HTML、CSS、JavaScript和结果预览放在同一页面，代码修改后可以立即查看效果。

三个代码面板适合编写独立的前端示例，并可通过顶部设置加载外部资源或预处理器。

核心功能

• 实时预览：编辑HTML、CSS与JavaScript后立即查看结果
• 预处理器：可配置常见CSS和JavaScript预处理方案
• 外部资源：加载框架、字体、脚本和样式依赖
• 作品分享：通过链接嵌入、展示或派生他人的公开作品
• 项目与集合：整理多个实验、组件和主题案例

适合的用户与场景

适合制作UI动效、CSS技巧、组件原型、教学示例和Bug复现。不要在前端代码中写入密钥或敏感数据，正式项目仍应使用版本控制和完整构建流程。

快速上手

1. 创建Pen并设置所需预处理器与资源
2. 分别编写结构、样式和交互代码
3. 根据实时预览调试浏览器表现
4. 保存版本并通过链接分享

实用建议

为了让示例容易复用，应尽量保留最小必要代码，并在设置中明确预处理器和外部依赖。公开Pen不要写入API密钥、Cookie或内部接口地址；用于Bug复现时，应移除业务数据并注明浏览器、依赖版本和预期结果。

使用前建议

分享前建议使用无痕窗口打开作品链接，确认外部脚本、字体和图片无需登录即可加载，并分别检查桌面与移动尺寸下的显示结果。

是否适合你

适合展示HTML、CSS、JavaScript小案例，验证前端效果和分享可运行演示。它不是完整项目IDE；涉及多页面结构、后端服务、私密源码或复杂构建流程时，应使用本地开发环境或云端IDE。

主要优势

• 编辑与预览反馈快，分享链接方便
• 适合组件演示、教学示例和问题复现

需要留意

• 不适合承载复杂应用和完整工程流程
• 公开内容中不能放入密钥、令牌或敏感业务代码

收费与登录说明

收费：免费功能+付费升级。登录：账户与保存功能需按提示登录。不同地区、账户类型和活动期间的实际权益可能变化，正式使用前建议查看官网最新说明。