My pain building a WYSIWYG editor with contenteditable

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

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • Editor.js

    A block-style 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

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • tiptap

    The headless rich text 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.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  • TOAST UI Editor

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

  • Draft.js

    Discontinued 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