CodPen.ir

Documentation · Updated guide

CodPen user guide

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

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

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.
08

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, and sharing.

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.

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