---
title: Codepen
slug: archbee-docs/jcI0-codepen
description: Learn how CodePen, an online development platform, makes coding and debugging easier by allowing users to edit HTML, CSS, and JavaScript directly in their browser. Discover its real-time results feature, code sharing capabilities, and how it can be used f
docTags: 
createdAt: 2022-06-10T12:04:54.000Z
---

CodePen is a development platform where **anyone can edit front-end languages like HTML, CSS, and JavaScript from their browser** without downloading any software.

The best part is that results can be seen in real-time, allowing for quicker debugging. Developers and designers can also create and share code snippets (called pens) with the rest of the world.

:::ExpandableHeading
### What is CodePen used for?

1. **Style-Guide your project** - you can always use CodePen's online code editor to create the style for your project components. This way, you can ensure yours are not influenced by code intended to style other components. You can think of it as a blank canvas.
2. **Learn a new framework or library** - You don't need to set up a new environment every time you want to see if your changes work. The editor view simultaneously shows the three editing areas and the preview, updating the final results every time something changes.
:::

:::ExpandableHeading
### Use cases

1. A client can embed an Codepen URL on Archbee, in order to bring an example, that reinforces his documentation
2. Codepen embed can be used as a user guide, if it is a standard use in the customer's organisation
:::

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