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

Note that this URL is temporary while the CodePen 1.0 and CodePen 2.0 editors both co-exist. When the CodePen 2.0 editor becomes the only editor, the URL will become https://codepen.io/pen/define and continue work as described in this document. This is for backwards compatibility as that original URL has existed for this API for a long time.

Here is a simple example:

<form action="https://codepen.test/cpe/pen/define" method="POST" target="_blank">
  <input type="hidden" name="data" value='{"html":"<div data-user=\"1234\">Bob</div>","css":"body { background: yellow; }"}'>

  <input type="submit" value="Create New Pen with Prefilled Data">
</form>Code language: HTML, XML (xml)

Note how quotes, as needed in things like HTML attributes, can be done with backslash escaping.

HTML is also fairly relaxed with whitespace, so you can let the JSON-like structure of the data breathe a bit:

<form action="https://codepen.test/cpe/pen/define" method="POST" target="_blank">

  <input type="hidden" name="data" value='
    {
      "html" :"<div data-user=\"1234\">Bob</div>",
      "css": "body { background: yellow; }"
    }
  '>

  <input type="submit" value="Create New Pen with Prefilled Data">
</form>Code language: HTML, XML (xml)

All The JSON Options

These are the things you can include in the JSON, all of which are optional. There are // comments below for explanation, but that is not valid JSON data and would fail if passed.

{
  "title"                 : "New Pen!",

  "description"           : "It's about stuff.",

  "private"               : false, // true - When the Pen is saved, it will save as Private if logged in user has that privilege, otherwise it will save as public

  "layout"                : "left", // or "top", "right"

  "html"                  : "<div>HTML here.</div>",

  "html_pre_processor"    : "none" // or "pug", "markdown",

  "css"                   : "html { color: red; }",
  
  "css_pre_processor"     : "none", // or "less", "scss", "sass", "stylus"

  "css_starter"           : "normalize", // or "reset"

  "css_prefix"            : "autoprefixer", // or "prefixfree"

  "js"                    : "alert('test');",

  "js_pre_processor"      : "coffeescript", // or "babel", "typescript", "vue"

  "html_classes"          : "loading",

  "head"                  : "<meta name=\"viewport\" content=\"width=device-width\">",

  "css_external"          : "https://fonts.xz.style/serve/inter.css;https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css", // semi-colon separate multiple files

  "js_external"           : "http://yoursite.com/script.js" // semi-colon separate multiple files
}Code language: JSON / JSON with Comments (json)

Deprecated Attributes

The following attributes used to exist as part of this API but are no longer, mostly because it’s not necessary anymore — what they were doing can and should be accomplished in code.

css_pre_processor_lib
js_modernizr
js_library
js_module

These attributes are deprecated as well due to very limited use. If you have a workflow disrupted by these, please let us know in support.

editors
parent
tags

Example

The code blocks in this example HTML get CodePen buttons applied to them with JavaScript, which, when clicked, prefill a new Pen with the code in that code block.