Build a Rich Text Editor in 5 minutes with this Open Source Tool

When I was learning to code in my coding bootcamp, I wanted to build a rich text editor. If you’re not  familiar with the coding bootcamp experience, here’s the one thing you should know: You have to move quickly. There’s not a lot of time to pursue personal projects when you’re learning to code in just a matter of weeks.

Unfortunately, with my limited experience, the least time-consuming solution I could find was adding the HTML attribute contenteditable to a div. Although it did the job, I was a little disappointed because rich text editors provide more customization.

<div contenteditable="true">This text can be edited by the user.</div>

Fast forward to a few years later, and I’ve found the perfect solution: an open source tool that enables developers to build a rich text editor in 5 minutes.

What is a rich text editor?

Rich text editors provide an interface which allows users to add and and format content, text, images, links, and other components on the page without writing any code. Majority of rich text editors are also WYSIWYG (What You See Is What You Get) editors, which means users can see the rich content as they’re typing. Initially, people primarily used text editors for word processing via tools such as Microsoft Word and its predecessors. However, with the advent of the internet and browser-based applications, rich text editors have evolved in design and purpose. Today, we can find rich text editors in tools we frequent daily like Slack, Discord, GitHub, Google Docs, and Reddit -- just to name a few.

According to Simple Thread’s Nick Agliano, “The first browser-based WYSIWYG editors became possible because Internet Explorer decided to implement designMode and contentEditable, which gave users a way to edit rich text in the browser. This original implementation of designMode and contentEditable ended up being reverse engineered by developers at Mozilla. After years of building hacks upon hacks over this weak foundation, applications like Google Docs started to roll their own custom JavaScript libraries.”

In Tiny’s 2021 State of the Rich Text Editors, researchers found that rich text editors were “surprisingly complex to build, maintain and update.” Because most of the survey respondents had 10+ years of software development experience, Tiny researchers concluded that building and maintaining a rich text editor requires more senior expertise. No wonder I struggled to develop my own rich text editor when I was a student in a coding bootcamp.

Recently, I discovered a way to build a customizable, rich text editor in less than 5 minutes using Remirror. This method is accessible to developers who have experience installing a package through npm or yarn.

How I built it

Step 1

I set up a basic react app using create-react-app.

npx create-react-app cra-remirror

create-react-app is a command that sets up all the build tools and structure needed to develop a single page react application.

Step 2

I installed remirror and a few dependencies using the command below:

npm add --save remirror @remirror/react @remirror/pm @emotion/react @emotion/styled @remirror/react-editors

Step 3

In my App.tsx file, I added the following:

import { SocialEditor } from '@remirror/react-editors/social';

const USERS = [
  { id: 'blackgirlbytes', label: 'blackgirlbytes' },
  { id: 'redscarlett', label: 'redscarlett' },
  { id: 'jadenguitarman', label: 'jadenguitarman' },
  { id: 'bdougie', label: 'bdougie' }
];

const TAGS = ['remirror', 'editor', 'opensource', 'ganggang', 'javascript'];

function App() {
  return (
    <div style={{ padding: 16 }}>
      <SocialEditor placeholder="Write a message" users={USERS} tags={TAGS} />
    </div>
  );
}

export default App;

Step 4

I ran npm run start to spin up my creation locally, and I was pleasantly surprised! On my web page was an out-of-the-box rich text editor with all bells and whistles:

Step 5

I decided to write something in there to see what would happen. I was able to mention the users defined in the USERS array with an @ sign. Similarly, I could use hashtags to refer to any of the elements defined in the TAGS array.

Here's a live demo, and the repo that powers it.

What is Remirror?

Remirror is a toolkit for building cross-platform text editors in the framework of your choice. According to maintainer and creator Ifiok, Remirror "started as a personal challenge". The goal was to explore the possibility of building "an editor that combined excellent performance with ease of use". He also felt it necessary to "give users of all frameworks the ability to create an editor by picking and choosing their desired building blocks". It's based off of a similar tool called ProseMirror, which brands itself as a toolkit for this sort of thing.

So what’s the difference between ProseMirror and Remirror?

The goals of both open source projects sound pretty similar.

Ifiok states the difference:

"I find things to be much simpler when similar concerns are close together. That's why the extension-based structure of Remirror works really well for me. You can add a bold extension which takes care of the commands, input rule support, paste matching support, checking whether your current selection has bold active, any relevant plugins... it's all managed for you. With pure ProseMirror, each of these things would need custom implementation and managing that can be tedious, especially as the editor functionality grows. It can quickly become very messy, even for big companies, without a lot of oversight. I hope that Remirror is that oversight mechanism which allows users to focus their development efforts on higher level features and not low-level structure."

In short, Remirror’s goal was to make ProseMirror easy for React developers. Fortunately, Remirror has evolved and can be used with any framework.

CTO of Next Engineering Ronny Roeller described his team’s journey in finding and implementing Remirror as a rich text editor for their comment feature. Initially, his team used a plain text editor, but it limited their users’ desires to mention other users and add tags. They tried Quill, but users still hoped for more, like the ability to reference data, embed content, and collaboratively edit. The team migrated over to ProseMirror, and while it was a great solution, the learning curve wasn’t worth it.

Finally, they settled on Remirror. They were sold on the ability to customize and extend features whenever their users asked for more. Today, the team actually contributes to Remirror as an open-source project. You can read more about the company’s journey to Remirror here.

Sponsor and contribute

Ifiok is not the only one who benefits from the sponsorship of this project. He generously adds consistent contributors to the list so that people can sponsor them as well. He recognizes that the community plays a role in the project's success.

If Remirror has piqued your interest, take a look at the repository, the documentation, and the Contributing.md. As I’m writing, the repo has approximately 85 open issues, so get started and pick up an issue today!