codepen-link

Codepen is an awesome tool to showcase a piece of front-end code. Did you know there is a way to dynamically create a pen with pre-filled code?

Codepen has an amazing API to allow developers do this, however the way to do it is via submitting a form. The codepen-link component simplifies this set up.

Usage

<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>

Installation

CDN

<script type="module" src="https://cdn.jsdelivr.net/npm/codepen-link/dist/codepen-link/codepen-link.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/codepen-link/dist/codepen-link/codepen-link.js"></script>

add the script tags in your html and the component will get lazy loaded when it's used on the page.

Framework integration

Please see framework integration in the Stencil documentation.

Node Modules

• Run npm install codepen-link --save
• Put a script tag similar to this <script src='node_modules/codepen-link/dist/codepen-link.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install codepen-link --save
• Add an import to the npm packages import 'codepen-link';
• Then you can use the element anywhere in your template, JSX, html etc

Properties

Property	Attribute	Description	Type	Default
css	css	CSS code	string	''
cssExternal	css-external	semi-colon separate multiple files	string	''
cssPreProcessor	css-pre-processor	CSS preprocessor	"less" | "none" | "sass" | "scss" | "stylus"	'none'
cssPrefix	css-prefix	CSS prefix	"autoprefixer" | "neither" | "prefixfree"	'neither'
cssStarter	css-starter	CSS reset or normalisation	"neither" | "normalize" | "reset"	'neither'
description	description	Description of new pen	string	''
editors	editors	Set which editors are open. In this example HTML open, CSS closed, JS open	string	'111'
head	head	Code that should go inside	string	''
html	html	HTML code	string	'<p>Generated by &lt;codepen-link&gt;</p>'
htmlClasses	html-classes	HTML classes	string	''
htmlPreProcessor	html-pre-processor	HTML preprocessor	"haml" | "markdown" | "none" | "slim"	'none'
isPrivate	is-private	When the Pen is saved, it will save as Private if logged in user has that privledge, otherwise it will save as public	boolean	false
js	js	JavaScript code	string	''
jsExternal	js-external	semi-colon separate multiple files	string	''
jsPreProcessor	js-pre-processor	JavaScript preprocessor	"babel" | "coffeescript" | "livescript" | "none" | "typescript"	'none'
layout	layout	Layout of the new pen	"left" | "right" | "top"	'top'
parent	parent	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.	string	''
penTitle	pen-title	Title of new pen	string	'New Pen'
tags	--	an array of strings	string[]	[]

---