codepen-link v1.0.1

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