
## What is this post about?

Although you get a bunch of features out of the draft-js framework, there are still some issues that can affect your experience
negatively. In this post, we'll check out the contenido library that helps you use draft-js efficiently and save the time.

## Table of contents

- What is a rich text editor?
- Draft-js pros and cons
- What is contenido?
- Features of contenido
- Why to use contenido?

## What is a draft-js?

Draft-js is an open-source [react rich text editor framework](https://draftjs.org/) that allows you to build editors for your web
application. With draft-js, you can almost create whatever you want as your editor features.

<BlogSuggest
  coverAlt='A poster of draft-js react rich text library icon and title'
  link='a-brief-introduction-to-draft-js'
/>

## 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 convert 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` a bit ugly

## What is contenido?

Draft-js has a lot of potential that can make your work outstanding. However most of the time, its downsides persuade the developers to
choose another library for their project. As mentioned earlier, you may end up repeating yourself in a lot of similar situations and
that leads you to ask why should I use my time incorrectly like this? If you have some experience in Redux, the feeling can be the same.
Redux on its own is a really powerful state management library, But the efforts, the time, the repetition, and the complexity can make you
choose an alternative.

Contenido is something like `redux-toolkit` to `redux`. You can skip the repetitions and be out of the complexity, saving a lot of time for
your other tasks and have a clean sight of what you're doing.

As the [official documentation](https://www.contenidojs.com/docs/getting-started/overview) says:

> Contenido is a library with a set of tools to help you create your own editor on top of draft-js without thinking about
> how to handle things.

## Features of contenido

These are some of contenido's features. For each section you'll also have utilities to implement your desired style or functionality.

- Inline Styles (Bold, italic, underline , ...) + Customization
- Block Types (H1 to H6, OL, UL, Blockquote, ...) + Customization
- Insertion (Media and File, Link) + Customization
- Built-in Text Alignment
- Counters and Limitation utilities

To see the complete list of its utilities checkout this [page](https://www.contenidojs.com/docs/getting-started/overview).

## Why to use contenido?

`Contenido` will be your agent to handle stuff in building a rich react text editor. These are some of the key benefits of using
contenido with `draft-js`:

### Time Saver

Using contenido helps you save a lot of time. You don't need to write every single editor's behavior on yourself. In 99% of
situations there is a ready-to-use utility for you.

### Simplicity

The job is done for you in contenido, and there is no complexity to ruin your focus or coding principles.

### Light Weight and Tree Shakeable

Contenido is written in a modular way. Each utility has its module and there is no unusual connection between those modules which
leads to a very small import size.

### Typescript

Contenido is written in typescript so unlike the draft-js you have the benefits of types as well.

### Compatible with UI Libs

If you choose a ready-to-use text editor (even if it's on top of the draft-js), you should accept the incompatible components' appearances
in your application. With contenido, you have the functionality and can completely mix it with your UI library like MUI, BootStrap,
Tailwind or even your UI principles.


In this post, we'll check out the contenido library that helps you use draft-js efficiently and save the time.