Published at 14-03-2025
In the Fladres project (built with the TALL stack), we previously used Quill as our text editor. While Quill worked well for content creation, its main downside was that it didn’t generate proper HTML. For example, what should have been <li> tags ended up as a series of <div>s or <span>s with indent classes. This was acceptable with some simple styling, but problems arose when the same content was used in emails—the invalid HTML led to broken styling, making the emails look inconsistent.
After encountering these issues, we began looking for an alternative. We considered big names like TinyMCE and CKEditor, but they felt too bloated, required registration, and were overly complex for our needs. That’s when we discovered TipTap. TipTap is a headless editor that gives you full control over the HTML output and allows for easy customization.
This switch has significantly improved our workflow, and if you’re facing similar issues with Quill, I highly recommend considering TipTap.
I initially followed the PHP/Livewire installation, which worked fine. I almost had everything up and running, and the last feature I needed was a bubble menu to show table settings. However, for some reason, the editor was initialized twice, which interfered with the bubble menu. That’s when I began to change the original setup and discovered that the AlpineJS approach works a bit better—or, actually, a combination of both approaches.
It took me some time to figure everything out, so I decided to write a series of blogs documenting how I built the editor and the nifty features I added. Building it as a standalone project forced me to create a simple and clean solution. I also wanted to see if I could integrate the image uploader more into the component instead of using a separate endpoint, as our current setup required quite a bit of configuration that I wanted to minimize.
Writing a blog about it is a great way to build it step by step and document everything for myself—and perhaps for others as well.
I have created a repository with all the code, which you can find on GitHub. Each step has its own branch, making it easy to follow along. Every article will include a link to its corresponding branch.
I have done my best to keep it simple and easy to follow. However, it is still a biased approach, and some things may only work for me. Keep in mind that this may mean that some additional important steps, such as authorization, are left out.
These blogs assume a basic knowledge of Laravel, Livewire, AlpineJS/JavaScript, and CSS.