25 Awesome Javascript Rich-Text Editors

Rich-Text Editors, sometimes called WYSIWYG editors, allow you to create documents that include text, images, charts, grids and videos. Its aim is to reduce the effort for users trying to express their formatting as valid HTML markup. So in this post we`ve collected some awesome rich-text editors that can be used as standalone applications or as web-based components written in JavaScript.



Stylo

Stylo is an open source WYSIWYG interactive editor for JavaScript. Its goal is to bring great user experience and interactivity to the web, for everyone, with no dependencies.

Stylo

Edtr Io

Edtr.io is a WYSIWYG in-line web editor written in React. Content created with edtr.io looks just like the final page – select any editable element on the page, edit it in-place or drag ’n’ drop it around. Its plugin architecture makes edtr.io lean AND adaptable to any use case at the same time. Edtr.io is of course Open Source.

Edtr Io

Quill

It is basically a Microsoft word that runs inside of the browser. Quill is a modern rich text editor built for compatibility and extensibility.

Quill

Slate

It lets you build rich, intuitive editors like those in Medium, Dropbox Paper or Google Docs—which are becoming table stakes for applications on the web—without your codebase getting mired in complexity.

Slate

Marcdown

Lightweight realtime markdown viewer and editor – Simple, clean and beautiful.

Marcdown

Trix

Compose beautifully formatted text in your web application. Trix is a WYSIWYG editor for writing messages, comments, articles, and lists—the simple documents most web apps are made of. It features a sophisticated document model, support for embedded attachments, and outputs terse and consistent HTML.

Trix

Write With Me

Real-time Collaborative Markdown Editor. A real-time collaborative blog post editor built with GraphQL, React, React Markdown, & AWS AppSync.

Write With Me

ORY

The ORY Editor is a smart, extensible and modern editor for the web written in React. If you are fed up with the limitations of contenteditable, you are in the right place.

ORY

Pell

It is the simplest and smallest WYSIWYG text editor for web, with no dependencies.

Pell

tiptap

A renderless and extendable rich-text editor for Vue.js The editor should be easy to extend and not based on old dependencies such as jQuery. For React there is already a great editor called Slate.js, which impresses with its modularity.

tiptap

Trumbowyg

It is a lightweight WYSIWYG editor to make work on your website as straightforward as it gets.

Trumbowyg

React Draft Wysiwyg

A Wysiwyg editor built using ReactJS and DraftJS libraries.

React Draft Wysiwyg

textAngular

A radically powerful Text-Editor/Wysiwyg editor for Angular.js! Create multiple editor instances, two-way-bind HTML content, watch editors for changes and more!

textAngular

Pen Editor

enjoy live editing (+markdown).

Pen Editor

CKEditor 5

A set of ready-to-use rich text editors created with a powerful framework. Made with real-time collaborative editing in mind.

CKEditor 5

Mobiledoc

It is a framework-agnostic library for building WYSIWYG editors supporting rich content via cards.

Mobiledoc

Canner slate editor

Rich text / WYSIWYG editor focus on modularity and extensibility, build on top of Slate framework with beautiful designs and high-level APIs.

Canner

Megadraft

It is a Rich Text editor built on top of Facebook’s Draft.JS featuring a nice default base of components and extensibility.

Megadraft

HyperMD

A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.

HyperMD

EmojiOne Area

It is a small jQuery plugin that allows you to transform any html element into simple WYSIWYG editor with ability to use Emojione icons.

EmojiOne Area

GrapesJS

It is an open-source, multi-purpose, Web Builder Framework which combines different tools and features with the goal to help you (or users of your application) to build HTML templates without any knowledge of coding. It’s a perfect solution to replace the common WYSIWYG editors, which are good for content editing but inappropriate for creating HTML structures.

GrapesJS

woofmark

A modular, progressive, and beautiful Markdown and HTML editor.

woofmark

Sir Trevor

It is rich content editing entirely re-imagined for the web: an intuitive editor for web content which does not presuppose anything about how it will be rendered.

Sir Trevor

SimpleMDE

A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.

SimpleMDE

Squire

It is an HTML5 rich text editor, which provides powerful cross-browser normalisation in a flexible lightweight package. It was designed to handle email composition for the FastMail web app. The most important consequence of this (and where Squire differs from most other modern rich text editors) is that it must handle arbitrary HTML, because it may be used to forward or quote emails from third-parties and must be able to preserve their HTML without breaking the formatting.

Squire

ProseMirror

It is a well-behaved rich semantic content editor based on contentEditable, with support for collaborative editing and custom document schemas.

ProseMirror

wysihtml

It is an extended and less strict approach on xing/wysihtml5 open source rich text editor. The code is library agnostic and has all dependencies bundled: No jQuery, Prototype or similar is required. The currently bundled dependencies are rangy.js (including textrange and selectionsaverestore modules) and base.js.

wysihtml

0 Comments

  1. Dinesh Rsays:

    Hi, that’s a great list, but you left out Syncfusion Javascript Rich Text Editor. Check out the link below to learn more about the control.
    https://www.syncfusion.com/javascript-ui-controls/js-wysiwyg-rich-text-editor

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.