How to Add CodePen Code to Your Squarespace 7.1 Website (2025 Guide)

If you're a web designer, developer or creative that uses Squarespace in your work, there's likely going to be a time when you're building on top of the platform, and you'll need to like share features with clients, demonstrate capabilities to a project team or just show off some experimental sliders or animations or UI you're cranking on. Enter CodePen.

CodePen is another online tool that gives you the power to make, share, and collaborate on code using HTML, CSS, and JavaScript all in a live, editable environment. Whether you’re crafting for clients, teaching through tutorials, or simply showcasing creative coding work, you can bring a professional, dynamic look to your site with a little help from some Squarespace 7.1 and CodePen integrations.

• Method 1: Add CodePen live preview to your page directly via Embedding

• Method 2: Manually copy the ESPv1 HTML, CSS, and JS code and add it to Squarespace

Both ways have their benefits, depending on whether you want Live real-time syncing from CodePen or total control right in your site. In this guide, we’re going to show you how to do both step by step so that you can seamlessly showcase your Pens in Squarespace without any hassle.

Let’s get started.

Method 1: Embed CodePen Directly (The Easy Way)

This method allows you to display a live, interactive preview of your CodePen project on your Squarespace page.

Step-by-Step Instructions:

1. Open Your Pen on CodePen

2. Click the “Embed” button

• Or go to Settings > Embed

3. Customize appearance (height, theme, etc.)

4. Copy the Embed Code

Example Embed Code:

Copy

Copied!

<section class="a-section">
    <div class="a-section-marquee-box">
      <h2 class="marquee-text">scrolling text using css only •</h2>
      <h2 class="marquee-text">scrolling text using css only •</h2>
    </div>
</section>
<section class="b-section">
    <div class="b-section-marquee-box">
      <h2 class="marquee-text">scrolling text using css only •</h2>
      <h2 class="marquee-text">scrolling text using css only •</h2>
    </div>
</section>

<style>
.a-section {
    padding: 3em 3% 0;
}
.a-section-marquee-box {
    height: 180px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid #181818; /* same as bg */
}
.a-section-marquee-box h2 {
    white-space: nowrap;
    text-transform: uppercase;
    font-size: 7em;
    font-weight: 100;
    flex-shrink: 0;
    padding: 0 10px;
    width: max-content;
    display: flex;
    align-items: center;
    transform: translateX(0);
    animation: a-text-scroll 35s linear infinite;
}
@keyframes a-text-scroll {
    0% { transform: translate3d(-100%, 0, 0); }
    100% { transform: translate3d(0%, 0, 0); }
}
.b-section {
    padding: 3em 3% 0;
}
.b-section-marquee-box {
    height: 180px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid #181818; /* same as bg */
}
.b-section-marquee-box h2 {
    white-space: nowrap;
    text-transform: uppercase;
    color: #475747;
    font-size: 7em;
    font-weight: 100;
    flex-shrink: 0;
    padding: 0 10px;
    width: max-content;
    display: flex;
    align-items: center;
    transform: translateX(0);
    animation: b-text-scroll 35s linear infinite;
}
@keyframes b-text-scroll {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}
</style>
  

1. Add to Squarespace Page:

• Go to your Squarespace page editor

• Click Edit

• Add a Code Block

• Paste the embed code above

• Save your changes 

Your Pen will now appear live on your site, interactive and mobile-friendly.

Method 2: Manually Copy Code into Squarespace

Prefer not to rely on external scripts? You can copy the raw HTML, CSS, and JavaScript directly from CodePen and insert them into Squarespace.

Step-by-Step Instructions:

1. Open your Pen

2. Copy the code sections separately:

• HTML

• CSS

• JavaScript

Insert Each Section in Squarespace:

HTML:

• Add a Code Block to your page and paste the HTML code.

CSS:

• Recommended: Paste it into Design > Custom CSS

• OR: Wrap it in a <style> tag in a Code Block:

<style>

/* Paste your CSS here */

</style>

JavaScript:

• Recommended: Paste into Settings > Advanced > Code Injection > Footer

• OR: Use a <script> tag inside a Code Block:

<script>

// Paste your JavaScript here

</script>

Final Result

After following either method:

• Your CodePen code is live on your Squarespace 7.1 site

• Fully responsive and customizable

• Loads cleanly and looks great on all devices

---

Frequently Asked Questions (FAQ)

1. Can I have more than just one CodePen on a single Squarespace page?

Yes! It’s possible to have as many CodePens on a page as you want, so feel free to repeat this process until you’re happy! Just be sure to put each embed code in its own Code Block for it to display.

2. Do these CodePen embeds work on mobile?

Absolutely. Tap the following embedded Pens to open in the Responsive Design mode. These CodePen pens are fully responsive and will adjust to size up and down, even to tablet and phone.

3. Can I modify the CodePen code once I've inserted it into Squarespace?

• If you’ve opted for Method 1 (Embed), you may update the Pen directly on CodePen. CodePen will automatically update any edits you make on your Squarespace site.

• If you use Method 2 (Manual Copy), you can freely edit the code directly inside Squarespace since it's stored locally.

4. What is the difference between just copying the code manually?

• Embedding (Method 1) is quick and dynamic. Perfect for some live CodePen updates.

• Manual copy (Method 2) lets you have more control and keeps the code running live on your Squarespace site, without any dependency on external scripts.

5. Can I embed CodePen Pro embeds on Squarespace?

Yes, Squarespace does allow free and Pro-level CodePen embedding. If you’re a Pro user, you can further customize the embed (such as removing branding or tabs) before pasting it into your page.