CodePen

CodePen - POST to Prefill Editors.md

CodePen - POST to Prefill Editors

example here: https://jsfiddle.net/gh/gist/library/pure/03b4395edb4fdc76407c6ab83edcfbe8

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>

Checkout here all the JSON options.

fiddle.html

<form action="https://codepen.io/pen/define" method="POST">
  <textarea id="data" name="data" rows="10" cols="50"></textarea>
  <p>
    Not automatically redirecting?
    <br><br><input type="submit" value="Click here">
  </p>
</form>

fiddle.js

var codepenData = {
  editors:"0010",
  html:"<div id=\"root\"></div>",
  js:"ReactDOM.render(\n <h1>Hello, world!</h1>,\n document.getElementById('root')\n);\n",
  js_external:"//unpkg.com/react/umd/react.development.js;//unpkg.com/react-dom/umd/react-dom.development.js",
  js_pre_processor:"babel",
  layout:"left"
};

document.getElementById('data').value = JSON.stringify(codepenData);

fiddle.manifest

name: codepen-post-to-prefill-editors
description: You can start a new Pen with code and settings that you send across programatically.
authors:
  - Marco Montalbano
wrap: b
panel_js: 0
panel_css: 0