Home/Online IDE/CodePen
Updated on: February 27, 2021
What is CodePen ?
CodePen - Online IDE : SaaSworthy.com
View Gallery
96% The SW Score ranks the products within a particular category on a variety of parameters, to provide a definite ranking system. Read More

CodePen

The best place to build and discover front end code
(20 Ratings) Write Review

CodePen is a social development environment for front-end designers and developers. Build and deploy a website, show off your work, build test cases to learn and debug, and find inspiration. Get work done quicker by building out entire projects or isolating code to test features and animations. Become a part of the most active front-end community in the world by sharing work. Browse and share work from world-class designers and developers in the front-end community. Nobody can see your private stuff until you want them to, because they are at secret unguessable, non-searchable, non-indexable URLs.

CodePen Features Show All Features

CodePen Technical details

Support Online Customer Type Individuals Large Enterprises Medium Business Small Business
API Location / Phone Number Bend, Oregon
Deployment SaaS/Web/Cloud Category Online IDE

CodePen Pricing

Pricing ModelFreemium , Subscription
MONTHLY YEARLY
Free
Free

Features

  • Unlimited public Pens and Collections
  • Unlimited templates
  • Debug view (requires log in)
  • 1 Embed theme
  • 1 project with 10 files
Annual Starter
$8 /Month

$8 per month billed yearly

$96 billed yearly

Features

  • Unlimited public and private Pens and Collections
  • Unlimited templates
  • No-Login Pen Debug View
  • Live View
  • PRO badge
  • Unlimited embed themes with custom CSS
  • Higher standing in the popularity algorithm
  • Feature a Pen in your profile header
  • See no ads on CodePen
  • 10 Projects with 50 files/project
  • 1 deployed Project
  • 2 person Collab Mode (Pens only)
  • 10 person Professor Mode (Pens only)
  • Asset hosting with 1 GB total storage
Annual Developer
$12 /Month

$12 per month billed yearly

$144 billed yearly

Feature

  • Unlimited public and private Pens and Collections
  • Unlimited templates
  • No-Login Pen Debug View
  • Live View
  • PRO badge
  • Unlimited embed themes with custom CSS
  • Higher standing in the popularity algorithm
  • Feature a Pen in your profile header
  • See no ads on CodePen
  • Use your own domain for Projects
  • 25 Projects with 150 files/Project
  • 5 deployed Projects
  • 6 person Collab Mode (Pens only)
  • 35 person Professor Mode (Pens only)
  • Asset hosting with 5 GB total storage
Annual Super
$26 /Month

$12 per month billed yearly

$312 billed yearly

Features

  • Unlimited public and private Pens and Collections
  • Unlimited templates
  • No-Login Pen Debug View
  • Live View
  • PRO badge
  • Unlimited embed themes with custom CSS
  • Higher standing in the popularity algorithm
  • Feature a Pen in your profile header
  • See no ads on CodePen
  • Use your own domain for Projects
  • 50 projects with 300 files/project
  • 20 deployed Projects
  • 10 person Collab Mode (Pens only)
  • 100 person Professor Mode (Pens only)
  • Asset hosting with 10 GB total storage
Annual Super Team (For Team)
$12 /User/Month
Billed Yearly

$12 per member per month billed monthly total $38 per month

$288 billed yearly

Features

  • Team Size: 2
  • Team account features
    • All Team Members share access to the Team Account, which has its own profile. That way everyone can work together, sharing access to editing Pens, Projects, Posts, Collections, and Assets.
    • Unlimited public and private Pens, Posts, and Collections
    • Unlimited templates
    • Debug View (no login required)
    • Live View
    • PRO badge
    • Unlimited embed themes with custom CSS
    • Higher standing in the popularity algorithm
    • See no ads on CodePen
    • 10 person Collab Mode (Pens only)
    • 35 person Professor Mode (Pens only)
    • Asset hosting with 10 GB total storage
    • 40 Projects with 300 files/project (20 Projects/member)
    • 20 deployed Projects (10 per Team member)
    • Use your own domain for 20 Projects (10 per Team member)
  • Team member features
    • Unlimited public and private Pens, Posts, and Collections
    • Unlimited templates
    • Debug View (no log in required)
    • Live View
    • PRO badge
    • Unlimited embed themes with custom CSS
    • Higher standing in the popularity algorithm
    • Feature a Pen in your profile header
    • See no ads on CodePen
    • 6 person Collab Mode (Pens only)
    • 35 person Professor Mode (Pens only)
    • Asset hosting with 5 GB total storage
    • 25 projects with 150 files/Project
    • 5 deployed Projects
    • Use your own domain for Projects
Screenshot of the Vendor Pricing Page
View Full Screen

Disclaimer: The pricing details were last updated on 30/03/2020 from the vendor website and may be different from actual. Please confirm with the vendor website before purchasing.

CodePen FAQs

CodePen is Online IDE. CodePen offers the following functionalities:

  • Drag and Drop
  • Chat (Messaging)
  • Source code editor
  • Debugger
  • Real-time Collaboration
  • Code Completion
  • Syntax Highlighting

Learn more about CodePen features.

The pricing for CodePen starts at $8.00 per month. CodePen has 4 different plans:

  • Annual Starter at $8.00 per month.
  • Annual Developer at $12.00 per month.
  • Annual Super Team (For Team) at $19.00 per user per month.
  • Annual Super at $26.00 per month.
    • CodePen also offers a Free Plan with limited features.

      Learn more about CodePen pricing.

Yes, CodePen offers a free plan.

Learn more about CodePen pricing.

Yes, CodePen provides API.

Ask the Community View Community

CodePen Alternatives CodePen Alternatives

88% The SW Score ranks the products within a particular category on a variety of parameters, to provide a definite ranking system. Read More
CodeSandbox
CodeSandbox
CodeSandbox software is a platform used to build code online with powerful IDE. The software offers tools to work on code and edit sandboxes with collaborators...
Visit Website
CodePen vs CodeSandbox
90% The SW Score ranks the products within a particular category on a variety of parameters, to provide a definite ranking system. Read More
Repl.it
(14 RATINGS)
Repl.it
Repl.it is a simple online compiler, IDE, interpreter, and REPL. Code live together with a solid community of programmers, in public and private repls. Share a...
Visit Website
CodePen vs Repl.it
98% The SW Score ranks the products within a particular category on a variety of parameters, to provide a definite ranking system. Read More
IntelliJ IDEA
(2557 RATINGS)
IntelliJ IDEA
IntelliJ IDEA features a proficient IDE (Integrated development environment) for web, mobile and enterprise development. It provides the developers with...
Visit Website
CodePen vs IntelliJ IDEA
97% The SW Score ranks the products within a particular category on a variety of parameters, to provide a definite ranking system. Read More
AWS Cloud9
(136 RATINGS)
AWS Cloud9
AWS Cloud9 IDE software comes designed with collaborative coding tools and extends its support to over 40 languages. Users can enjoy real-time collaboration...
Visit Website
CodePen vs AWS Cloud9
97% The SW Score ranks the products within a particular category on a variety of parameters, to provide a definite ranking system. Read More
Eclipse Che
(2183 RATINGS)
Eclipse Che
Eclipse Che is a Cloud Integrated development environment software with developer workspace server for teams and organizations. It lets you create workspaces...
Visit Website
CodePen vs Eclipse Che
96% The SW Score ranks the products within a particular category on a variety of parameters, to provide a definite ranking system. Read More
Visual Studio IDE
(2575 RATINGS)
Visual Studio IDE
Microsoft’s Visual Studio is an integrated development environment and coding editor that helps your developers write and fix code. It’s made up of four...
Visit Website
CodePen vs Visual Studio IDE
92% The SW Score ranks the products within a particular category on a variety of parameters, to provide a definite ranking system. Read More
Codenvy
(515 RATINGS)
Codenvy
A cloud IDE (Integrated Development Environment) designed for Teams, Developers, DevOps and Enterprises to assist them in coding, creating and debugging...
Visit Website
92% The SW Score ranks the products within a particular category on a variety of parameters, to provide a definite ranking system. Read More
Codeanywhere
Codeanywhere
Codeanywhere IDE software is considered to highly suitable for enjoying full terminal access. Users can connect and shift development files from their Google...
Visit Website
CodePen vs Codeanywhere
91% The SW Score ranks the products within a particular category on a variety of parameters, to provide a definite ranking system. Read More
Koding
(7 RATINGS)
Koding
Koding cloud-based IDE software supports all types of programming languages and databases. This software provides its users with the ability to link their...
Visit Website
CodePen vs Koding
86% The SW Score ranks the products within a particular category on a variety of parameters, to provide a definite ranking system. Read More
SourceLevel
SourceLevel
SourceLevel helps the team to focus on what’s important and deliver better software via Continuous Static Analysis and GitHub’s Pull Requests brought to by...
Visit Website
CodePen vs SourceLevel

CodePen Reviews

OVERALL RATING
4.5
Based on 20 Rating(s)
Rating Distribution
  • 80 %
  • 20 %
  • 0 %
  • 0 %
  • 0 %
SHARE YOUR EXPERIENCE Write a Review
Sort By
Filter by Source
jonathan vigrenSource : trustpilot.com
(Reviewed on 14 September 2020)
Awesome customer support

This is a bit late of a review, but they deserve it, they provide an amazing service as well as amazing customer service. Something went wrong when I wanted to subscribe to their pro thingy and instead of monthly billing it went with annual billing, 99% sure I chose monthly though, but anyways, I was short on money and could not afford the annual option at that time, despite not having to they were really nice and gave me a refund for that, it might not sound like much but it was greatly appreciated and I am very grateful, I am now subscribing monthly and will continue to do so

...more
Alirio PSource : g2crowd.com
(Reviewed on 05 May 2020)
"A completely free and intuitive cloud development environment"

What do you like best?

What I liked most about CodePen is that it supports a wide variety of programming languages. Another feature that I like is that I can see other people's projects and use them as examples for future developments. Also, it is a totally free platform.

What do you dislike?

I have never found errors or defects in CodePen. Nor do I consider that there are characteristics that need to be improved, it is a very stable and powerful platform.

Recommendations to others considering the product:

CodePen is a great tool for testing and developing websites. I recommend it for being a totally free platform.

What problems are you solving with the product? What benefits have you realized?

I use CodePen to validate the code of our organization's website before uploading it to the web server. Previously we had to view website errors when it was already published, making the process of making improvements more cumbersome. In addition, it is an excellent tool to collaborate in the development of other projects and take ideas from the people who publish their websites.

...more
Aaron CSource : g2crowd.com
(Reviewed on 23 April 2020)
"The ideal sandbox to quickly test your code, save it, or even publish it for the wider community."

What do you like best?

CodePen's UI is amazingly intuitive and allows the user to quickly test their code snippets or even much more complex implementations. It allows to easily import any JS library you can find a link for and is quick to update itself while you write to see the results as you code it. Just Great!

What do you dislike?

While there are certain feature to come and aspects missing or could be potentially improved, there is really nothing to dislike, and I have come across some points in other competitor apps but CodePen is just a job well done.

Recommendations to others considering the product:

I've been using jsFiddle and other tool simultaneously for many years, as is my usual approach involving a long period of testing and searching to find the tool that ultimately survives the trials and meets my personal criteria in terms of functionality, usability, feature-richness and, general likability.

CodePen survived my harsh trails after many years of competing against other tools for exclusivity in my workflow, and it won with flying colors! I have become an authentic fan of the tool and although it might not be indispensable for my work I still love using it and it certainly eases up the development process; dare I say even it accelerates it.

I can only recommend this tool to any and all web developers and designers out there. It mades my workflow so much easier!

What problems are you solving with the product? What benefits have you realized?

I am often confronted with CSS and JS problems which I need to validate before implementation on my sites, and need to test. CodePen is perfect for this and allows me to sort out the bugs and issues before going straight to production.

...more
Pierre F.Source : trustpilot.com
(Reviewed on 05 February 2020)
Excellent platform

Excellent platform. I've created more than 70 pens so far, one has passed 110,000 views! It's a real playground where I can test all kinds of code snippets. Thanks, CodePen ^^

...more
sarath kSource : g2crowd.com
(Reviewed on 20 November 2019)
"A Webdev IDE in seconds"

What do you like best?

HTML, CSS and Javascript are an integral part of a full stack developers life and Codepen enables me to do it easily. Here are my top picks for my likes:

Sharing code snippets made easy: Codepen is the quickest way to put together a bunch of HTML, CSS and JS code and share it with anyone in the world.

Multiple CSS preprocessors: SCSS and LESS are two of the most popular code preprocessors and thankfully Codepen lets me do this without any fuss. Someone without SCSS installed in their computer can easily go to codepen.io and get a SCSS preprocessor.

Access to JS console: As one can see in codepen's interface we have access to a javascript interpreter. This comes in handy for running small javascript code and getting outputs of those snippets.

Storing assets: The pro plan in code pen lets me store assets and resources that can be stored securely and that can be accessed from anywhere.

Support for private pens: Codepen gives user's the ability to share the snippets created with anyone in the world in a private manner.

What do you dislike?

There aren't many drawbacks. The price of the pro plan is a bit too expensive.

Recommendations to others considering the product:

Live Weave is another free alternative to codepen

What problems are you solving with the product? What benefits have you realized?

It helps me share code swiftly with anyone

...more
rahul rSource : g2crowd.com
(Reviewed on 13 November 2019)
"amazing code collection"

What do you like best?

codepen is an environment that is both for learning and development purpose. wecan share our on developed codes for any one those who need it as prime or free of cost. and each user can test our code or there own code here live and edit our codes to check whether they meet there requirements if yes then she/he can easily use it.

it support many languages such as html,javascript, jquery and so on.

What do you dislike?

no dislikes at all its nice and gives me full freedom to test my code and use it

Recommendations to others considering the product:

great tool for developers, designers etc

What problems are you solving with the product? What benefits have you realized?

copying codes from others shared in codepen and use it in my application up on my needs

...more
User in InternetSource : g2crowd.com
(Reviewed on 30 July 2019)
"Great resource for new & experienced coders"

What do you like best?

I like that it's like code sharing. As a beginner, you rarely see how some things interact in your code and it's definitely helpful to build off other people's code. It's also just amazing to see some of the stuff the experts can create as part of a challenge. I've used code samples in some of our email campaigns.

What do you dislike?

Some of the stuff is more "just for fun" so it's a lot to sort through if you're looking for specific elements you want to work in, in a professional way.

What problems are you solving with the product? What benefits have you realized?

Testing new and innovative code ideas.

...more
User in Professional Training & CoachingSource : g2crowd.com
(Reviewed on 26 May 2019)
"Great code playground "

What do you like best?

I really like the open source platform and the weekly challenges

What do you dislike?

I don’t like the layout, I wish it was set up differently

What problems are you solving with the product? What benefits have you realized?

Ability to see solutions people have created all over the world

...more
User in ResearchSource : g2crowd.com
(Reviewed on 26 May 2019)
"Must have tool for coding interviews"

What do you like best?

I have used codepen primarily for coding interviews. It was a breeze and the remote login feature is similar to a google doc but for coding. You have the other user (even from the other end of the world coding real time)

What do you dislike?

It needs an IDE to run, only if there was the ability to execute it would be ideal.

Recommendations to others considering the product:

Google doc for coding interviews

What problems are you solving with the product? What benefits have you realized?

Interviews and real time coding evaluation

...more
Chase GSource : g2crowd.com
(Reviewed on 14 May 2019)
"Great SandBox for learning and teaching alike."

What do you like best?

I enjoy that there is the option to have "Live Coding" sessions so that students can follow along in real time on their browser.

What do you dislike?

Over all this sandbox is very well designed, but it does take a little getting used to with their file structure as far as personal forked projects go.

Recommendations to others considering the product:

Take some time to really learn about all the features of CodePen, it will be worth your time.

What problems are you solving with the product? What benefits have you realized?

Learning in a group setting in real time!

...more
Read All Reviews

Videos on CodePen

Asset Hosting on CodePen PRO
Asset Hosting on CodePen PRO
CodePen Pen Exports (with Build Process!)
Using CodePen's Live View
How Privacy Works on CodePen

CodePen Screenshots

Embed
Education
Editor Privacy
Collab Mode
Build Entire Projects
Embed
Embed
Education
Editor Privacy
Collab Mode
Build Entire Projects

Customers

Airbnb
Netflix
Grubhub
IBM