How can I resolve the issue with Webflow displaying a blank page when trying to insert code from CodePen?

TL;DR

Use only relevant HTML, CSS, and JS snippets from CodePen—exclude full HTML structures.
Embed code via Webflow's Embed element, load any required libraries in Project Settings, and place script code in custom code areas.
Wrap JS in Webflow.push() if it relies on DOM load, inspect console for errors, and ensure CSS doesn't hide content unintentionally.

A blank page in Webflow after inserting CodePen code is usually due to JavaScript conflicts, missing external dependencies, or improper embedding methods.

1. Verify CodePen Code Format

CodePen snippets typically include HTML, CSS, and JS in separate panels.
Do not copy the full page preview HTML (with <html>, <head>, <body>).
Use only the relevant part—like a <div>, inline <style>, or script snippet as needed.

2. Embed Code Using Webflow’s Embed Element

Drag a Embed element from the Add panel into your canvas.
Paste only the relevant HTML snippet (e.g., the HTML from CodePen).
For JavaScript:
If it uses <script> tags, make sure the code is wrapped correctly.
Do not place full-page scripts (like <html>, <head>) into the embed.

3. Load External Libraries Properly

If your CodePen uses libraries (like jQuery, GSAP, etc.), ensure those are loaded in Webflow:
Go to Project Settings > Custom Code.
Add necessary CDN <script> links inside the Before or Inside sections.
Failing to include external libraries will cause most JS-dependent elements to break or appear blank.

4. Avoid Onload or DOM-Dependent Scripts in Wrong Places

Scripts depending on window.onload or document.ready may not fire within an Embed element.
Move such JS code to Page Settings > Before custom code section, or wrap your code in:
Webflow.push(function() { /* your script */ }); — this ensures it loads after Webflow scripts.

5. Check for Console Errors

Open your site preview in Chrome.
Right-click and select Inspect, then view the Console tab.
Look for red errors such as Uncaught ReferenceError or Failed to load resource.
These errors will guide you to missing libraries or script issues.

6. Avoid Conflicting CSS

Ensure that imported styles are not hiding content by accident.
Check for things like display: none;, incorrect z-index, or 100% height/width issues.

7. Use the CodePen Embed Script If Needed

Instead of copying code manually, embed using the official CodePen embed script:
From CodePen, click Embed, choose your style, and copy the provided iframe embed code.
Paste that into a Webflow Embed element or HTML Embed in a CMS field.
Note: Ensure iframe content is publicly accessible and mobile-friendly.

Summary

To fix blank pages when embedding CodePen code in Webflow, ensure you strip out full HTML structures, include required external libraries, and place code in the right location (like custom code areas). Check browser console errors to debug missing scripts or syntax problems.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer