Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource


Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource


Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.


                <!-- text from Wikipedia article on JavaScript -->
<div class="wrap">
  <h1>Beginnings at Netscape</h1>
  <p>In 1993, the National Center for Supercomputing Applications (NCSA), a unit of the University of Illinois at Urbana-Champaign, released NCSA Mosaic, the first popular graphical Web browser, which played an important part in expanding the growth of the nascent World Wide Web.</p>
  <h1>Server-side JavaScript</h1>
  <p>Netscape introduced an implementation of the language for server-side scripting with Netscape Enterprise Server in December 1995, soon after releasing JavaScript for browsers.</p>
  <h1>Adoption by Microsoft
  <p>Microsoft script technologies including VBScript and JScript were released in 1996. JScript, a reverse-engineered implementation of Netscape's JavaScript, was part of Internet Explorer 3.</p>
  <p>In November 1996, Netscape submitted JavaScript to Ecma International to carve out a standard specification, which other browser vendors could then implement based on the work done at Netscape. This led to the official release of the language specification ECMAScript published in the first edition of the ECMA-262 standard in June 1997</p>
  <h2>Later developments</h2>
  <p>JavaScript has become one of the most popular programming languages on the Web. Initially, however, many professional programmers denigrated the language because, among other reasons, its target audience consisted of Web authors and other such "amateurs".</h2>
  <!-- add more heading to automatically add indexes


                body {
  counter-reset: heading; // init the counter for headings
              // note you can give any other name
h1 {
  counter-increment: heading; // increments the counter on every H1 tag
  counter-reset: subheading;  // here we init or reset the subheading
                // so that we get 1.1, 1.2, 1.3, then after new heading it will go 2.1, 2.2, 2.3
h1:before {
  content: counter(heading) " - "; // using :before selector and counter() function we can add the index to the heading
h2 {
  counter-increment: subheading; // increment the subheading counter on every H2 tag
h2:before {
  content: counter(heading) "." counter(subheading) " - ";

.wrap {
  padding: 0px 24px 12px 24px;