Finding a lightweight, yet extensible, Wysiwyg editor

I'm in the process of building a collection of custom elements for my web applications (more on that next time). Today I wanted to talk about a specific kind of input elements: wysiwyg editor.

When it comes to select an (open source, obviously) editor, there are a few choices that comes to mind. The most obvious being: TinyMCE. Did you already try to bundle this as a custom element (yes, there is one, but it's basically a glorified loader) ? It leads to a file of about 1mb. That's a lot if you are just looking of adding a couple of styles to your text.

I've also tried Jodit, but that's not much better: around 700kb. Still a bit much in my opinion.

Let's try Squire

Squire is a lightweight editor that doesn't use the deprecated exec command. By default, it doesn't contain an ui so I had to create one, but that was quite straightforward. You can see an example below.

The good news? Its weight is about 60kb, ui included. On top of that, you need to add DOMPurifier if your browser doesn't support the sanitizer api.

I think that's a really nice result! The only issue I had was using paragraphs instead of divs by default.

But by design, Squire is also limited. What if you need to extend it? Let's have a look at another contender.

Tiptap, the headless editor

Titap is an extensible, headless editor. Just like Squire, it doesn't contain a ui. But not problem, I just used the same as the one I've built for Squire :-)

Tiptap is built on top of ProseMirror, making it much more powerful, but also a bit more heavyweight. For example, ProseMirror includes its own sanitizer thanks to its dom parser, so it's bound to be heavier than an alternative that can use the sanitizer api.

How does it look? You bet: just the same :-) Its weight? Just about 300kb, so 5 times more than Squire, but it includes a few more tricks by default (like, a proper code block, horizontal rules, and typography rules...).

Why would you want to use it instead of Squire? Because it's extensible! You can add many plugins so for more complex projects, that's definitely the way to go.

And that's it for today! Happy editing :-)