Finding a lightweight, yet extensible, Wysiwyg editor

PublishedMay 12, 2023

•2 min read•View as Markdown

Finding a lightweight, yet extensible, Wysiwyg editor

Thomas Portelange

A Web Developer based in Belgium, specialized in PHP & JS development

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

A git diff with all changed and new unstaged files

I recently needed to collect all changes in one file for reporting purposes. Found this article: https://ratfactor.com/cards/git-diff-with-new-files In case you need something similar on Windows, here

Jul 27, 20261 min read

A git diff with all changed and new unstaged files

Writing a Zero-Dependency CSV and XLSX Reader/Writer

Some projects start with a grand plan. Others start because you just need to read a file without thinking too much about it. That was the case for spread-compat. I needed a common interface for CSV, X

Mar 6, 20265 min read

Writing a Zero-Dependency CSV and XLSX Reader/Writer

Media Queries Level 5 are awesome

With modern css, you can almost get rid of sass. But there is one last pain point : media queries. Not being able to use variables or an easy, common syntax for typical breakpoints is really annoying. That is, until you meet Media Queries Level 5. I’...

Oct 10, 20253 min read

Modern tooltips

This is a quick article to share this demo I just made. https://codepen.io/lekoalabe/pen/JoPNWpX

Dec 20, 20241 min read

Using Dialog elements today

Modals are typical UI elements for many web apps. There are countless packages dedicated to that specific features, each framework creating its own variation. Popular frameworks like Bootstrap also have custom code to deal with it. But all this feels...

Oct 29, 20243 min read

LeKoala Dev Blog

47 posts

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 :-)

Command Palette

Comments

More from this blog

Let's try Squire

Tiptap, the headless editor