---
title: "Module: Codepen Embed"
description: "The Codepen Embed is used to display projects (otherwise called pens) from Codepen into your webpages"
url: "https://freshjuice.dev/developer-edition/docs/modules/codepen/"
---
Developer Edition

# Module: Codepen Embed

![Screenshot of Codepen Embed Module](https://freshjuice.dev/_astro/codepen-embed.B6qZsxHO_Z1mBLYB.webp)

The Codepen Embed is used to display projects (otherwise called pens) from Codepen into your webpages

You can check the [demo page here](https://143910617.hs-sites-eu1.com/module-codepen-embed?utm_source=freshjuice.dev)

## Settings

-   **Codepen URL**: The url to the project from Codepen. The default url is [https://codepen.io/reatlat/pen/gOyGyMo](https://codepen.io/reatlat/pen/gOyGyMo?utm_source=freshjuice.dev).
-   **Height**: (Slider) The viewport of the module. The default is 500px, but you can set it to a value between 40px and 1440px.
-   **Default Tabs**: These are the different tabs you may allow to have open. You can select various tabs (default displays only result) like:
    -   **Result**: The display result of the project.
    -   **HTML**: The HTML tab.
    -   **CSS**: The CSS tab.
    -   **JS**: The JavaScript tab.