CodePen has a prefill API. You POST to it with code you want in the editors (and settings, like preprocessor choices), and we create a new (unsaved) Pen in the Pen Editor. It’s pretty raw though. You need to know how to do a POST request. That can be done right in HTML alone even, but putting a bunch of JSON into a <input type="hidden"> so a <form> can POST it isn’t perhaps the most ergonomic thing in the world.
Sean Wu created a Web Component for this, available as codepen-link. It makes creating an “Open this on CodePen” <button> a lot more ergonomic:
<codepen-link
html="<h1>Hello world</h1>"
title="Open in CodePen"
pen-title="New demo pen"
editors="110"
css-preprocessor="scss"
css="body{ font-family: 'Open Sans', sans-serif; }"
css-external="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"
js-external="https://cdn.jsdelivr.net/npm/codepen-link/dist/codepen-link/codepen-link.js"
>
<button type="button">Click me view in Codepen</button>
</codepen-link>As long as you have the script loaded up, that button does what you expect it to.
As an extreme bit of meta, here’s an embedded Pen showcasing a <codepen-link>, which opens a Pen in which the codepen-link script is also prefilled.
If you have the code you’re trying to prefill on another site (like you would if you’re using this) remember that you can use prefill embeds too, to make an embed out of code/settings that you provide (and don’t need to be saved on CodePen).
The post codepen-link appeared first on CodePen Blog.