How to build an “Open in Codepen” button in JavaScript

In this quick tutorial, you will learn how to create an "Open in Codepen" button. This button takes predefined CSS, HTML, and JavaScript code as arguments and creates a brand new Pen that contains your code.

I have created the createCodepen function which takes your HTML, CSS, and JavaScript code as string arguments and opens your newly created Pen in a new tab.

To achieve this, we append a form element that makes a POST request to the Codepen API. We send a JSON object with our desired attributes.

Below are the expected key/value pairs:

const data = {
  title: "New Pen Title",
  description: "New Pen Description",
  html: "", // Your HTML as string
  html_pre_processor: "",
  css: "", // Your CSS as string
  css_pre_processor: "", // Maybe start it with scss?
  css_starter: "",
  css_prefix: "",
  js: "", // Your JavaScript as string
  js_pre_processor: "",
  js_modernizr: "",
  js_library: "",
  html_classes: "",
  css_external: "", // External CSS File URL
  js_external: "", // External Link to JS File URL
};

We need to sanitize the JSON (aka replace special characters like apostrophes and quotes).

Then we append the form element in the body and submit the form programmatically. In the end, we clean up by removing the form element from the body.

Below you can find the full code that you can easily copy/paste into your code.

function createCodepen(props) {
  const {
    title = "Test Codepen",
    js = "",
    html = "",
    css = "",
		...rest
  } = props;

  const data = stringReplace({
    title,
		css,
    html,
    js,
		...rest
  });

  const form = createElementFromHTML(
    '<form action="https://codepen.io/pen/define" method="POST" target="_blank">' +
      '<input type="hidden" name="data" value=\'' +
      data +
      "'>" +
      '<input type="image" src="http://s.cdpn.io/3/cp-arrow-right.svg" width="40" height="40" value="Create New Pen with Prefilled Data" class="codepen-mover-button">' +
      "</form>"
  );

  document.body.appendChild(form);
  form.submit();
  form.remove();
}

function stringReplace(obj) {
	let string = JSON.stringify(obj);
  string = string.replace(/"/g, "&quot;");
  string = string.replace(/'/g, "&apos;");
  return string;
}

function createElementFromHTML(htmlString) {
  let div = document.createElement("div");
  div.innerHTML = htmlString.trim();
  return div.firstChild;
}

* Here is the official guide about the “POST to Prefill Editors” feature from the Codepen team