InteractiveOpen

Browser IDE

Move from CodePen

Turn a Pen into a portable multi-file project you can continue with a full IDE and Linux runtime.

Typical migration: Easy–Moderate · Best method: Export · Copy source

Before You Move

  • Save/export the latest Pen.
  • List external scripts, stylesheets, preprocessors and hosted assets.
  • Record any deployment/custom-domain details you need to recreate.

Migration Steps

  1. 1. Collect files — Export or copy HTML, CSS, JavaScript and assets.
  2. 2. Create project — Start an HTML/Vite/appropriate web project in Interactive Shell.
  3. 3. Move dependencies — Convert external libraries into explicit URLs or package dependencies as appropriate.
  4. 4. Preview — Run the project and compare the private preview with the original Pen.
  5. 5. Version — Initialize or connect Git when you want durable history.

Where Things Go

Pen filesProject files/folders
PreviewPrivate Web Preview
Blocks/preprocessorsProject build dependencies
CollaborationAuthenticated collaboration
DeploymentPublish supported web projects

Verify

  • HTML/CSS/JS behavior matches.
  • External assets load.
  • Package/preprocessor configuration works.
  • Preview has no console errors.

Common Issues

  • External resources — A Pen can rely on editor-configured URLs that are not visible in the three main source panes. Move them explicitly.
  • Preprocessors — Translate Sass/Babel/etc. into project tooling or a suitable template.
  • CodePen 2.0 files — Keep the actual file/folder structure when exporting multi-file Pens.

Last reviewed 2026-09-07.