---
title: Codepen
slug: docs/es/codepen
description: Descubre cómo CodePen, integrado con Archbee, mejora la eficiencia en la codificación al permitir ediciones en tiempo real de HTML, CSS y JS, perfecto para guías de estilo y uso educativo.
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"}

### ¿Qué es CodePen?

**CodePen** permite a los usuarios editar fácilmente **HTML**, **CSS**, y **JavaScript** en **su navegador**, y con **Archbee**, este proceso es aún más eficiente, sin necesidad de instalar software. Esta integración mejora la eficiencia y la comodidad del desarrollo.

La mejor parte es que los resultados pueden verse en tiempo real, lo que permite una depuración más rápida. Los desarrolladores y diseñadores también pueden crear y compartir fragmentos de código (llamados pens) con el resto del mundo.

### ¿Para qué se utiliza CodePen?

1. **Guiar el estilo de su proyecto** - siempre puede usar el editor de código en línea de CodePen para crear el estilo de los componentes de su proyecto. De esta manera, puede asegurarse de que los suyos no estén influenciados por código destinado a estilizar otros componentes. Puede pensar en ello como un lienzo en blanco.
2. **Aprender un nuevo framework o biblioteca** - No necesita configurar un nuevo entorno cada vez que desea comprobar si sus cambios funcionan. La vista del editor muestra simultáneamente las tres áreas de edición y la vista previa, actualizando los resultados finales cada vez que algo cambia.

### Casos de uso

1. Un cliente puede incrustar una URL de CodePen en Archbee, con el fin de aportar un ejemplo que refuerce su documentación
2. La incrustación de CodePen puede utilizarse como una guía de usuario, si es un uso estándar en la organización del cliente

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