The Editor View of your project is where the work happens! In Editor View, you can set up your Project settings, write your code, and preview your project as you build it.

Header Controls

Project Title

The project’s title is displayed at the far left. You can edit your project title by clicking the pencil icon at the right of the title.

Save and Run buttons

By default, every time you save your project runs and automatically updates the preview. You can save and run your project by clicking the “Save All + Run” button.

You can also use the keyboard shortcut to save your current file (Command + S for Mac, CTRL + S for PC).

If you don’t want to update your project preview on each save, you can enable a separate Run button in your Project Settings. Set the radio button under “Preview Updating” to “I want to use a run button to update”.

After you save that setting, a “Run” button and “Save All” button will appear in the header.

Fork

The Fork button creates a new, complete copy of the Project you’re viewing. You can fork your own Projects or other members’ public Projects. Forks count against your total Project allowance for your account.

For more information on how forks work on CodePen, see our Forks documentation.

Project Settings

Code Indentation

Choose spaces or tabs, and set the width of the indent.

Preview Updating

By default, your project runs automatically and updates the preview each time you save. Set this setting to “I want to use a run button to update” if you prefer to update your preview manually.

Processing Settings

Here you can enable or disable Babel for your JS files, and Autoprefixer for your CSS files. You can also elect to create minified versions of your files here. Read more about preprocessors and file processing in File Processing in Projects.

Project Title

Here you can add a title to your Project, or edit the existing title.

URL Slug

The URL slug for your project is text at the very end of the URL. By default your Project will get a random slug, but you can use a custom slug to make the URL descriptive, or at least more memorable.

Project Description

Here’s where you can tell the world about your project! The text in your Project description is searchable. Good descriptions make it easier for people to find your Project. Markdown is supported in this field.

Project Root

All of your Project’s files live in the Project Root. You can add, move, and remove files and directories within your Project in this area. For all the details on interacting with directories and files, see the documentation for Directories and Files.

Code Editor

This is where the coding happens! Your open files are shown in the editor panel. If you have more than one file open, you’ll see tabs for each open file at the top of the editor panel.

Preview Panel

The Preview panel updates when you save and run your code. You can choose which page of your Project to view from the dropdown menu at the top of the preview panel.

You can resize, maximize, or close the preview panel by dragging the grab bar at the top of the preview.

  • Assets – you can use assets from your Asset Hosting in projects too. The “Assets” button opens the asset drawer
  • Shortcuts – this panel shows you all the available keyboard shortcuts for your OS.
  • Delete – opens the delete confirmation window. Deleting a project is permanent and cannot be undone.
  • Share – share a link to your Project on social media, or copy the direct URL to the Project.
  • Export – export a .zip file of all of the directories and files in your Project.
  • Deploy – deploy your Project to a launch a “production” version of your Project on a standalone URL.
Was this article helpful?
YesNo