react-easy-editor

Rich text editing for React, in one component.

Add <Editor /> and your users get a full toolbar, tables, code blocks, image upload, Markdown shortcuts and dark mode. Nothing to configure, and free under the MIT license.

npm install react-easy-editor

What’s inside

Everything you can do from the toolbar, and what you get as a developer.

Text formatting

  • Bold, italic, underline and strikethrough
  • Superscript and subscript
  • Font family and font size
  • Text and background colors
  • Paragraph, heading 1 to 4 and quote styles
  • Align left, center, right or justify
  • Line height
  • Clear formatting

Lists and layout

  • Bulleted and numbered lists
  • Increase and decrease indent
  • Horizontal line
  • Alert boxes: note, tip, important, caution and warning
  • Special characters
  • Emoji picker with search

Tables

  • Insert a table of any size
  • Add or delete rows and columns
  • Merge and split cells, toggle a header row
  • Cell text, background and border colors
  • Drag to resize columns

Code blocks

  • Tabbed code blocks with a file name on each tab
  • Syntax highlighting for 19 languages
  • Copy button, and edit or delete tabs in place

Links, images, video and files

  • Insert, edit, open and remove links, with Ctrl+K
  • Images from a URL, the file picker, drag and drop, or paste
  • Alt text, resizing, and placing images side by side
  • Your own upload function, with an instant preview
  • Video from YouTube, Vimeo or a direct link
  • File links

Editing

  • Undo and redo
  • Find and replace, with match case and replace all
  • Cut, copy, paste and select all
  • Markdown shortcuts as you type
  • A free line always follows a trailing code block, table or quote, so you can keep typing
  • Word and character count, with an optional limit

Views and tools

  • HTML source view
  • Preview
  • Print or save as PDF
  • Full screen
  • Lock to read-only
  • Light and dark themes

For developers

  • Controlled value and onChange, or a ref with getHTML, setHTML, focus and more
  • A real form field: give it a name
  • Choose, reorder or add toolbar buttons and plugins
  • TypeScript types, ESM and CommonJS, Next.js App Router
  • English, Spanish, French, German and Hindi, plus right-to-left text
  • Styles scoped to the editor, themed with CSS variables
  • HTML cleaned on load, paste and undo
  • ContentViewer to show saved content