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!

Would you like to see Typester in action?

Then feel free to edit anything in this block.

And while you make changes and have fun messing up our perfectly crafted copy, keep an eye on the panel to the right. It should, in real time, show you the HTML inside this block, as it gets updated.

Don't forget to try your hand at formatting things as well, it really is quite simple. All you need to do is:

Select some text
Look out for the medium editor style contextual toolbar
Toggle any of the formatting options

As you edit, you may notice that the toolbar will adapt to the content selected. For instance, if Typester detects that the selected content is already in a tag that has its font-weight set to bold, it will disable the bold formatting option.

The same goes for when the content is in a list. Only a subset of the formatting tools are available to ensure that no invalid nesting happens.

Currently, Typester has support for:

Toggling the bold and italic states of selected text.
Creating H1 and H2 headings.
Creating ordered and unordered lists.
Toggling a block of content into a blockquote and back.
Inserting links.

Typester is still in beta. Although we are using it in production and it has proven to be reliable, we do want to caveat that it should be used with caution.

Also, the current feature set is intentionally limited and the ability to extend the library arbitrarily is not available. We have plans to expand the Typester library in the future, but feel it's now at a good place to release into the wild and receive external feedback. If you have any issues or feature requests you would like to report, please feel free!

Lastly, in case you haven't managed to accidently select anything content on the page outside of this demo area, most of this page's copy can be edited!

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