A foundation for sane contenteditable-based editors.

Usage no npm install needed!

<script type="module">
  import contentworkable from '';



The HTML5 contenteditable attribute allows you to turn any DOM element into a rich text editor. Great idea, right? But in practice, contentEditable is a huge pain to work with.

ContentWorkable is a small library that provides a foundation for sane contenteditable-based editors. It's mainly aimed at supporting "augmented text" editing, like the comment boxes on Facebook or Google+, rather than a conventional rich text interface.

It works by intercepting edit and selection events in the DOM and translating them to operations on a model object. You can then render the contents of the model in any way that you want.


Use npm test to run the tests using testling. For headless testing, you can install PhantomJS (npm install -g phantomjs). See here if you still get the 'No headless browser found' error after installing PhantomJS.

To debug test failures in the browser, install beefy and then run beefy test/test-contentworkable.js.

Test Status

browser support