A customizable and user-friendly React library: a WYSIWYG rich text editor, featuring Material UI and Tiptap.

I created a modern and intuitive WYSIWYG rich text editor designed to provide a smooth and customizable editing experience. Initially developed for my portfolio, I realized its potential while writing this text, which is why I decided to make it open source, allowing others to benefit from it and adapt it to their own projects.
The editor is built as a React library written in TypeScript, ensuring strict typing and better code maintainability. By utilizing Material UI, one of the most popular UI frameworks for React, the editor enjoys elegant and accessible components.
For managing the text editing logic, the editor relies on Tiptap, a powerful extension based on ProseMirror that offers a rich and flexible content manipulation interface. Tiptap makes it easy to add features such as user mentions, image uploads, and much more, all while remaining lightweight and fast.
Key Features:
User Mentioning: Easily integrate a mention system (like @username), perfect for collaborative or social applications.
Image Uploads with Captions and Alt Text: Users can upload images, add custom captions, and set alt texts to improve accessibility.
HTML String Export: Content can be exported as clean HTML strings, making it easy to use in other parts of your application or for storage.
Internationalization (i18n): Compatible with internationalization libraries like i18n or next-intl, the editor allows for easy management of multiple languages.
Style Customization: You can customize styles using native CSS, vanilla-extract, or TailwindCSS, depending on your design preferences or needs.
Integration with Formik and React Hook Form: Ideal for complex forms, the editor can be used with form management libraries like Formik or React Hook Form.
Data Validation: To ensure data integrity, the editor can be paired with validation libraries like Joi, Zod, or Yup.
By making this editor open source, I hope to encourage other developers to use it, contribute to its improvement, and adapt it to their own needs.
Open Source
Web
Subscribe to my newsletter to receive special offers and the articles / tutorials I occasionally publish on my blog.
* You can unsubscribe at any time by clicking the unsubscribe link in every email.