Atom to CodePen!



EDIT: I’ve written a how/why I made this post

Atom to CodePen is a package that takes the HTML file your working on and turns it into a CodePen! I made this because I’m trying to create 100 CodePen demos for my computer vision JS library, SeeClarke.js, so that I could in turn use that to help people with disabilities use the web.

How it Works

Atom to CodePen scans the active editor for three main components:

  • YAML Front Matter
  • <script> tags without a src attribute
  • <style> tags

The YAML Front Matter is used to set your CodePen’s properties and sits at the very beginning of the file, here are all the properties you can pass:

title: "New Pen!",
description: "It's about stuff.",
private: false, # true || false - When the Pen is saved, it will save as Private if logged in user has that privledge, otherwise it will save as public
parent: id # If supplied, the Pen will save as a fork of this id. Note it's not the slug, but ID. You can find the ID of a Pen with `` in the browser console.
tags: ["tag1", "tag2"], # an array of strings
editors: "101", # Set which editors are open. In this example HTML open, CSS closed, JS open
layout: "left", # top | left | right
html: "<div>HTML here.</div>",
html_pre_processor: "none" || "slim" || "haml" || "markdown",
css: "html { color: red; }",
css_pre_processor: "none" || "less" || "scss" || "sass" || "stylus",
css_starter: "normalize" || "reset" || "neither",
css_prefix: "autoprefixer" || "prefixfree" || "neither",
js: "alert('test');",
js_pre_processor: "none" || "coffeescript" || "babel" || "livescript" || "typescript",
html_classes: "loading",
head: "<meta name='viewport' content='width=device-width'>",
css_external: "", # semi-colon separate multiple files
js_external: "" # semi-colon separate multiple files

The package will then scan the rest of the file for <script> without a src attribute and <style> tags, and populates the css and js properties above. All the rest of the content will go into the html property.

Here’s a simple example file:

title: Hello World
description: This will be shown in the CodePen's description field
  <li>List Item A
  <li>List Item B
  <li>List Item C

  console.log(`There are ${document.getElementsByTagName('li').length} list items!`)

  body {
    background: #0f0;
    color: #fff;

Which generates this CodePen:


  • CTRL + SHIFT + P

  • Type “install package” and hit ENTER

  • Type “atom-to-codepen” in the search


  • Open Atom
  • Open the Install Packages/Themes by click Packages --> Settings View and select Install Packages/Themes
  • Select Install on the Settings menu
  • Type composer-atom-plugin or composer-* in the Packages search field and you should see the composer-atom-plugin on the list


Via Menu: Packages > Atom to CodePen > Export to CodePen

Via Command Paletted: CTRL + P + “to codepen”

Via Keyboard Shortcut: CTRL + SHIFT + F12


  • Uses lazy loading, so this doesn’t slow down startup when you’re not using it
  • Documented unit tests so it should…just…:sparkles:…work!