A brief introduction to draft-js

What is this post about?

This post is a brief introduction to draft-js RTE (rich text editor), where you'll be familiar with its general usage, pros, and cons.

An introduction to text editors for web developers

Table of contents

• What is a rich text editor?
• What is draft-js?
• Draft-js pros and cons

What is a rich text editor?

A rich text editor is a type of application that gives you the ability to create and edit content with formatting and styling options.
In a rich text editor (or in a RTE), the user can apply almost all sorts of inline and block styles (Just like CSS inline and block styles).
In addition, by using a RTE you can add media or documents to your content too. The Gmail environment for writing an email
or a content management system (CMS) editor are both examples of rich text editors. RTE is more user-friendly in comparison to basic text
editors.

What is draft-js?

Briefly and as the draft-js official site says, its a

Rich Text Editor Framework for React

Draft-js is an open-source framework that was developed by Facebook. This framework allows you to build rich text editors that are
customizable and easily integrated with your other react components. Generally, draft-js is:

• Extensible
• Customizable
• Immutable

With draft-js you can build an editor that is capable to implement your ideas with your favorite UI approach. Also the data is immutable
in its state so the memory usage will be optimized automatically.

Draft-js pros and cons

These are the common draft-js benefits:

• Almost quick setups for basic usage
• You can have a highly customizable editor
• You can build a full-feature RTE
• You can covert its state to HTML, Raw Object, or even Markdown

And these are the common downsides:

• Time-consuming if you want to build a full-featured editor
• You may end up with a repetitive process
• Its documentation isn't comprehensive
• The plugin approach can make your package.json size big

---

Hi! I'm Hosein Pouyanmehr. I enjoy sharing what I learn and what I find interesting. Let's connect on LinkedIn.

See my code interests on GitHub.