codpen
Back to editor

CodPen user guide

This page explains the main CodPen workflows, from file management to saving and sharing projects.

1

Getting started with CodPen

  • CodPen is an online environment for building React, Angular, and HTML/CSS/JS projects. Choose the project type in the editor, name the project, and start coding.
  • Sign in to save projects. After saving, your project is available from your profile and the projects page.
2

Create files and folders

  • Right-click an empty space or a folder in the file panel and choose New File or New Folder.
  • Creating from a folder places the file inside that folder. Creating from the project root places the file or folder at the project root.
  • React files usually stay under /src, while Vanilla projects can use any HTML, CSS, and JS structure you prefer.
3

Delete files and folders

  • Right-click the target file or folder and choose Delete. The browser asks for confirmation before deletion.
  • Deleting a folder also deletes every file inside it, so make sure no important file remains there before confirming.
  • To delete a saved project completely, open your profile and use the trash button on the project card.
4

Rename files and folders

  • Right-click a file or folder and choose Rename. Enter the new name to move the file path or all folder contents to the new path.
  • Remember file extensions when renaming, such as App.jsx, styles.css, or index.html.
5

Run projects

  • The live preview appears beside the editor and updates as files change.
  • If the project has errors, the Sandpack console and error messages help you find the issue. Check import paths and filenames carefully.
6

Save projects

  • After signing in, enter the project name in the editor header and press Save.
  • If the project already exists, the next save updates it. New projects receive a new identifier.
  • Saved projects are visible and editable from the projects section of your profile.
7

Share projects

  • After saving, press Share Link to copy the share URL to your clipboard.
  • You can also open the share page from your profile.
  • Whenever you edit and save again, the same share link shows the latest saved version.
8

Edit account information

  • Open Edit information from your profile sidebar to change your username, profile image, and password.
  • To change the password, enter the current and new password. Leave password fields empty if you do not want to change it.