To pre-fill a Pen with code and options you choose, you can POST to https://codepen.io/pen/define/ with data, where the value of data is JSON containing all the bits you want pre-filled. Here is a simple example:

<form action="https://codepen.io/pen/define" method="POST" target="_blank">
  <input type="hidden" name="data" value='{"title": "New Pen!", "html": "<div>Hello, World!</div>"}'>

  <input type="submit" value="Create New Pen with Prefilled Data">
</form>

All The JSON Options

These are the things you can include in the JSON:

// All Optional
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 `window.CP.pen.id` 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          : "http://yoursite.com/style.css", // semi-colon separate multiple files
js_external           : "http://yoursite.com/script.js" // semi-colon separate multiple files

// Deprecated Attributes

// These go in the CSS itself now, like `@import "compass";`
css_pre_processor_lib : "bourbon" || "compass" || "nib" || "lesshat",

// Link up in js_external if needed
js_modernizr : "true" || "false",
js_library   : "jquery" || "mootools" || "prototype",
js_module    : true

Note that the quotes above are escaped but the HTML isn’t. You may escape or not escape code as you wish, just be careful that quotes don’t screw up the HTML when you put the JSON into the value of the hidden data input. Also note that you can’t make a form like the above directly from CodePen, as we don’t allow form submissions in Pens (security concern).

Dynamically Create an “Edit on CodePen” Button

Let’s say you had some code on a page and wanted to include a button to “Edit on CodePen”. This code is different every time, so you don’t want to have to update the button-making code. Here’s an example of how you could do that with jQuery.

1. Find and loop through all the <pre> code blocks

$("pre").each(function() {

});

2. Figure out if the <pre> has a <code> inside or not.

It’s common that they do, but they don’t always. Then set up some variables we’ll use later.

var el = $(this),
   type = el.data("type"),
   codeInside = el.find("code"),
   isCodeInside = codeInside.length, // does it or not?
   HTML = "",
   CSS = "",
   JS = "";

3. If the code is HTML, fill the HTML variable, etc.

We’ll assume the <pre> tag has a data-type attribute on it which indicates what kind of code it is. We put that into the type variable above.

if (type == "html") {
  if (codeInside) {
    HTML = codeInside.html();
  } else {
    HTML = el.html();
  }
} else if (type == "css") {
  if (codeInside) {
    CSS = codeInside.html();
  } else {
    CSS = el.html();
  }
} else if (type == "js") {
  if (codeInside) {
    JS = codeInside.html();
  } else {
    JS = el.html();
  }
}

4. Create JSON out of the code

var data = {
  html               : HTML,
  css                : CSS,
  js                 : JS
};

5. Escape all quotes to make sure the JSON doesn’t get wonky when it is a form value

var JSONstring = 
  JSON.stringify(data)
    // Quotes will screw up the JSON
    .replace(/"/g, "&​quot;") // careful copy and pasting, I had to use a zero-width space here to get markdown to post this.
    .replace(/'/g, "'");

6. Create a <form> element

var form = 
  '<form action="https://codepen.io/pen/define" method="POST" target="_blank">' + 
    '<input type="hidden" name="data" value=\'' + 
      JSONstring + 
      '\'>' + 
    '<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>';

7. Append to <pre> Or wherever else you want to put it.

el.append(form);

Live Example