Learn CODEPEN with Real Code Examples

No installation required; open CodePen in a modern browser

Create a free account to save Pens and Projects

Optional Pro subscription for advanced features

Set up editor preferences and theme

Start coding directly in the browser

Open CodePen in a modern web browser

Sign in or create an account

Configure editor settings (theme, preprocessors)

Start a Pen or Project

Use Settings to include external libraries

Project files: HTML, CSS, JS

Optional asset files: images, fonts, icons

Settings for libraries, preprocessors, meta info

Exported ZIP for offline use

Pro Projects include multiple files and folders

None required; entirely browser-based

Optional local export to run on personal machine

GitHub import/export via web interface

Console for debugging JavaScript in browser

Pro collaboration commands handled via UI

UI available in multiple languages

Unicode support in code and comments

Community contributions for tutorials

Global sharing of Pens

Supports localized keyboard input for coding

Accessible in modern browsers

Keyboard navigation and shortcuts

Responsive UI for multiple devices

Supports screen readers for basic navigation

Learning and collaboration features are browser-based

Editor panels for code input

Preview pane for live rendering

Responsive design for desktops and tablets

Syntax highlighting and themes in editor

Drag-and-drop asset management for Pro users

All state managed in browser and cloud storage

Changes auto-saved to account

Variables and DOM elements maintain runtime state

Collab Mode syncs state across users

Preview updates reflect code changes instantly

Project files stored in CodePen cloud

Assets can be uploaded and linked

External libraries managed via CDN

Pro Projects support multi-file organization

Exportable code for offline use