CodePen
CodePen is a browser-based workspace for creating and sharing front-end code.
What CodePen is
CodePen is a browser-based workspace for creating and sharing front-end code. In a Pen, you can write HTML, CSS, and JavaScript and see a live preview in the browser. It supports HTML preprocessors such as Markdown, Haml, Slim, and Pug, as well as CSS preprocessors including Sass, Less, Stylus, and PostCSS. You can add external resources, reuse other Pens, search for libraries through CDNjs, and import bare npm packages through its compiler. The CodePen 2.0 editor adds automatic preprocessing, file systems, version history, collaboration, and one-click Pen deployment. Pens can be embedded on other sites, and CodePen documents a REST API and several ways to prefill or embed content. Pens and Projects are public by default. PRO users can make Pens and Collections private, but anyone with their shared link can view them without logging in. The free plan includes unlimited public Pens and three files per Pen. CodePen is available on the web and offers an API, but no self-hosted version.
Good
- Live browser previews for HTML, CSS, and JavaScript
- Supports several HTML and CSS preprocessors
- Pens can be embedded on other websites
- Free plan includes unlimited public Pens
Watch out
- Public visibility is the default
- Shared links expose private content without login
- No self-hosted version is offered
Who it suits
CodePen suits front-end developers and designers who want to build, preview, share, or deploy code in a browser. Its public examples and learning-oriented purpose may also suit people learning to code or assembling a portfolio.
Verdict
CodePen brings browser-based editing, live previews, sharing, and deployment together for front-end work. Consider its public-by-default content model and link-based private access before storing sensitive material.
Plans and prices
From CodePen's own pricing page, checked 30 Sep 2026.
| Plan | Price | What it gives you |
|---|---|---|
| Free | Free | Unlimited Public Pens · 3 files per Pen |
| Starter | $8 a month | 50 files per Pen · 5 MB media files · 2 GB asset hosting · 5 collaborators · Privacy Controls · No ads · Billed at $96/year. |
| Developer | $12 a month | 150 files per Pen · 20 MB media files · 25 GB asset hosting · 10 collaborators · Privacy Controls · No ads · Billed at $144/year. |
| Super | $26 a month | 300 files per Pen · 30 MB media files · 50 GB asset hosting · 15 collaborators · Privacy Controls · No ads · Billed at $312/year. |
The facts
Each one read from CodePen's own pages, with the date it was checked.
Where it runs
- Browser editor
- Pens let users write HTML, CSS, and JavaScript with a real-time preview in the browser.checked 30 Sep 2026
What it does
- CodePen 2.0
- The CodePen 2.0 editor supports automatic preprocessing, live previews, file systems, version history, collaboration, and one-click Pen deployment.checked 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.checked 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.checked 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.checked 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.checked 30 Sep 2026
- Preprocessors
- CodePen supports HTML preprocessors including Markdown, Haml, Slim, and Pug, and CSS preprocessors including Sass, Less, Stylus, and PostCSS.checked 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.checked 30 Sep 2026
- Private projects
- Yeschecked 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.checked 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.checked 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.checked 30 Sep 2026
- Self-hosting limit
- CodePen states that it does not offer a self-hosted version.checked 30 Sep 2026
- Support
- CodePen directs users to its documentation and an online support form, and lists [email protected] as a contact address.checked 30 Sep 2026
The company
- Founded
- 2012checked 28 Sep 2026
- Headquarters
- Bend, Oregon, United Stateschecked 28 Sep 2026
- Team collaboration
- Teams share Pens, Collections, Assets, and billing, and team members get PRO features and can edit Team Pens together.checked 30 Sep 2026
Money
- Free plan
- Yeschecked 20 Sep 2026
Alternatives to CodePen
- 1
Replit
Free planAndroidiOSWebLinux9.2From $18 a month - 2
StackBlitz
Free planAndroidiOSWebAPI8.9Free plan - 3
Playcode
Free planAndroidiOSWebAPI8.9From $25 a month - 4
Paperspace Gradient
Free planOpen sourceWebAPIExtensionLinux8.7From $8 a month - 5
GitHub Codespaces
Free planAndroidiOSWebAPI8.6Free plan - 6
JDoodle
Free planAndroidiOSWebAPI8.6From $4 a month