The educational technology and digital learning wiki
Jump to navigation Jump to search


Codepen is a free development platform created in 2012 in Florida. It is used to develop and test live code in HTML, CSS and JavaScript in web browsers. Codepen is also a social network for developers. Each of them can create their own page, displaying the codes (called Pens) they developed on the platform.

Worth checking out:

See also:


Codepen is used directly in a web browser. No prior installation is therefore required. To save your creations, however, it is necessary to create an account. You can use Twitter, GitHub or Facebook accounts, or create a specific account for the platform.

Both free and paid accounts are available.


The display is divided into two parts: The top part itself is divided into three parts for code edition : HTML, CSS and JavaScript. The bottom part is the live code visualization.

File:Codepen interface.png
Codepen development interface

It is possible to link the project with Fork in order to follow the evolution of the project.

A feature allows to reformat the indentation of the code in one click.

There are several ways to export the project :

  • Download a ZIP folder
  • Share the project link
  • Save to Gist
  • Create a container (Embedding) on another site

The community aspect of the site allows you to share your "Pens", create your portfolio and ask for help from other developers. There are collections of existing "Pens" that can be exported directly to the site.


Codepen offers the possibility to write code based on already known code frameworks like :

  • Sass
  • LESS
  • Stylus
  • PostCSS
  • Markdown
  • Haml
  • Slim
  • Pug



The Pro mode offers various additional features such as :

  • Presentation mode
  • Teacher mode
  • Collaboration mode
  • Private mode
  • etc.


The education mode is part of the "Pro" mode. It allows, for example, a teacher to show from his computer the development of live code on the students' terminals.


1 [ Codepen] (12/2016)

2 [ Wikipedia] (12/2016)