- Home
- Coding Playgrounds
- CodePen
CodePen
CodePen · Bend, Oregon, United States · founded 2012
What it is
CodePen is a web-based workspace for front-end designers and developers to create, preview, share, and deploy code. In a Pen, users write HTML, CSS, and JavaScript and see changes in a browser preview. The editor supports HTML preprocessors such as Markdown, Haml, Slim, and Pug, as well as CSS preprocessors including Sass, Less, Stylus, and PostCSS. Users can add external resources, reuse other Pens, find libraries through CDNjs, and process bare npm package imports. CodePen 2.0 includes automatic preprocessing, file systems, version history, collaboration, and one-click Pen deployment. Pens can be embedded on other websites, and the service documents a REST API and embed options. Pens and Projects are public by default; PRO private Pens and Collections are hidden from public search and profiles, but anyone with their shared URL can view them without logging in. The free plan includes unlimited public Pens and three files per Pen. Starter costs $8 a month, billed at $96/year. CodePen also offers Developer at $12 a month and Super at $26 a month, each billed annually. It runs on the web and does not offer self-hosting.
For and against
For
- Live browser previews for HTML, CSS, and JavaScript
- Supports multiple HTML and CSS preprocessors
- Can embed Pens on other websites
- Free plan includes unlimited public Pens
- Team members can edit Team Pens together
Against
- Pens and Projects are public by default
- Shared private URLs work without logging in
- No self-hosted version is offered
- Free Pens are limited to three files each
The verdict
CodePen combines a browser editor, live previews, sharing, and deployment tools for front-end work. Consider its public-by-default content model and lack of self-hosting before choosing it for private or internally hosted projects.
Who it suits
CodePen suits developers at different skill levels, including people learning to code, and teams using front-end code for prototypes, debugging, client review, hiring, or portfolios. It may also fit users who want to share work publicly or collaborate on team Pens.
Plans and prices
Free
Unlimited Public Pens · 3 files per Pen
Read 30 Sep 2026 · codepen.io
Starter
50 files per Pen · 5 MB media files · 2 GB asset hosting · 5 collaborators
Read 30 Sep 2026 · codepen.io
Developer
150 files per Pen · 20 MB media files · 25 GB asset hosting · 10 collaborators
Read 30 Sep 2026 · codepen.io
Super
300 files per Pen · 30 MB media files · 50 GB asset hosting · 15 collaborators
Read 30 Sep 2026 · codepen.io
On the record
- Browser editor
- Pens let users write HTML, CSS, and JavaScript with a real-time preview in the browser.codepen.io · read 30 Sep 2026
- CodePen 2.0
- The CodePen 2.0 editor supports automatic preprocessing, live previews, file systems, version history, collaboration, and one-click Pen deployment.blog.codepen.io · read 30 Sep 2026
- Embeds and API
- Pens can be embedded on other websites, and CodePen documents a basic REST API, POST-to-prefill, oEmbed, and prefill embeds.blog.codepen.io · read 30 Sep 2026
- Integrations
- Users can add external CSS and JavaScript resources, use other Pens as resources, and search for JavaScript and CSS libraries from CDNjs.blog.codepen.io · read 30 Sep 2026
- Intended users
- CodePen describes itself as useful for developers of any skill and particularly empowering for people learning to code, as well as for prototyping, debugging, client review, hiring, and portfolios.codepen.io · read 30 Sep 2026
- npm packages
- CodePen's compiler can process bare npm package imports with import maps, and package search is powered by the jsDelivr API.blog.codepen.io · read 30 Sep 2026
- Preprocessors
- CodePen supports HTML preprocessors including Markdown, Haml, Slim, and Pug, and CSS preprocessors including Sass, Less, Stylus, and PostCSS.codepen.io · read 30 Sep 2026
- Private content
- PRO private Pens and Collections are hidden from public search and profiles, but anyone with the unguessable shared URL can view them without logging in; CodePen says this is not enterprise-level security.codepen.io · read 30 Sep 2026
- Private projects
- Yescodepen.io · read 20 Sep 2026
- Public content
- Pens and Projects are public by default, and the privacy policy says public Pens and Projects are automatically licensed under MIT.blog.codepen.io · read 30 Sep 2026
- Purpose
- CodePen is a social development environment for front-end designers and developers to build, test, deploy, share, and discover front-end code.codepen.io · read 30 Sep 2026
- Security
- CodePen says it uses security processes, firewalls, and generally available security technologies, and states that it cannot guarantee data security from intrusion or unauthorized release.blog.codepen.io · read 30 Sep 2026
- Self-hosting limit
- CodePen states that it does not offer a self-hosted version.codepen.io · read 30 Sep 2026
- Support
- CodePen directs users to its documentation and an online support form, and lists [email protected] as a contact address.codepen.io · read 30 Sep 2026
- Team collaboration
- Teams share Pens, Collections, Assets, and billing, and team members get PRO features and can edit Team Pens together.codepen.io · read 30 Sep 2026
