An open-source Codepen.io clone works online in real-time using react

by React

Pen Editor

Simple Online Code Editor! Support Rect, HTML, CSS, Javascript | PenEditor

PenEditor is a simple HTML / CSS / JS code editor, works online in real-time, and out of the box! PenEditor.js is an open-source online HTML / CSS / JavaScript code editor (Code Playground) inspired by Codepen.io.

View Demo View Github

Features

  • [x] HTML/CSS/JS code editing
  • [x] Code formatting
  • [x] HTML editor supports emmet
  • [x] Code hint
  • [x] Sublime shortcut keys
  • [x] Simple console(log,error,info,warn)
  • [x] Built-in babel
  • [x] Built-in react, no need to quote separately
  • [x] Download HTML save
  • [x] works online in real-time

Install

This project uses node and npm. Go check them out if you don't have them locally installed.


$ git clone https://github.com/jojowwbb/PenEditor.git

Usage


$ npm install

$ npm run dev

Example

Online demo

To see how the specification has been applied, see the Demo.