typester

A simple to use WYSIWYG text editor, inspired by Medium and Medium Editor, that produces clean and predictable HTML from your user's input.

Flexible, fast, & fabulous We've worked diligently to make sure that Typester is a robust editor that is flexible, powerful, and— above all— simple. We have designed it to do what it's meant to do, do it well, and then stay out of the way.
No unused code here Typester has been designed to be lean, both in byte size and resource consumption. Typester has only one third party dependency, DOMPurify. Every other code requirement, from DOM traversal and manipulation to event handling, was developed bespoke for this package.
Engineered for modern modules Typester has been created using ES6+ JavaScript module patterns, which means you need only import it and instantiate it. If you still prefer <script> imports that's fine too; Typester will bind itself to the global scope allowing you to new window.Typester({ /* options */ }).
Minimal DOM footprint Typester won't clutter your pristine markup with multiple DOM injections for each editor instance. Need multiple editors on a single page? No problem, Typester will inject single instances of its DOM requirements which will be shared between the editors.
Single file import (batteries included) No need to import separate stylesheets and additional dependencies. Typester comes with everything it needs rolled into one JS file.
Pure XSS-free DOM powered by DOMPurify Typester, thanks to the awesome power of DOMPurify, will ensure that the HTML you receive is sanitized against XSS exploits.

Try It! Get It!

Brought to you by: Type/Code

Another WYSIWYG? But why?

Typester evolved out of work we were doing during the development of a custom content management system for the MIT Media Lab. A common use case at the Media Lab that we needed to support was the pasting in of content from external text editors (such as Microsoft Word and Google Docs), and we discovered that third-party WYSIWYG implementations tend to break down when it comes to handling the messy markup that those editors emit. To address this, we came up with our own technique that involves performing complex formatting and cleanup operations under the hood, in a way that ensures consistent and sane markup, while still maintaining accurate edit (undo/redo) history as text is being manipulated.

After its initial success in the Media Lab project, we decided to make Typester a standalone package so that we can continue to use and improve it in future projects, and release it into the wild!

How to set up this bad boy

Typester can be installed via NPM or Yarn…

            $ npm install typester-editor --save
            # or
            $ yarn add typester-editor --save

… and then instantiated in your code:

            import Typester from 'typester-editor';
            // or
            var Typester = require('typester-editor');

            new Typester({ el: document.querySelector('[contenteditable]') });

For more info check out our docs