CodePen external scripts execution order between editor preview and published embed

Direct Answer

CodePen does not document a guaranteed synchronous execution order for multiple external scripts added via Pen Settings, in either the editor preview or published embeds. Ordering is best-effort and can differ between environments.

Confirmed Behavior

• Editor preview: Script URLs are injected as <script src="…"></script> elements in the listed order, but browsers load them asynchronously by default. CodePen does not confirm that defer is applied in preview.
• Published pens and embeds: A stricter Content Security Policy (CSP) is enforced. Injected script tags may receive async or defer attributes, and CSP directives (e.g., script-src) can block inline scripts, eval(), and non-HTTPS resources.
• Relative paths and localhost: These resolve in local files but are blocked inside CodePen's sandboxed iframes. Only absolute HTTPS URLs load reliably in both preview and production.
• Preprocessors: Run server-side on CodePen; output may diverge from a local toolchain.

Likely Explanation (Not Guaranteed)

The platform treats script injection as a convenience, not a dependency manager. In preview, the browser's native async loading dominates. In production, CSP and possible attribute mutations add further nondeterminism. Because CodePen does not version or document the injection mechanics, a pen that works today may reorder scripts after a platform update.

Reliable Dependency Patterns

1. Bundle into one external script — host a combined file on a CDN (unpkg, jsDelivr, or a custom build) and add it as a single entry.
2. Use ES modules — add one external script with type="module" and explicit import/export statements; the module graph defines order.
3. Loader script — add a small script that dynamically imports dependencies in sequence (e.g., await import(url)).

Verification Steps

# 1. Inspect load order and attributes on the published pen
open https://codepen.io//pen/ in browser → DevTools → Network tab → filter JS

# 2. Check CSP header
curl -I https://codepen.io//pen/ | grep -i content-security-policy

# 3. Minimal test pen: two scripts logging "A loaded" / "B loaded"
#    Compare console order in preview vs published embed

# 4. If using ES modules, confirm module graph loads in published embed

One Diagnostic Detail Needed

Does your pen rely on globals exposed by one script being available to another at parse time? If yes, bundling or ES modules is required; a loader script with await import() also works but adds async latency.