CodePen icon
CodePen icon

CodePen

CodePen is a communal front-end development platform providing real-time HTML, CSS, and JavaScript previews. Users can build projects, test code, and enhance skills through challenges. Features include Presentation Mode for conferences and a vast active community for sharing and discovery.

Auto Updating Previews: As you code, the preview updates automatically. Unless you don't want it to.

Cost / License

  • Freemium (Subscription)
  • Proprietary

Application type

Platforms

  • Online
Build Entire Projects: Projects is the most powerful feature of CodePen. It's a full blown IDE right in the browser, with automatic preprocessing, drag and drop uploading, live previews, website deployment, and much more.
Support For the Way You Code: The CodePen Editor is highly customizable. There is autocomplete and Emmet for speed and accuracy. Plus you can set up smart defaults for starting new work.
+4
Keep Your Pens Private: Nobody can see your private stuff until you want them to, because they are at secret unguessable, non-searchable, non-indexable URLs.
CodePen alternatives  
125likes
70alternatives
0articles

Features

Properties

  1.  Support for Themes

Features

  1.  Live Preview
  2.  Running code
  3.  Sandbox
  4.  HTML/CSS/JS rendering
  5.  Code Formatting
  6.  Autocompletion
  7.  Syntax Highlighting
  8.  No registration required
  9.  Extensible by Plugins/Extensions
  10.  Real time collaboration
  11.  Support for MarkDown
  12.  Dark Mode
  13.  Cloud based
  14.  Script execution
  15.  Easy readable viewpoints
  16.  Pastebin
  17.  NPM
  18.  Support for Javascript
  19.  Support for HTML5
  20.  Vue.js support
  21.  Support for ReactJS
  22.  Javascript scripting
  23.  React
  24. Lodash icon  Lodash Integration
  25.  Live css editing

 Tags

CodePen News & Activities

Highlights All activities

Recent News

No news, maybe you know any news worth sharing?
Share a News Tip

Recent activities

Ad
Screenshot
Replit icon
Replit

In-browser IDE supporting 50+ languages with an AI assistant, real-time collaboration, Git support, hosting, deployment, and live code sharing.

 
Learn More

CodePen information

  • Developed by

    US flagCodePen

  • Licensing

    Proprietary and Freemium product.

  • Pricing

    Subscription ranging between $8 and $26 per month + free version with limited functionality.

  • Alternatives

    70 alternatives listed

  • Badge

    Get an embeddable badge for CodePen

  • Supported Languages

    • English

AlternativeTo Category

Development

Popular alternatives

View all

Top CodePen apps (extensions / mods etc)

View all

Our users have written 1 comments and reviews about CodePen, and it has gotten 125 likes

CodePen was added to AlternativeTo by s_lysenko on and this page was last updated .

Comments and Reviews

   
Top Positive Comment
Kagerjay
0

Codepen has a really big library of code snippets to get ideas from

My favorite tool on codepen right now is the projects tool. I needed to make a multipage ecommerce front-end framework written with a SCSS / PUG compiler that live-reloads changes instantly. After wasting too many hours trying to set up webpack / flavor of the day tool codepen works off the bat.

[Edited by Kagerjay, April 19]

Featured in Lists

Core, Development & Services

A list with 807 apps by AmileyaRyver without a description.

List by AmileyaRyver with 807 apps, updated

Apps for Productive Workstation

A list with 61 apps by deersplinter without a description.

List by deersplinter with 61 apps, updated

Dev apps

Some apps to help you on your journey Note: they are all free to use

List by mulang with 30 apps, updated

Official Links

What is CodePen?

CodePen is a communal platform for front-end designers and developers. It allows users to create websites, display projects, construct test cases, and discover new ideas. Users can develop entire projects or test specific code features and animations. CodePen Challenges offer opportunities to enhance skills and gain recognition. Users' work is encouraged to be shared, creating a globally active front-end community. The platform's Presentation Mode allows users to present their code at conferences. Known as Pens, CodePen provides real-time previews for HTML, CSS, and JavaScript. It can be used for showcasing creations, learning, testing for bug reporting, trying new technologies, and building future components. All activities are saved on CodePen, and with over 1.8 million+ users, there is a vast amount of work to explore and share.

CodePen Videos

Show 2 more videos