Copy a CodePen project by forking it directly in the browser

The fastest way to copy someone else's CodePen project is to use the Fork button, which creates your own version in seconds. When you fork a project, CodePen copies all the HTML, CSS, and JavaScript code into a new project under your account, and it stays linked to the original so you can see what changed.

Open the CodePen project you want to copy in your browser. Look for the Fork button in the bottom right corner of the editor — it looks like a small branch icon next to buttons for sharing and saving. Click it once. CodePen will create a copy, give it the same name with "(forked)" added to the title, and open your new version automatically.

You now own this copy and can edit it however you want. The original project stays unchanged, and the author can see that their work was forked but cannot edit your version. If you want to rename your copy, click the project title at the top left and type a new name.

Key Takeaways

  • The Fork button in the bottom right corner copies a project to your account in one click, and the copy opens when ready in the editor.
  • Forking keeps a link to the original project, so you can see the author's name and return to their version if you need to compare.
  • You can rename your forked copy by clicking the title at the top left and typing a new name.
  • If you cannot see a Fork button, the project owner may have disabled forking, and you will need to copy the code manually instead.
  • Manual copying means selecting all the code in each tab (HTML, CSS, JavaScript), pasting it into a new CodePen project, and saving it under your account.

What happens when you fork a CodePen project

When you click Fork, CodePen creates a brand-new project in your account with all the same code. The copy is completely separate — changes you make do not affect the original, and the original author cannot see your edits. CodePen does keep a small link showing which project you forked from, visible in your project's settings, but this is just for reference.

The forked project gets a new URL, a new project ID, and appears in your own CodePen dashboard under "My Pens". If the original project was public, your fork is also public by default, though you can change this in the project settings. The author receives no notification that you forked their work, but they can see fork counts on their own project page if they look.

Copying code manually if forking is disabled

Some CodePen projects have forking turned off by the owner. If you click where the Fork button should be and see nothing, or if you want to copy a project without keeping the link to the original, you can copy the code by hand.

Open the project and look at the three tabs at the top of the editor: HTML, CSS, and JavaScript. Click the HTML tab first. Select all the code in that section (use Ctrl+A on Windows or Command+A on Mac), then copy it (Ctrl+C or Command+C). Open a new CodePen project or create one by going to CodePen.io and clicking "Create" in the top menu. Paste the HTML code into the HTML section of your new project.

Repeat this for the CSS tab and the JavaScript tab. Click each tab in the original project, select all, copy, then paste into the matching tab in your new project. When all three sections are filled in, your new project will look and work the same as the original. Save your project by clicking the Save button or pressing Ctrl+S (Command+S on Mac).

Renaming and organizing your copied project

After you fork or manually copy a project, you probably want to give it a name that makes sense for what you are doing. Click the project title at the top left of the editor — it is usually something like "Pen" or the original project's name. A text field appears where you can type a new name. Type your new title and press Enter to save it.

You can also add a description to help you remember what the project is for. Click the information icon (a small "i" in a circle) next to the title, and a panel opens where you can write a description, add tags, and change other settings. Tags are useful if you plan to copy many projects — you can tag them by topic (like "animation" or "form practice") and search for them later in your dashboard.

Understanding CodePen project visibility and sharing

When you fork a project, CodePen sets your copy to the same visibility as the original. If the original was public, your fork is public, which means anyone with the link can view and fork your copy. If you want to keep your work private, click the Settings button (a gear icon) in the bottom right, scroll to "Visibility", and change it to "Private". Private projects are only visible to you unless you share the link with someone specific.

You can also change visibility to "Unlisted", which means the project does not show up in search results or on your public profile, but anyone with the direct link can still see it. This is useful if you want to share a project with someone without making it fully public. These settings do not affect the original project — changing your fork's visibility does not change the author's project.

Editing your copied project without breaking it

Once you have forked or copied a project, you own it completely and can change anything. A common worry is accidentally breaking the code, but CodePen saves your work automatically, so you can always undo changes. Press Ctrl+Z (Command+Z on Mac) to undo your last edit, or press it multiple times to go back several steps.

If you make a mess and want to start over, you can delete your copy and fork the original again. Click Settings, scroll to the bottom, and click "Delete Pen". CodePen will ask you to confirm. After you delete it, go back to the original project and fork it again to get a fresh copy. You can also keep both versions — your edited one and a fresh fork — so you have a reference if you need it.

Frequently Asked Questions

Can the original author see my changes to a forked project?

No. When you fork a project, your copy is completely separate. The author cannot see your edits, and you cannot accidentally change their original work. They can see that their project was forked, but not what you did with your copy.

What if I want to copy a project but do not want it linked to the original?

Copy the code manually instead of using Fork. Select all the code from each tab (HTML, CSS, JavaScript), paste it into a new CodePen project, and save it. This creates a copy with no link to the original, though the code will be identical.

Do I need a CodePen account to fork a project?

Yes. You must be logged into a CodePen account to fork. If you do not have an account, you can create one free at CodePen.io. After you sign up and log in, the Fork button will appear on any public project.

Can I fork a project that is private or belongs to someone else?

You can only fork projects that are public. Private projects do not have a Fork button visible to other users. If you want to work with someone's private project, ask them to share it with you or make it public temporarily.

What is the difference between forking and downloading the code?

Forking creates a copy inside CodePen that you can edit in the browser when ready. Downloading exports the code as files to your computer, which you would then need to open in a text editor or upload elsewhere. Forking is faster if you want to work in CodePen.