React-Ritzy: Collaborative web-based rich text editor

Ritzy Editor

Join%20Chat license Apache blue ritzy ritzy


Demo / Short Introduction (TL;DR)

Finally, a good, open source, cross-browser [1], rich text, real-time, embeddable, collaborative editor for the web! Here is a demo:

[1] IE10+ and evergreen browsers supported, perhaps earlier browsers will work too.

Note that the code is alpha quality.

Longer Introduction

The Ritzy editor is a rich text, real-time character-by-character collaborative embeddable browser-based editor. It shuns use of the contentEditable attribute in favor of a custom editor surface and layout engine, exactly like the approach implemented by Google Docs.

In addition, and also like Google Docs, Ritzy is built with real-time collaborative editing support from the ground up, unlike most browser-based editors that require third-party plugins or that do not support it at all. The underlying mechanism for this is a causal tree CRDT.

Ritzy implements all the basic expected text editing functionality, such as bold, underline, strikethrough, superscript, subscript, selection via keyboard and mouse, cut, copy, and paste. More capabilities will be added as needed or as third-party contributions are received.


  • Real-time collaborative text editing just like Google Docs, with all the basic standard editing features and shortcuts.

  • Multiple author colored/labeled cursor and selection tracking in real-time.

  • Paragraph flow control, including wrapping support for long words/URLs.

  • Selection and keyboard navigation behavior mimicking common platforms like Microsoft Word and Google Docs.

  • Cursor decorations such as blinking with focus and idle, slant when traversing italic text, and invisible when there is no focus.

  • Selection decorations such as gray-out when editor does not have focus.

  • Automatically scrolling the document window horizontally and vertically to keep the cursor visible.

  • Cut/copy/paste of clipboard data, including conversion between rich text and HTML, including support for copy/paste to/from Microsoft Word.

  • API to control the editor and to obtain selections as rich text, HTML, or plain text.

  • Input handling and support for non-english languages.

  • Offline simultaneous editing.

Limitations and Target Audience

Unlike Google Docs, Ritzy does not (currently) support complex page-based layout needed to build a word processor. It will be most useful for those developers who wish to add collaborative rich-text data entry fields to their browser applications. However, some layout capabilities are planned to be added over time, such as bulleted and numbered lists, styles, and other such features.

Mobile Support

Mobile is partially supported. On a Nexus 5 and Nexus 7 with a recent Chrome, the following seem to work:

  • basic text entry (though there are some quirks – for some reason the phone wants to capitalize every word and not enter spaces automatically),

  • cursor positioning, and

  • real-time view of other people’s cursors, selections, and typing.

Ritzy has not yet been tested on any iOS devices, but it is likely with some tweaking similar capabilities as noted above will be possible on any recent model.

Selections do not work at all. It is possible that this is an intractable problem with the editor as it exists today, given how selections on mobile work. One possible solution is to take the same approach that Google appears to have taken with Docs – for editing, create a native component that talks the same underlying data exchange language for collaboration, but with native rendering of the editor and interaction with the user. There are no immediate plans to work on this.

As an aside, similar integration could be done for native desktop editors.

Production Readiness

The code is alpha quality. Lots of real-world testing is needed. While the client side is pretty performant once the editor is loaded, lots of optimization work remains to be done, especially on the underlying CRDT data structures.

Supported Data Formats

Ritzy can import and export data in JSON, HTML, and text. See API Content and API Selection.

Rich Text JSON

Ritzy can import and export a JSON structure containing an array of text chunks with associated attributes. These attributes are currently boolean values for bold, italics, and so forth, but could in the future include other values such as style names.

This format is "full fidelity" i.e. exported rich text data is guaranteed to be imported exactly. Here is an example:
let content = [
  { 'text': 'This is some ', 'attrs': null },
  { 'text': 'bold', 'attrs': {'bold': true} },
  { 'text': ' text.', 'attrs': null }


Ritzy can import and export HTML. This is used internally by the editor when copying/pasting rich text to external applications such as Word or Google Docs.

Plain Text

Ritzy can import and export plain text. This is used internally by the editor when copying/pasting plain text to external applications such as text editors.

Native Causal Tree CRDT

The internal data model for the editor is a causal tree CRDT described in the DESIGN.

In addition to the formats described above which will be used most often, this data is also accessible via the API.

This format is not final, and is subject to change in future versions.


Ritzy is an ES6 React component with an optional API wrapper. Currently, it does require a server-side implementation to support collaborative editing. In the future, this will be optional.

See the INSTALLATION document for information about how to integrate Ritzy into your client and server-side infrastructure.


The following is a tentative list of features and capabilities that will be added over time. Contributions are welcome.

  • Tests (many, see GitHub issue xx) (hard!).

  • Once tests are in place, refactoring to make the editor code more modular / easier to understand (hard).

  • Undo/redo (hard).

  • Make Ritzy work without a shared replica and server implementation — create a local-only replica with the same API (medium).

  • Performance improvements. Performance is pretty good right now, but much can be done to improve it further. Some ideas:

    • Use immutable collections as much as possible e.g.

    • Implement some type of compression and/or indexing for characters within the causal tree CRDT.

    • Clear stale data from the causal tree CRDT, such as deletions (but keep enough for revision history).

    • Cache frequently used / slow operations where possible.

    • Server-side performance improvements. Currently the initial load can become very slow as the replica continues to grow.

  • Styles for content e.g. headings, lists, etc. (medium).

  • Add to the API (easy):

    • Insert HTML at a particular position specified by the native data model

    • Command and status support for text attributes e.g. to support a toolbar

    • See Historic Editing APIs for comparison/implementation with contentEditable-based APIs.

  • A skinnable and/or replaceable toolbar that leverages the editor API (medium).

  • Test and support editor fonts other than OpenSans (easy to medium?).

  • Handle font size as a character attribute (medium to hard).

  • Reduce the number of dependencies and lower download size as much as is possible without sacrificing clarity and maintainability.

  • Search/replace (TODO).

  • Figures and tables (TODO).

  • Bullets and numbering (TODO).

  • Inline images (TODO).

  • Right-click menu support (medium).

  • Color-coded authoring display (medium).

  • Text highlighting (easy to medium?).

  • History/timeline/revision view (hard).

  • Drag and drop support (medium).

Commercial Features (Future)

In addition to the editor which will remain free and open source, VIVO Systems, the organization behind Ritzy, is considering offering the Ritzy editor as a service. A server-side component is required for real-time collaboration.

A simple but working server-side component is bundled. See the INSTALLATION documentation.

The commercial server-side solution will handle storage, communications, security, availability, and provide a simple but powerful server-side API for developers to interact with the editors under their control, and the data they contain. Some of the features of this API may include:

  • Create, archive, and destroy text replicas.

  • User identification and specification of authoring labels.

  • Set and modify access control.

  • Get editor contents (snapshot + real-time bidirectional push).

    • Integration with various server-side libraries e.g. Akka, Vert.X, RxJava, Kafka, etc.

  • Set or modify editor contents.

  • Show server feedback on editor surface e.g. comments/errors/word highlights.

  • Get revision history.

  • Get editing statistics e.g. authors, character count overall and by author, word count overall and by author, time spent editing overall and by author, and so forth.

  • Isomorphic rendering of editor’s server-side and client-side for performance.

Please let us know if your company or startup may be interested in such a service.



Support is provided on an as-available basis via GitHub issues.

Contact [email protected] @ VIVO Systems for paid support or enhancements.


  • Page breaks like in Google docs.
    Page breaks like in Google docs.

    Aug 18, 2016

    Hi! Does the editor pagination like in Google docs?


  • Inline media assets (images, etc.)
    Inline media assets (images, etc.)

    Nov 3, 2016

    I'd like to contribute with the ability to include inline assets (such as images, youtube videos, etc). Is the level of effort on this unrealistically high? I see that the data model focuses on individuals characters syncing over Swarm, but has the door been left open for non-text elements?

    enhancement help wanted 
  • Question about style conflicts
    Question about style conflicts

    Dec 8, 2016

    If it is not a big problem, I would have a small question about the CRDT of the editor: How did you solve attribute update conflicts?


    1. User A and user B both offline.
    2. User A makes atom X bold.
    3. User B makes atom X bold.
    4. User B makes atom X non-bold.
    5. User A and user B both go online.
    6. User A have to following operations for atom X: (bold) + (bold + not-bold) => (not-bold)
    7. User B have to following operations for atom X: (bold + not-bold) + (bold) => (bold)
    8. User A and user B have a different version of atom X after they have received every operation.
  • dist directory missing
    dist directory missing

    Oct 9, 2017

    INSTALLATION instructions mention a dist/ directory with pre-compiled client-side files. I cannot find this, could you please advise?

    Normally in this case I would go download the resources off the demo site instead, but the demo site is down (serving 503). Could you take a look?

    Cheers, Tom

  • Migrate demo to new location
    Migrate demo to new location

    Oct 10, 2017

    Redhat Openshift has killed their old servers. Migrate the demo to some new location.

  • Awesome project. Why not continued?
    Awesome project. Why not continued?

    Jun 26, 2018

  • fix mac shortcuts can't work bug
    fix mac shortcuts can't work bug

    Aug 24, 2015

  • Need global error handler / refresh advice
    Need global error handler / refresh advice

    Aug 19, 2015

    In case of errors, the state of the editor can be corrupted and weird things subsequently happen. Need to create a global error handler such that such errors can be captured, logged (to a remote server also?), and then the user is prompted to refresh the editor so that they can resume editing on a known good state.

  • 10000px height block
    10000px height block

    Oct 1, 2015

    Can you tell me for what is needed?

  • Demo website down
    Demo website down

    Aug 24, 2015

    hi, just wanted to let you know that the demo website seems to have a problem.

    Service Temporarily Unavailable

    The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later.

    Apache/2.2.15 (Red Hat) Server at Port 80

  • how to build and run ritzy-demo
    how to build and run ritzy-demo

    Mar 15, 2016


    I have tried to see the demo online, but it is not working at the moment.

    I have tried to run from the source but there is no instructions.

    I did:

    npm install

    npm run start

    but the start command does: "start": "node build/server.js"

    but there is no build folder.. and there is no build script in the package.json.. and no instruction as how to build..

    I have also tried: babel-node src/server.js

    but gives an error:

    babel-node src/server.js /Volumes/DevCard/Developer/react-stuff/ritzy-demo/node_modules/babel-core/lib/polyfill.js:8 throw new Error("only one instance of babel/polyfill is allowed");

    .. would appreciate build/run instructions in the demo project..

    Thanks and keep up with the great work.

  • On OS X, shortcuts for text formatting should use the Command key
    On OS X, shortcuts for text formatting should use the Command key

    Aug 23, 2015

    Currently they use the control key, which is not consistent with any other editor on the platform.