react-markdown vs slate vs draft-js vs react-quill vs react-draft-wysiwyg vs react-markdown-editor-lite
Rich Text Editors for React Comparison
1 Year
react-markdownslatedraft-jsreact-quillreact-draft-wysiwygreact-markdown-editor-liteSimilar Packages:
What's Rich Text Editors for React?

Rich text editors are essential tools in web development that allow users to create and format text content easily. They provide a user-friendly interface for editing text with various formatting options, such as bold, italics, lists, and links. The selected libraries each offer unique features and capabilities, catering to different use cases and developer preferences. Understanding the differences between these libraries can help developers choose the right tool for their specific needs, whether it's for simple markdown editing or complex rich text formatting.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
react-markdown3,850,04913,81451 kB02 days agoMIT
slate1,110,31930,4462.12 MB6873 months agoMIT
draft-js835,94622,580-9555 years agoMIT
react-quill643,9716,866405 kB423-MIT
react-draft-wysiwyg263,3226,462299 kB754-MIT
react-markdown-editor-lite29,9241,060994 kB56-MIT
Feature Comparison: react-markdown vs slate vs draft-js vs react-quill vs react-draft-wysiwyg vs react-markdown-editor-lite

Customization

  • react-markdown:

    React Markdown is primarily focused on rendering markdown rather than editing, so customization is minimal. It supports basic markdown syntax and can be styled through CSS, but it does not offer editing capabilities.

  • slate:

    Slate is designed for maximum customization and extensibility. It provides a low-level API that allows developers to create completely unique editing experiences, making it suitable for applications with specific requirements.

  • draft-js:

    Draft.js offers extensive customization options, allowing developers to create tailored editing experiences. You can define custom block types, inline styles, and even implement your own decorators to handle specific formatting needs.

  • react-quill:

    React Quill strikes a balance between customization and usability. It allows developers to customize the toolbar and add custom formats, making it flexible for various editing needs while maintaining a user-friendly interface.

  • react-draft-wysiwyg:

    React Draft WYSIWYG provides a pre-built toolbar with various formatting options, but customization is limited compared to Draft.js. It allows for some styling adjustments but is primarily designed for quick integration without deep customization.

  • react-markdown-editor-lite:

    React Markdown Editor Lite allows for some customization in terms of toolbar options and markdown rendering, but it is still limited compared to more complex editors. It is designed for ease of use rather than extensive customization.

Ease of Use

  • react-markdown:

    React Markdown is straightforward to use for rendering markdown content. It requires minimal setup and is ideal for developers looking for a simple solution to display formatted text.

  • slate:

    Slate has a steep learning curve due to its flexibility and the need for custom implementations. While it offers powerful capabilities, developers may need to invest significant time to fully understand and utilize its features.

  • draft-js:

    Draft.js has a steeper learning curve due to its flexibility and customization options. Developers need to invest time in understanding its architecture and how to implement features effectively.

  • react-quill:

    React Quill is relatively easy to use, with a simple API and a customizable toolbar. It strikes a good balance between functionality and usability, making it accessible for both beginners and experienced developers.

  • react-draft-wysiwyg:

    React Draft WYSIWYG is user-friendly and easy to integrate, making it suitable for developers who want a quick solution without extensive configuration. Its WYSIWYG interface is intuitive for end-users as well.

  • react-markdown-editor-lite:

    React Markdown Editor Lite is designed for ease of use, providing a live preview feature that enhances the user experience. It is suitable for users who prefer a simple markdown editing experience with immediate visual feedback.

Rendering Performance

  • react-markdown:

    React Markdown is lightweight and efficient for rendering markdown content. It performs well even with larger markdown documents, as it focuses solely on rendering rather than editing.

  • slate:

    Slate's performance is highly dependent on how it is implemented. While it can handle complex editing scenarios, developers need to be mindful of performance optimizations, especially with large documents.

  • draft-js:

    Draft.js is optimized for performance, handling large documents efficiently. It uses an immutable data structure to manage state, which helps in minimizing re-renders and improving overall performance.

  • react-quill:

    React Quill is designed for performance and can handle rich text content efficiently. It optimizes rendering and updates, making it suitable for applications with dynamic content.

  • react-draft-wysiwyg:

    React Draft WYSIWYG performs well for typical use cases, but performance may degrade with very large documents or complex content due to its reliance on Draft.js under the hood.

  • react-markdown-editor-lite:

    React Markdown Editor Lite maintains good performance while providing live previews. However, performance may vary with extremely large markdown inputs due to real-time rendering.

Community and Support

  • react-markdown:

    React Markdown has a solid user base and is widely used for rendering markdown in React applications. Its simplicity contributes to a strong community of users sharing tips and solutions.

  • slate:

    Slate has a dedicated community of developers, and while it may not be as large as others, it offers robust documentation and resources for building custom editors.

  • draft-js:

    Draft.js has a strong community and is backed by Facebook, ensuring ongoing support and updates. There are numerous resources and examples available for developers to learn from.

  • react-quill:

    React Quill benefits from a large community and extensive documentation, making it easy for developers to find help and resources. Its popularity ensures a wealth of examples and plugins available for use.

  • react-draft-wysiwyg:

    React Draft WYSIWYG has an active community, and while it may not be as large as Draft.js, it offers sufficient resources and documentation to assist developers.

  • react-markdown-editor-lite:

    React Markdown Editor Lite has a growing community, and while it may not have extensive resources, it is easy to use, which encourages user contributions and support.

Integration

  • react-markdown:

    React Markdown can be easily integrated into any React application for rendering markdown content. Its simplicity and lightweight nature make it a convenient choice for displaying formatted text.

  • slate:

    Slate requires more effort for integration due to its flexibility and customization options. While it can be integrated into React applications, developers need to be prepared for a more complex setup.

  • draft-js:

    Draft.js integrates seamlessly with React applications, allowing for smooth state management and component interactions. It is designed specifically for React, making it a natural choice for React developers.

  • react-quill:

    React Quill is designed for easy integration into React applications, with a straightforward API and customizable components that fit well into existing workflows.

  • react-draft-wysiwyg:

    React Draft WYSIWYG is easy to integrate into existing React applications, providing a straightforward way to add rich text editing capabilities without extensive setup.

  • react-markdown-editor-lite:

    React Markdown Editor Lite integrates well into React applications, providing a simple way to add markdown editing capabilities with live previews, making it user-friendly.

How to Choose: react-markdown vs slate vs draft-js vs react-quill vs react-draft-wysiwyg vs react-markdown-editor-lite
  • react-markdown:

    Opt for React Markdown if your primary focus is on rendering markdown content rather than editing. It is lightweight and straightforward, making it ideal for displaying formatted text while supporting a variety of markdown features without the overhead of a full editor.

  • slate:

    Select Slate if you require a highly customizable and extensible framework for building rich text editors. It provides a low-level API that allows developers to create unique editing experiences tailored to specific requirements, making it ideal for complex use cases.

  • draft-js:

    Choose Draft.js if you need a highly customizable rich text editor that allows for deep integration with React. It provides a solid foundation for building complex text editing experiences but requires more effort to implement features like toolbars and formatting options.

  • react-quill:

    Choose React Quill if you need a versatile editor that balances simplicity and functionality. It offers a rich set of features, including a customizable toolbar, and is easy to integrate, making it suitable for both beginners and advanced users looking for a straightforward rich text editing solution.

  • react-draft-wysiwyg:

    Select React Draft WYSIWYG if you want a ready-to-use rich text editor with a WYSIWYG interface. It simplifies the process of integrating rich text editing into your application, offering a user-friendly toolbar and built-in formatting options without extensive customization.

  • react-markdown-editor-lite:

    Use React Markdown Editor Lite if you want a simple markdown editor with a live preview feature. It combines markdown editing with a visual representation, making it easy for users to see their formatting changes in real-time, suitable for lightweight applications.

README for react-markdown

react-markdown

Build Coverage Downloads Size

React component to render markdown.

Feature highlights

  • [x] safe by default (no dangerouslySetInnerHTML or XSS attacks)
  • [x] components (pass your own component to use instead of <h2> for ## hi)
  • [x] plugins (many plugins you can pick and choose from)
  • [x] compliant (100% to CommonMark, 100% to GFM with a plugin)

Contents

What is this?

This package is a React component that can be given a string of markdown that it’ll safely render to React elements. You can pass plugins to change how markdown is transformed and pass components that will be used instead of normal HTML elements.

When should I use this?

There are other ways to use markdown in React out there so why use this one? The three main reasons are that they often rely on dangerouslySetInnerHTML, have bugs with how they handle markdown, or don’t let you swap elements for components. react-markdown builds a virtual DOM, so React only replaces what changed, from a syntax tree. That’s supported because we use unified, specifically remark for markdown and rehype for HTML, which are popular tools to transform content with plugins.

This package focusses on making it easy for beginners to safely use markdown in React. When you’re familiar with unified, you can use a modern hooks based alternative react-remark or rehype-react manually. If you instead want to use JavaScript and JSX inside markdown files, use MDX.

Install

This package is ESM only. In Node.js (version 16+), install with npm:

npm install react-markdown

In Deno with esm.sh:

import Markdown from 'https://esm.sh/react-markdown@10'

In browsers with esm.sh:

<script type="module">
  import Markdown from 'https://esm.sh/react-markdown@10?bundle'
</script>

Use

A basic hello world:

import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'

const markdown = '# Hi, *Pluto*!'

createRoot(document.body).render(<Markdown>{markdown}</Markdown>)
Show equivalent JSX
<h1>
  Hi, <em>Pluto</em>!
</h1>

Here is an example that shows how to use a plugin (remark-gfm, which adds support for footnotes, strikethrough, tables, tasklists and URLs directly):

import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

const markdown = `Just a link: www.nasa.gov.`

createRoot(document.body).render(
  <Markdown remarkPlugins={[remarkGfm]}>{markdown}</Markdown>
)
Show equivalent JSX
<p>
  Just a link: <a href="http://www.nasa.gov">www.nasa.gov</a>.
</p>

API

This package exports the identifiers MarkdownAsync, MarkdownHooks, and defaultUrlTransform. The default export is Markdown.

Markdown

Component to render markdown.

This is a synchronous component. When using async plugins, see MarkdownAsync or MarkdownHooks.

Parameters
Returns

React element (ReactElement).

MarkdownAsync

Component to render markdown with support for async plugins through async/await.

Components returning promises are supported on the server. For async support on the client, see MarkdownHooks.

Parameters
Returns

Promise to a React element (Promise<ReactElement>).

MarkdownHooks

Component to render markdown with support for async plugins through hooks.

This uses useEffect and useState hooks. Hooks run on the client and do not immediately render something. For async support on the server, see MarkdownAsync.

Parameters
Returns

React element (ReactElement).

defaultUrlTransform(url)

Make a URL safe.

Parameters
  • url (string) — URL
Returns

Safe URL (string).

AllowElement

Filter elements (TypeScript type).

Parameters
Returns

Whether to allow element (boolean, optional).

Components

Map tag names to components (TypeScript type).

Type
import type {ExtraProps} from 'react-markdown'
import type {ComponentProps, ElementType} from 'react'

type Components = {
  [Key in Extract<ElementType, string>]?: ElementType<ComponentProps<Key> & ExtraProps>
}

ExtraProps

Extra fields we pass to components (TypeScript type).

Fields

Options

Configuration (TypeScript type).

Fields
  • allowElement (AllowElement, optional) — filter elements; allowedElements / disallowedElements is used first
  • allowedElements (Array<string>, default: all tag names) — tag names to allow; cannot combine w/ disallowedElements
  • children (string, optional) — markdown
  • components (Components, optional) — map tag names to components
  • disallowedElements (Array<string>, default: []) — tag names to disallow; cannot combine w/ allowedElements
  • rehypePlugins (Array<Plugin>, optional) — list of rehype plugins to use
  • remarkPlugins (Array<Plugin>, optional) — list of remark plugins to use
  • remarkRehypeOptions (Options from remark-rehype, optional) — options to pass through to remark-rehype
  • skipHtml (boolean, default: false) — ignore HTML in markdown completely
  • unwrapDisallowed (boolean, default: false) — extract (unwrap) what’s in disallowed elements; normally when say strong is not allowed, it and it’s children are dropped, with unwrapDisallowed the element itself is replaced by its children
  • urlTransform (UrlTransform, default: defaultUrlTransform) — change URLs

UrlTransform

Transform URLs (TypeScript type).

Parameters
  • url (string) — URL
  • key (string, example: 'href') — property name
  • node (Element from hast) — element to check
Returns

Transformed URL (string, optional).

Examples

Use a plugin

This example shows how to use a remark plugin. In this case, remark-gfm, which adds support for strikethrough, tables, tasklists and URLs directly:

import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

const markdown = `A paragraph with *emphasis* and **strong importance**.

> A block quote with ~strikethrough~ and a URL: https://reactjs.org.

* Lists
* [ ] todo
* [x] done

A table:

| a | b |
| - | - |
`

createRoot(document.body).render(
  <Markdown remarkPlugins={[remarkGfm]}>{markdown}</Markdown>
)
Show equivalent JSX
<>
  <p>
    A paragraph with <em>emphasis</em> and <strong>strong importance</strong>.
  </p>
  <blockquote>
    <p>
      A block quote with <del>strikethrough</del> and a URL:{' '}
      <a href="https://reactjs.org">https://reactjs.org</a>.
    </p>
  </blockquote>
  <ul className="contains-task-list">
    <li>Lists</li>
    <li className="task-list-item">
      <input type="checkbox" disabled /> todo
    </li>
    <li className="task-list-item">
      <input type="checkbox" disabled checked /> done
    </li>
  </ul>
  <p>A table:</p>
  <table>
    <thead>
      <tr>
        <th>a</th>
        <th>b</th>
      </tr>
    </thead>
  </table>
</>

Use a plugin with options

This example shows how to use a plugin and give it options. To do that, use an array with the plugin at the first place, and the options second. remark-gfm has an option to allow only double tildes for strikethrough:

import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

const markdown = 'This ~is not~ strikethrough, but ~~this is~~!'

createRoot(document.body).render(
  <Markdown remarkPlugins={[[remarkGfm, {singleTilde: false}]]}>
    {markdown}
  </Markdown>
)
Show equivalent JSX
<p>
  This ~is not~ strikethrough, but <del>this is</del>!
</p>

Use custom components (syntax highlight)

This example shows how you can overwrite the normal handling of an element by passing a component. In this case, we apply syntax highlighting with the seriously super amazing react-syntax-highlighter by @conorhastings:

import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
import {dark} from 'react-syntax-highlighter/dist/esm/styles/prism'

// Did you know you can use tildes instead of backticks for code in markdown? ✨
const markdown = `Here is some JavaScript code:

~~~js
console.log('It works!')
~~~
`

createRoot(document.body).render(
  <Markdown
    children={markdown}
    components={{
      code(props) {
        const {children, className, node, ...rest} = props
        const match = /language-(\w+)/.exec(className || '')
        return match ? (
          <SyntaxHighlighter
            {...rest}
            PreTag="div"
            children={String(children).replace(/\n$/, '')}
            language={match[1]}
            style={dark}
          />
        ) : (
          <code {...rest} className={className}>
            {children}
          </code>
        )
      }
    }}
  />
)
Show equivalent JSX
<>
  <p>Here is some JavaScript code:</p>
  <pre>
    <SyntaxHighlighter language="js" style={dark} PreTag="div" children="console.log('It works!')" />
  </pre>
</>

Use remark and rehype plugins (math)

This example shows how a syntax extension (through remark-math) is used to support math in markdown, and a transform plugin (rehype-katex) to render that math.

import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import rehypeKatex from 'rehype-katex'
import remarkMath from 'remark-math'
import 'katex/dist/katex.min.css' // `rehype-katex` does not import the CSS for you

const markdown = `The lift coefficient ($C_L$) is a dimensionless coefficient.`

createRoot(document.body).render(
  <Markdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>
    {markdown}
  </Markdown>
)
Show equivalent JSX
<p>
  The lift coefficient (
  <span className="katex">
    <span className="katex-mathml">
      <math xmlns="http://www.w3.org/1998/Math/MathML">{/* … */}</math>
    </span>
    <span className="katex-html" aria-hidden="true">
      {/* … */}
    </span>
  </span>
  ) is a dimensionless coefficient.
</p>

Plugins

We use unified, specifically remark for markdown and rehype for HTML, which are tools to transform content with plugins. Here are three good ways to find plugins:

Syntax

react-markdown follows CommonMark, which standardizes the differences between markdown implementations, by default. Some syntax extensions are supported through plugins.

We use micromark under the hood for our parsing. See its documentation for more information on markdown, CommonMark, and extensions.

Types

This package is fully typed with TypeScript. It exports the additional types AllowElement, ExtraProps, Components, Options, and UrlTransform.

Compatibility

Projects maintained by the unified collective are compatible with maintained versions of Node.js.

When we cut a new major release, we drop support for unmaintained versions of Node. This means we try to keep the current release line, react-markdown@10, compatible with Node.js 16.

They work in all modern browsers (essentially: everything not IE 11). You can use a bundler (such as esbuild, webpack, or Rollup) to use this package in your project, and use its options (or plugins) to add support for legacy browsers.

Architecture

                                                           react-markdown
         +----------------------------------------------------------------------------------------------------------------+
         |                                                                                                                |
         |  +----------+        +----------------+        +---------------+       +----------------+       +------------+ |
         |  |          |        |                |        |               |       |                |       |            | |
markdown-+->+  remark  +-mdast->+ remark plugins +-mdast->+ remark-rehype +-hast->+ rehype plugins +-hast->+ components +-+->react elements
         |  |          |        |                |        |               |       |                |       |            | |
         |  +----------+        +----------------+        +---------------+       +----------------+       +------------+ |
         |                                                                                                                |
         +----------------------------------------------------------------------------------------------------------------+

To understand what this project does, it’s important to first understand what unified does: please read through the unifiedjs/unified readme (the part until you hit the API section is required reading).

react-markdown is a unified pipeline — wrapped so that most folks don’t need to directly interact with unified. The processor goes through these steps:

  • parse markdown to mdast (markdown syntax tree)
  • transform through remark (markdown ecosystem)
  • transform mdast to hast (HTML syntax tree)
  • transform through rehype (HTML ecosystem)
  • render hast to React with components

Appendix A: HTML in markdown

react-markdown typically escapes HTML (or ignores it, with skipHtml) because it is dangerous and defeats the purpose of this library.

However, if you are in a trusted environment (you trust the markdown), and can spare the bundle size (±60kb minzipped), then you can use rehype-raw:

import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import rehypeRaw from 'rehype-raw'

const markdown = `<div class="note">

Some *emphasis* and <strong>strong</strong>!

</div>`

createRoot(document.body).render(
  <Markdown rehypePlugins={[rehypeRaw]}>{markdown}</Markdown>
)
Show equivalent JSX
<div className="note">
  <p>
    Some <em>emphasis</em> and <strong>strong</strong>!
  </p>
</div>

Note: HTML in markdown is still bound by how HTML works in CommonMark. Make sure to use blank lines around block-level HTML that again contains markdown!

Appendix B: Components

You can also change the things that come from markdown:

<Markdown
  components={{
    // Map `h1` (`# heading`) to use `h2`s.
    h1: 'h2',
    // Rewrite `em`s (`*like so*`) to `i` with a red foreground color.
    em(props) {
      const {node, ...rest} = props
      return <i style={{color: 'red'}} {...rest} />
    }
  }}
/>

The keys in components are HTML equivalents for the things you write with markdown (such as h1 for # heading). Normally, in markdown, those are: a, blockquote, br, code, em, h1, h2, h3, h4, h5, h6, hr, img, li, ol, p, pre, strong, and ul. With remark-gfm, you can also use del, input, table, tbody, td, th, thead, and tr. Other remark or rehype plugins that add support for new constructs will also work with react-markdown.

The props that are passed are what you probably would expect: an a (link) will get href (and title) props, and img (image) an src, alt and title, etc.

Every component will receive a node. This is the original Element from hast element being turned into a React element.

Appendix C: line endings in markdown (and JSX)

You might have trouble with how line endings work in markdown and JSX. We recommend the following, which solves all line ending problems:

// If you write actual markdown in your code, put your markdown in a variable;
// **do not indent markdown**:
const markdown = `
# This is perfect!
`

// Pass the value as an expression as an only child:
const result = <Markdown>{markdown}</Markdown>

👆 That works. Read on for what doesn’t and why that is.

You might try to write markdown directly in your JSX and find that it does not work:

<Markdown>
  # Hi

  This is **not** a paragraph.
</Markdown>

The is because in JSX the whitespace (including line endings) is collapsed to a single space. So the above example is equivalent to:

<Markdown> # Hi This is **not** a paragraph. </Markdown>

Instead, to pass markdown to Markdown, you can use an expression: with a template literal:

<Markdown>{`
# Hi

This is a paragraph.
`}</Markdown>

Template literals have another potential problem, because they keep whitespace (including indentation) inside them. That means that the following does not turn into a heading:

<Markdown>{`
    # This is **not** a heading, it’s an indented code block
`}</Markdown>

Security

Use of react-markdown is secure by default. Overwriting urlTransform to something insecure will open you up to XSS vectors. Furthermore, the remarkPlugins, rehypePlugins, and components you use may be insecure.

To make sure the content is completely safe, even after what plugins do, use rehype-sanitize. It lets you define your own schema of what is and isn’t allowed.

Related

Contribute

See contributing.md in remarkjs/.github for ways to get started. See support.md for ways to get help.

This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.

License

MIT © Espen Hovlandsdal