The fastest way to copy a CodePen project

To copy someone else's CodePen project to your own account, click the "Fork" button in the top right of any project page. This creates an exact duplicate under your name that you can edit without changing the original. You'll need to be logged into CodePen for the Fork button to work — if you're not logged in, you'll see a prompt to sign up or log in first.

Forking is the standard way CodePen users share and build on each other's work. The forked project stays linked to the original, so anyone viewing your version can see where it came from. If you want a completely independent copy with no visible connection to the original, you'll need to use a different method.

Key Takeaways

  • Click the Fork button on any CodePen project page to create your own editable copy in seconds.
  • A forked project remains linked to the original, showing viewers the source project in your version's details.
  • You can manually copy the HTML, CSS, and JavaScript code from any project and paste it into a new pen if you want a completely separate copy.
  • CodePen's "Save as" feature does not exist, so forking or manual copying are your only options for duplicating projects.

What happens when you fork a project

When you fork a CodePen project, CodePen creates a new pen in your account with all the same code — HTML, CSS, and JavaScript — from the original. The fork appears in your collection of pens and you can edit it however you want without affecting the original project.

The forked project displays a note showing it was forked from the original, including a link back to the source. This transparency is built into CodePen's culture; it helps creators get credit and lets others see the chain of inspiration behind a project. If the original project is deleted, your fork remains intact and functional.

Manually copying code if you want no connection to the original

If you want a copy that has no visible link to the original project, you can manually copy the code. Open the project you want to duplicate, then select all the HTML code in the HTML panel, copy it, and paste it into a new pen. Repeat this for the CSS and JavaScript panels.

This method takes longer than forking but gives you a completely independent project. No one viewing your pen will see a reference to the original. This approach is useful if you're building something substantially different and don't want the visual connection, or if you're copying a project from someone who prefers not to be credited through a fork link.

Creating a new pen to paste code into

To create a blank pen where you can paste copied code, log into CodePen and click the "Create" button in the top navigation, then select "New Pen." You'll get a fresh pen with empty HTML, CSS, and JavaScript panels ready for your code.

Once you've pasted all the code from the original project into the matching panels, save your new pen by clicking "Save" in the bottom right. Give it a descriptive name so you can find it later. Your new pen is now independent and editable.

Copying projects you don't own

CodePen allows you to fork or manually copy any public project, whether you created it or not. The platform is designed around sharing and remixing code, so forking someone else's work is expected and encouraged. The original creator gets visibility through the fork link, and you get a starting point for your own project.

If a project is private, you won't be able to see or copy it unless the owner has shared it with you directly. Private projects are only visible to the owner and anyone they've explicitly given access to.

Organizing your forked and copied projects

As you fork and copy more projects, your CodePen account can get crowded. You can organize your pens by creating collections — groups of related projects. Click on your profile, go to "Collections," and create a new one with a name like "Forked Projects" or "Learning Experiments."

You can also rename any pen after you create it. Click the pen's title at the top of the editor to change the name. Renaming forked projects to reflect what you've changed or learned helps you remember what each one does when you come back to it later.

When forking doesn't work the way you expect

If you click Fork and nothing happens, you're probably not logged into CodePen. Log in or create a free account, then try forking again. CodePen requires an account to fork because the forked project needs to belong to someone.

If you're trying to fork a project that uses external libraries or APIs, your fork will include the same external resources. If those resources require authentication or have usage limits, you may need to update the credentials in your forked version. Check the original project's description or comments for notes about setup requirements.

Frequently Asked Questions

Can I fork a project and then remove the link to the original?

No, CodePen doesn't provide a way to unlink a fork from its original. If you want a completely independent copy with no visible connection, you'll need to manually copy the code into a new pen instead of forking.

Will the original creator know if I fork their project?

CodePen doesn't notify creators when someone forks their work, but they can see forks if they visit their own project page. The fork count appears publicly, so creators can see how many times their project has been forked.

What if the original project gets updated after I fork it?

Your fork is a snapshot taken at the moment you forked it. Updates to the original project won't automatically appear in your fork. If you want the new changes, you'll need to manually copy them from the updated original into your fork.

Can I fork a project that uses external libraries or frameworks?

Yes, your fork will include all the same external libraries and frameworks the original uses. If the original links to a specific version of Bootstrap or jQuery, your fork will use the same version. You can change these links in your fork's settings if you want to use a different version.

Is there a limit to how many projects I can fork?

CodePen's free plan has no limit on the number of pens you can create or fork. Your account can hold as many projects as you want, though searching through hundreds of pens becomes harder without good organization.