---
title: Codepen
slug: docs/cn/codepen
description: 了解 CodePen 如何与 Archbee 集成，通过允许对 HTML、CSS 和 JS 进行实时编辑来提升编码效率，非常适合样式指南和教育用途。
image: https://cdn.images.archbee.com/bNBm7nPJgXjbjLyfbHNh2/Bvl-ub3oavd0E5Xf7Hpq-_archbee-codepen.png
icon: {"lucideIcon":"Codepen"}
createdAt: 2022-06-10T12:04:54.000Z
---

::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/Bvl-ub3oavd0E5Xf7Hpq-_archbee-codepen.png" size="60" width="1200" height="676" position="center" showCaption="false"}

### 什么是 CodePen？

**Code牛圈** 使用户能够轻松编辑 **HTML**、**CSS** 和 **JavaScript** 于 **浏览器中**，并且结合 **Archbee**，这一过程更加简化，无需安装任何软件。此集成提升了开发效率和便利性。

最棒的是，结果可以实时显示，从而加快调试速度。开发人员和设计人员还可以创建并分享代码片段（称为 pens）给全世界。

### CodePen 用于什么？

1. **为项目创建 Style-Guide** - 您可以始终使用 CodePen 的在线代码编辑器为项目组件创建样式。这样，您可以确保组件样式不受用于其他组件的代码影响。您可以将它视为一张空白画布。
2. **学习新的框架或库** - 您无需在每次想查看更改效果时都设置新环境。编辑器视图同时显示三个编辑区域和预览，每当有更改时都会更新最终结果。

### 使用场景

1. 客户可以在 Archbee 上嵌入 CodePen URL，以便展示示例，从而增强其文档内容。
2. 如果在客户的组织中属于标准用法，则 CodePen 嵌入内容可用作用户指南。

::codepen{url="https://codepen.io/DragosBulugean/embed/vqrgYq"}