# PenEditor

**Repository Path**: mirrors/PenEditor

## Basic Information

- **Project Name**: PenEditor
- **Description**: PenEditor 是一个开源的，极简风格的HTML / CSS / JS代码编辑器！实时运行！ Demo: https://jojowwbb.github.io/pen/inde
- **Primary Language**: JavaScript
- **License**: BSD-3-Clause
- **Default Branch**: main
- **Homepage**: https://www.oschina.net/p/PenEditor
- **GVP Project**: No

## Statistics

- **Stars**: 45
- **Forks**: 6
- **Created**: 2021-04-06
- **Last Updated**: 2025-09-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Pen Editor

[![GitHub code size](https://img.shields.io/github/languages/code-size/jojowwbb/PenEditor)](https://github.com/jojowwbb/PenCode)  [![GitHub license](https://img.shields.io/github/license/jojowwbb/PenEditor)](https://github.com/jojowwbb/PenCode)  [![GitHub issues](https://img.shields.io/github/issues-raw/jojowwbb/PenEditor)](https://github.com/jojowwbb/PenCode)

 :rocket: ​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.



<p align="center">
  <a href="https://github.com/jojowwbb/PenEditor">
    <img src="https://z3.ax1x.com/2021/04/01/cV436J.png" alt="Logo" width="86" height="86"/>
  </a>
</p>
  <h3 align="center">Pen Editor</h3>

  <p align="center">
    Simple Online Code Editor
    <br />
    <br />
    <a href="https://github.com/jojowwbb/PenEditor">View Demo</a>
    ·
    <a href="https://github.com/jojowwbb/PenEditor/issues">Report Bug</a>
    ·
    <a href="https://github.com/jojowwbb/PenEditor/issues">Request Feature</a>
  </p>


  <p align="center">
  <img src="https://z3.ax1x.com/2021/04/02/cm1vz4.png" alt="Logo" width="100%"/>
</p>


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


## Online

[PenEditor Demo](https://jojowwbb.github.io/pen/index.html)

## Table of Contents

-   [Install](#install)
-   [Usage](#usage)
-   [Example Readmes](#example-readmes)
-   [Maintainers](#maintainers)
-   [Contributing](#contributing)
-   [License](#license)

## Install

This project uses [node](http://nodejs.org) and [npm](https://npmjs.com). Go check them out if you don't have them locally installed.

```sh

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

```

## Usage

```sh

$ npm install

$ npm run dev

```

## Example

[Online demo](https://jojowwbb.github.io/pen/index.html)

To see how the specification has been applied, see the [Demo](https://jojowwbb.github.io/pen/index.html).

## Related

-   [React](https://reactjs.org/)
-   [CodeMirror](http://codemirror.com)
-   [Bulma.css](https://bulma.io/)

## Maintainers

[@jojowwbb](https://github.com/jojowwbb).

## Contributing

Feel free to dive in! [Open an issue](https://github.com/jojowwbb/PenEditor/issues/new) or submit PRs.

Standard Readme follows the [Contributor Covenant](http://contributor-covenant.org/version/1/3/0/) Code of Conduct.

### Contributors

This project exists thanks to all the people who contribute.

## License

[BSD](LICENSE)

## Thanks

-   [GitHub Emoji Cheat Sheet](https://www.webpagefx.com/tools/emoji-cheat-sheet)
-   [Img Shields](https://shields.io)
-   [Choose an Open Source License](https://choosealicense.com)
-   [GitHub Pages](https://pages.github.com)