Guide · Open source

How to use pell: a simple WYSIWYG editor guide

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

pell is a small JavaScript library that adds a basic WYSIWYG (what you see is what you get) text editor to a web page. This guide shows how to install it, set up the editor on an element, choose toolbar actions and read the HTML it produces. By the end you will have a working rich text box you can drop into a form or admin page.

pelljaredreich/pell · ★ 12k · MIT Install options & downloads

Quick start

1Check prerequisites. Make sure Node.js and npm are installed if you install from npm.
2Install the package. Run npm install --save pell in your project folder.
3Add a container element. Place a div with an id in your page to hold the editor.
4Call pell.init. Pass the element and an onChange callback, and list the actions you want in order.
5Handle the HTML output. Use the onChange callback to save or display the HTML the editor produces.
6Style the editor. Override .pell-content or the pell SCSS variables to match your page.

What pell does and when to use it

You give pell an HTML element and it displays toolbar buttons for common formatting such as bold, italic, lists, headings, links and images. Each change is reported as HTML through a callback you define.

pell has no dependencies and is meant for simple editing needs rather than full document editing. It suits projects where a small file size matters more than a long feature list.

Good fit: a rich text box in a form or admin page.
Good fit: customizing toolbar buttons or styling the editor with CSS or SCSS.
Good fit: converting the HTML output to Markdown with a converter such as Turndown.
Poor fit: tables, collaboration or plugins, which the README does not list as features.

Install pell with npm

If you use a package manager, install pell from npm. You need Node.js and npm installed first.

npm install --save pell

Add pell to a page without a bundler

You can also load pell directly in HTML. Put the stylesheet in the head and the script at the bottom of the body. The README loads both from unpkg, and it shows where to place style overrides.

Stylesheet: pell/dist/pell.min.css
Script: pell (loaded at the bottom of the body)

<link rel="stylesheet" type="text/css" href="https://unpkg.com/pell/dist/pell.min.css">
<script src="https://unpkg.com/pell"></script>

Initialize the editor on an element

Create a container element, then call pell.init with the element and an onChange callback. The element and onChange are required. The other options are optional and have defaults.

element: the HTMLElement to turn into an editor (required).
onChange: a function that receives the output HTML, triggered by the element's oninput event (required).
defaultParagraphSeparator: the element inserted when you press Return, default 'div'.
styleWithCSS: when true, outputs styled spans instead of b or i tags. Default false.
actions: the buttons to show, in order.
classes: custom class names for the action bar, buttons and content.

<div id="editor" class="pell"></div>
<div id="html-output" style="white-space:pre-wrap;"></div>

<script>
  const editor = pell.init({
    element: document.getElementById('editor'),
    onChange: html => {
      document.getElementById('html-output').textContent = html
    },
    defaultParagraphSeparator: 'p',
    styleWithCSS: true,
    actions: ['bold', 'underline', 'olist', 'ulist', 'link', 'image']
  })
</script>

The actions option takes a list of built-in action names or objects. Strings pick a built-in action in the order you list them. Objects let you create a custom action or overwrite one, with a name, an icon, an optional title and a result function.

The README lists these overwriteable action names: bold, italic, underline, strikethrough, heading1, heading2, paragraph, quote, olist, ulist, code, line, link and image. Other actions come from the browser's execCommand API, and the README says you can create any custom action.

Built-in string: 'bold' shows the default bold button.
Overwrite: an object with name 'image' and your own result function.
Custom: an object with a new name, a required icon and a required result function.
Use exec(command, value) inside result to run a document command.

import { exec, init } from 'pell'

init({
  element: document.getElementById('editor'),
  onChange: html => console.log(html),
  actions: [
    'bold',
    {
      name: 'link',
      result: () => {
        const url = window.prompt('Enter the link URL')
        if (url) exec('createLink', url)
      }
    }
  ]
})

Style the editor with CSS or SCSS

You can override the default look with plain CSS or import the pell SCSS file and set variables. Plain CSS overrides go after the pell styles are applied. The README sets the content height as an example.

To convert the output to Markdown, pass the HTML from onChange to a converter. The README's example uses Turndown with ATX-style headings.

SCSS: set a variable such as $pell-content-height before importing pell.scss.
CSS: target .pell-content to change the editing area.

.pell-content {
  height: 400px;
}

Read and set the content

The onChange callback gives you the HTML each time the content changes. To load existing content, set the innerHTML of the editor's content element, which pell exposes as editor.content.

editor.content.innerHTML = 'Initial content!'

What people use it for

A comment or description box in a web form.
A simple content editor on an admin page.
An editor whose HTML is converted to Markdown with Turndown.
A small editing box in a project where file size matters.

Frequently asked questions

How do I install pell?

If you use npm, run npm install --save pell. The prerequisites are Node.js and npm. The README also shows loading pell and its CSS directly from unpkg in an HTML page.

Is pell free to use?

pell is released under the MIT licence, as the README states. Check the licence file in the repository for the full terms.

Does pell have dependencies?

No. The README describes pell as pure JavaScript with no dependencies, written in ES6.

Does pell support tables or collaborative editing?

The README lists only the basic actions and no tables, collaboration or plugins. If you need those features, consider a more complete editor such as Quill, Trix, TinyMCE or Squire.

Which browsers does pell support?

The README lists Chrome 5+, Firefox 4+, Safari 5+ and Opera 11.6+. It lists IE 9+ as theoretical support, so do not rely on old Internet Explorer.

How does pell compare with Quill or TinyMCE?

The README's comparison table shows pell at 1.38kB minified and gzipped, far smaller than Quill at 43kB or TinyMCE at 157kB. pell has fewer features, so choose it when size and simplicity matter most.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

pell suits web developers who need a simple, small rich text box in a form or admin page and are happy with basic formatting. Pick a fuller editor such as Quill, Trix, TinyMCE or Squire if you need tables, collaboration, plugins or wide legacy browser support. The README also points to a v2 branch without stating its status, so check that before starting a new project.

Install options & downloads