CodPen.ir

Documentation · Updated guide

CodPen user guide

Learn how to create, preview, save, improve with AI, restore, share, and push Vanilla, React, Next.js, and Angular projects from CodPen to GitHub.

01

Start a project

Choose the right starter and begin coding in seconds.

  1. 1Open the editor and choose Vanilla, React, Next.js, or Angular. Each mode starts with a compatible file structure and browser runtime.
  2. 2Vanilla is ideal for HTML, CSS, and JavaScript experiments. Choose a framework template when you need its components, routing, or project conventions.
  3. 3You can code and preview without an account. Sign in with email and password or Google when you want to save and manage projects.
02

Manage files and folders

Create, rename, organize, and remove project files.

  1. 1Right-click the file panel, a file, or a folder to create, rename, or delete items. New items are placed inside the folder you selected.
  2. 2Keep the file extension when renaming and use absolute-style paths such as /src/App.jsx. Deleting a folder also removes every file inside it.
  3. 3File changes stay in the current editor session until you save the project.
03

Use live preview and console

See the result immediately and diagnose runtime errors.

  1. 1The Sandpack preview recompiles the current files as you edit. The console shows logs, warnings, and runtime errors beside your code.
  2. 2When a preview fails, check import paths, filename casing, syntax, and the console message. Preview errors do not overwrite the saved project.
04

Improve code with the AI assistant

Ask questions, review a proposal, and apply only approved files.

  1. 1Open AI from the editor and describe the result or issue. The assistant can explain code and prepare a structured proposal to create, update, or delete files.
  2. 2Review the proposed diff and approve only the files you want. AI proposals remain separate from your project until you explicitly apply them.
  3. 3After applying a proposal, use Undo AI changes to return to the exact pre-apply file state. Saved projects also receive a private “Before AI changes” checkpoint.
05

Save and manage projects

Keep projects in your account and control their visibility.

  1. 1Sign in, enter a project title, and select Save. The first save creates a project; later saves update the same project.
  2. 2Open your profile to edit, delete, or switch a project between public and private. Free accounts can keep up to three saved projects.
  3. 3Project ownership is checked on the server, and private projects are available only to their owner.
06

Review and restore version history

Compare saved checkpoints and safely return to an earlier state.

  1. 1For a saved project, open the editor menu and select History. Manual saves create a new version only when the stored project content has changed.
  2. 2Select a version to see added, modified, and deleted files in a split or inline Monaco diff, including line additions and deletions.
  3. 3Restore replaces the project with that snapshot after confirmation. CodPen first creates a private “Before restore” checkpoint so the previous state remains recoverable.
07

Push a project to GitHub

Connect your personal account and export the current files in one commit.

  1. 1Sign in to CodPen, then select Push to GitHub from the editor toolbar or menu. If needed, connect your personal GitHub account in the popup without leaving the editor.
  2. 2Enter a repository name and commit message. For a new repository, you can also choose its visibility and description; an existing repository keeps its current visibility.
  3. 3CodPen pushes every file currently in the editor—even unsaved changes—in one commit. In an existing repository, files outside the CodPen project remain untouched.
08

Publish, share, and embed

Give others a live view of a public project.

  1. 1Save the project and make it public before sharing. Use Share Link in the editor or open the share page from your profile.
  2. 2The stable share URL displays the latest saved version. Private projects are not exposed through public share routes.
  3. 3The share page also provides iframe embed code for placing the runnable preview inside a website or article.
09

Manage your account

Update profile details and recover account access.

  1. 1From your profile, update your username and profile image. Password accounts can change their password by entering the current and new password.
  2. 2Use Forgot password on the login page to request a reset link. Google sign-in is also available for a faster sign-in flow.

Frequently asked questions

Quick answers to common questions about saving, AI changes, version history, sharing, and GitHub export.

Can I use CodPen without installing anything?

Yes. The editor, project runtime, live preview, and console run in the browser.

Does the AI assistant change my code automatically?

No. Proposed file changes stay separate until you review, approve, and apply them.

Can I recover an older saved version?

Yes. Open History, inspect its diff, and restore it after confirmation. CodPen saves the current state before restoring.

Can I push unsaved changes to GitHub?

Yes. GitHub export uses the files currently open in the editor, so it does not require saving the project to CodPen first. You must be signed in and connect your GitHub account.

Who can view a shared project?

Only public projects are available through share and embed pages. Private projects remain owner-only.

Ready to build your next project?

Open the browser editor, choose a template, and see your changes live—no local setup required.

Start coding