Minimalist WYSIWYG Editor – pell.js

Category: Javascript , Recommended , Text | October 7, 2018
Views Total:4,245 views
Official Page:Go to website
Last Update:October 7, 2018


Minimalist WYSIWYG Editor – pell.js


pell.js is a minimalist (~1kb minified+gziped) JavaScript library to create a simple, clean WYSIWYG Editor for your web project. Easy to customize via SASS and JavaScript.

How to use it:

Install and import the pell.js into your project.

$ npm install pell
import pell from 'pell'

Or directly include the following JS & CSS files on the html page.

<link rel="stylesheet" href="pell.min.css">
<script src="pell.min.js"></script>

Create a container element for the WYSIWYG Editor:

<div id="pell" class="pell"></div>

Initialize the WYSIWYG Editor and you’re done.

  root: 'pell'

If you want to output the text and/or html you typed in the editor:

<div id="text-output"></div>
<pre id="html-output"></pre>
  onChange: html => {
    document.getElementById('text-output').innerHTML = html
    document.getElementById('html-output').textContent = html
  root: 'pell'

Override the default actions and CSS classes.

  actions: [
    { name: 'italic', icon: '&#9786;', title: 'Zitalic' },
  classes: {
    actionbar: 'pell-actionbar',
    button: 'pell-button',
    editor: 'pell-editor'

Customize the WYSIWYG editor in the SCSS.

$pell-actionbar-color: #FFF !default;
$pell-border-color: rgba(10, 10, 10, 0.1) !default;
$pell-border-radius: 5px !default;
$pell-border-style: solid !default;
$pell-border-width: 1px !default;
$pell-box-shadow: 0 2px 3px $pell-border-color, 0 0 0 1px $pell-border-color !default;
$pell-button-height: 30px !default;
$pell-button-width: 30px !default;
$pell-editor-height: 300px !default;
$pell-editor-padding: 10px !default;


v1.0.4 (10/07/2018)

  • Fix variable scope bug.

You Might Be Interested In:

2 thoughts on “Minimalist WYSIWYG Editor – pell.js

  1. Cahaya Perpaduan

    Hi … Is there a way to customize the toolbar ?

    Say to remove the Link icon / Camera icon ?


Leave a Reply