My pain building a WYSIWYG editor with contenteditable

This page summarizes the projects mentioned and recommended in the original post on reddit.com/r/webdev

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Scout APM - Less time debugging, more time building
  • SonarLint - Deliver Cleaner and Safer Code - Right in Your IDE of Choice!
  • Editor.js

    A block-styled editor with clean JSON output

    https://editorjs.io is easy to use and customizable. Not as big as some of the others but completely free

  • quill

    Quill is a modern WYSIWYG editor built for compatibility and extensibility.

    https://github.com/quilljs/quill/issues/2619 https://github.com/quilljs/quill/issues/3359

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • tiptap

    The headless editor framework for web artisans.

    Dude, go with ProseMirror. It has all the building blocks you'll need to accomplish what you folks are after. There's also the wrapper project TipTap which makes it a bit easier to work with in TypeScript.

  • TinyMCE

    The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular

    There's quite a few. I use TinyMCE : https://www.tiny.cloud/

  • ProseMirror

    The ProseMirror WYSIWYM editor

    Dude, go with ProseMirror. It has all the building blocks you'll need to accomplish what you folks are after. There's also the wrapper project TipTap which makes it a bit easier to work with in TypeScript.

  • trix

    A rich text editor for everyday writing

    Well, there is Trix which uses an internal document model and does not rely on execCommand at all: https://trix-editor.org

  • rangy

    A cross-browser JavaScript range and selection library.

    Working with contenteditable, execCommand, and rangy (shoutout to timdown who was the ultimate resource for everything caret-related), to get just a somewhat decent experience, is still to this day one of the most frustrating and things I've ever done.

  • Scout APM

    Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.

  • TOAST UI Editor

    🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.

  • Draft.js

    A React framework for building text editors.

    I really like Draft.js https://draftjs.org/ (for React by FB) takes quite a bit to get to know and work with but you get a lot total freedom in UI design and tons of space in implementation. Major downside, the last time I checked, is it had some pretty serious bugs on mobile (unusable in some cases).

  • Highlight.js

    JavaScript syntax highlighter with language auto-detection and zero dependencies.

    I import code from highlight.js libraries as needed - we support over 50 programming languages so when the user adds a code block or when it edits the programming language of a code block later - there is a promise that loads the library for that programming language from highlight.js and then, it applies it to the target

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts