your-codepen

Simple codepen that runs locally on your machine

Usage no npm install needed!

<script type="module">
  import yourCodepen from 'https://cdn.skypack.dev/your-codepen';
</script>

README

your-codepen

Codepen is one of the most favourite online editor among web developers for testing or showcasing your HTML,CSS. It provides hot reloading at a single click. But it doesn't provide autosuggestion or autocompleting variables like our IDE. It is not great to use if our network is slow.

Features

  • Support for a simple app with HTML, CSS and JS Files with hot reloading feature

How to use

To install run npm i your-codepen

Then run your-codepen init --app:name=<default-app-name>[optional] which creates a single codepen with a mock js,css and html file.

Then run your-codepen start --app:port=<PORT_NO>[optional] which runs a development server in the specified port Eg: https://localhost:3000 and access your pen https://localhost:3000/app-name

To create another pen run your-codepen createnew --app:name=<pen-name>[optional]

P.S: Only files with names index.js, index.css and index.html will be served in the development server

How to contribute

  • After downloading the repository, run the following commands to install your-codepen package globally

cd downloaded_folder/

npm install

npm install -g .

File Structure

bin/cli.js -> Deals with arguments that are passed in your-codepen src/server/* -> Deals with running browsersync server and providing static files

Version 1.0.0

  • Supports only node with versions 14.x or above 😥

Version 1.0.1

  • Supports node versions lower than 14.x 🥳 🎉

Upcoming Features

  • Support for CSS Preprocessor like Sass, Scss
  • Support for JS Preprocessor