CodePen

About CodePen

CodePen is an online code editor and social development environment for designers and developers to build, test, and share front-end code directly in the browser. It supports HTML, CSS, and JavaScript along with additional languages such as Sass, TypeScript, JSX, and Tailwind, which are processed automatically through the CodePen Compiler without requiring local installation or configuration. Users can add multiple files and folders to a project, start from community or personal templates, and receive an instant live preview as they type, along with in-editor error diagnostics.

The platform allows any project (called a "Pen") to be published to a live URL in one click, with access controls ranging from fully public to password-protected or hidden. It supports uploading assets such as images and fonts for direct use within a Pen, and it automatically saves version history, allowing users to view and roll back to previous versions of their work.

CodePen includes profile pages for sharing work, Collections for organizing projects, and privacy settings for keeping work private. It also supports real-time and asynchronous collaboration, allowing multiple people to work on the same Pen together and see changes as they happen.

Key features

• Online code editor supporting HTML, CSS, JS plus Sass, TypeScript, Vue, JSX and more via the CodePen Compiler
• Instant live preview with automatic asset hashing and caching
• One-click deployment of any Pen to a live URL, no server setup or DNS required
• Privacy and access controls including password protection and hidden Pens
• Real-time collaborative editing with teammates
• Version history for every save, with rollback to any prior version

Frequently asked questions