Recently, I've worked on multiple projects that required a rich text editor with custom components. After extensive testing and research, I found that Tiptap is the best option for the job.
I started integrating it into different projects, and while it worked great, I found myself reimplementing the same components over and over again.
Then, I came across Kibo-UI—a great starting point. However, since I personally prefer React Aria over shadcn/ui, I decided to create and share my own take on this editor.
To build my editor, I rely on the following libraries:
Since I prefer working in a monorepo, I will also share how to integrate this editor within such a setup.
Here's an example:
In my monorepo, I have a design-system package that contains reusable UI components. Inside, I create an editor folder and copy all necessary files.
The folder structure looks like this:
components/ – Contains reusable editor components (e.g., buttons)extensions/ – Includes both default extensions (bold, italic, underline, etc.) and custom onesmarks/ & nodes/ – Defines triggers for formatting and adding nodes in the editor (refer to the Tiptap documentation for more details)If you're just getting started, I recommend copying all files to the root and then gradually selecting the parts you need.
This structure makes the codebase clearer and easier to maintain compared to having everything in a single file. While it requires a bit more copy-pasting initially, it improves readability and learning in the long run.
If you have any questions or feedback, feel free to leave a comment! 😊
(P.S. This is still a work in progress—I’ll keep updating it as I refine the implementation!)
To integrate the editor into a form with validation, it's as simple as this:
Here’s the CSS I use for the editor: