@yuanchuan/codepen-cli

Create new pen from local html/js/css files with ease

Usage no npm install needed!

<script type="module">
  import yuanchuanCodepenCli from 'https://cdn.skypack.dev/@yuanchuan/codepen-cli';
</script>

README

codepen-cli

The live editor of CodePen is not stable for me most of the time due to the network (in China...), so I always write demos on my local machine first, then open CodePen afterwards and copy/paste into the editor.

This tool is for saving this process by doing the following steps:

  1. Extract external or embedded scripts and styles from a local HTML file.
  2. Open a new CodePen editor with default browser.
  3. Prefill each html/js/css section and external depencencies in the editor automatically.

The rest is to click the SAVE button.

Installation

$ npm install -g @yuanchuan/codepen-cli

Example

$ codepen index.html

It can be used to preview a markdown file quickly on CodePen:

$ codepen README.md

Edit a JS file on CodePen:

$ codepen example.js

Using npx which is a package runner bundled in npm:

$ npx @yuanchuan/codepen-cli index.html

Options

keep-embedded

By default all the embedded script/style in HTML will be put into js/css sections seperatly, but they can stay with the HTML using keep-embedded option.

$ codepen index.html --keep-embedded

References

https://blog.codepen.io/documentation/prefill

Usage

Usage:
  codepen <filename>

Options:
  --keep-embedded: Keep embedded styles/scripts inside html
  --data:          Output the prefilled data
  --help:          Display help info

Supported filename types by extension:
  htm, html, md, markdown, js, ts, css, less, sass, scss, styl