CodePen

Name: CodePen
Author: CodePen

Free plan APIWeb

What CodePen is

CodePen is a browser-based social development environment for creating, testing, deploying, sharing, and discovering front-end code. Its Pens let users write HTML, CSS, and JavaScript with a real-time browser preview. It supports HTML preprocessors such as Markdown, Haml, Slim, and Pug, along with CSS preprocessors including Sass, Less, Stylus, and PostCSS. Users can add external CSS and JavaScript resources, reuse other Pens, find libraries through CDNjs, and process bare npm package imports. The CodePen 2.0 editor supports automatic preprocessing, live previews, file systems, version history, collaboration, and one-click Pen deployment. Pens can be embedded on other websites, and CodePen documents a REST API and other embed options. Pens and Projects are public by default; PRO private Pens and Collections can still be viewed by anyone with the shared URL. The free plan includes unlimited public Pens and three files per Pen. Paid plans start at $8 a month. CodePen runs on the web and does not offer self-hosting.

Who it suits

CodePen suits front-end developers and designers, including people learning to code. Its features also support prototyping, debugging, client review, hiring, portfolios, and team collaboration.

What it does well

Real-time previews for HTML, CSS, and JavaScript.
Supports a range of HTML and CSS preprocessors.
Includes collaboration and version history.
Free plan has unlimited public Pens.
Pens can be embedded on other websites.

What to know first

Pens and Projects are public by default.
Shared URLs let others view private Pens and Collections.
No self-hosted version.

Limits

The Free plan permits unlimited public Pens but limits each Pen to three files. Paid plans list per-Pen file limits from 50 to 300, with privacy controls and asset or media hosting varying by plan.

Plans

Plan	Billed and limits	Price
Free	Unlimited Public Pens · 3 files per Pen	Free
Starter	Billed at $96/year. · 50 files per Pen · 5 MB media files · 2 GB asset hosting · 5 collaborators · Privacy Controls · No ads	$8 a month
Developer	Billed at $144/year. · 150 files per Pen · 20 MB media files · 25 GB asset hosting · 10 collaborators · Privacy Controls · No ads	$12 a month
Super	Billed at $312/year. · 300 files per Pen · 30 MB media files · 50 GB asset hosting · 15 collaborators · Privacy Controls · No ads	$26 a month

As codepen.io lists them, read 30 Sept 2026. The maker's own page has the final word.

Getting started

Open https://codepen.io/.
Create a Pen in the browser editor and add HTML, CSS, or JavaScript.
Use supported preprocessors or add external resources and libraries as needed.
Share or embed a Pen, or use a documented API or embed option.
Choose Free or a paid plan based on file limits, hosting, collaborators, and privacy controls.

Verdict

CodePen offers a browser-based way to write and share front-end code, with collaboration and deployment tools. Keep its public-by-default content and shared-link visibility in mind when choosing a plan.

Questions

Is CodePen free?

Yes. The Free plan costs nothing and includes unlimited public Pens, with three files per Pen.

What do paid plans cost?

Starter is $8 a month, Developer is $12 a month, and Super is $26 a month. Each is billed annually at the listed yearly amount.

What platforms does CodePen support?

CodePen is available on the web.

Can I make a Pen private?

PRO users can make Pens and Collections private. Anyone with the shared URL can still view them without logging in.

Does CodePen support team collaboration?

Yes. Teams can share Pens, Collections, Assets, and billing, and members can edit Team Pens together.

Can CodePen be self-hosted?

No. CodePen states that it does not offer a self-hosted version.

Facts from CodePen's own pages

Browser editor: Pens let users write HTML, CSS, and JavaScript with a real-time preview in the browser. · codepen.io, 30 Sept 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, 30 Sept 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, 30 Sept 2026
Founded: 2012 · codepen.io, 28 Sept 2026
Free plan: Yes · codepen.io, 20 Sept 2026
Headquarters: Bend, Oregon, United States · codepen.io, 28 Sept 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, 30 Sept 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, 30 Sept 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, 30 Sept 2026
Preprocessors: CodePen supports HTML preprocessors including Markdown, Haml, Slim, and Pug, and CSS preprocessors including Sass, Less, Stylus, and PostCSS. · codepen.io, 30 Sept 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, 30 Sept 2026
Private projects: Yes · codepen.io, 20 Sept 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, 30 Sept 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, 30 Sept 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, 30 Sept 2026
Self-hosting limit: CodePen states that it does not offer a self-hosted version. · codepen.io, 30 Sept 2026
Support: CodePen directs users to its documentation and an online support form, and lists [email protected] as a contact address. · codepen.io, 30 Sept 2026
Team collaboration: Teams share Pens, Collections, Assets, and billing, and team members get PRO features and can edit Team Pens together. · codepen.io, 30 Sept 2026