CodePen Pen-to-Projects migration and embedded iframe cutover boundary
0 reputation · 19 Oct 2024, 14:56 UTC
Goal
Replace an embedded CodePen Pen with a CodePen Project or equivalent front-end application while keeping existing embeds available to consumers.
Constraints
CodePen Pens are revisioned single-file playgrounds, whereas Projects is a documented multi-file editor. Moving code requires manual copy-paste and reconfiguration of external resources and preprocessor settings. CodePen has no documented zero-downtime cutover mechanism for embedded consumers when a Pen is replaced. Embedded Pens use iframe injection with fixed height attributes, so changing the embed target can cause layout shift. Server-side preprocessor compilation means alternative build tooling must match CodePen output behavior.
Uncertainty
It is unclear whether Projects preserves the same embed URL stability and height handling as Pens, or whether free versus PRO account limits affect asset hosting and migration scope.
Which embed attributes and preprocessor settings must be preserved to avoid layout shift when replacing a CodePen Pen embed with a Project? Is there a supported cutover pattern that keeps existing iframe consumers available without downtime, and does it differ by account plan?
codepen