Nobody Prefers Margarine

    TypeScript icon, indicating that this package has built-in type declarations

    1.1.3 • Public • Published



    React Typescript CRDT based Collaborative Markdown Editor.

    This app aims to show a collaborative text editing application using two eventual consitency backends: revision-based and CRDT-based. This demo shows that with a revision based approach, the user loses updates, either if updates are executed concurrently online, or if multiple users edit the document offline. To have an adequate semantics, the user needs to provide custom, non-trivial, code to merge the updates executed by each user. With the CRDT-based backend, update convergence is available out-of-the-box.

    The current demo is implemented on top of PouchDB which offers replication and offline support, but can be easily ported on other equivalent backends. Later we will implement our backend without any third-party dependencies.

    Setup guide


    For the next steps, you will need the following software:

    1.Install Project dependencies

    Go to project root directory and:

    npm install

    Run the standalone application

    After, following Setup Guide above, running the app is as easy as:

    npm start

    (BETA/WIP) Use CRDT-MD-Editor React Component in another project

    The React Component is built to be easily included in other web apps, you may want to simply contain the editor inside your website or blog.

    1.Install the npm package to your React project

    npm install crdt-md-editor --save

    2.Choose the Editor instance you want to use

    CRDT-MD-Editor offers two possibilities,

    • CollabMarkdownEditor Component: The lightweight version with minimal UI, and minimal JS backend. The easiest way to include a collaborative markdown textarea to your app;
    • RichCollabMarkdownEditor Component: The complete version with Rich UI, buttons toolbar, configurable UI and backend API ported to the Edge App.

    3.Include the component in your .tsx and enjoy!

    import './App.css';
    import CollabMarkdownEditor from './Components/CollabMarkdownEditor';
    function App() {
      return (
        <div className="App">
          <CollabMarkdownEditor />
    export default App;

    (BETA/WIP) Build for server production-ready deployment

    npm install
    # and enable CORS in CouchDB using the fetched script
    # If your CouchDB instance is password protected, use -u <user> -p <password> options:
    node node_modules/add-cors-to-couchdb/bin.js
    # Then build the app using:
    npm run build
    # Note: REACT_APP_OFFLINE_FIRST=any Enables Service Workers to run application offline

    The build directory will now contain a static JS you can deploy in your server.

    Replication support

    If you want to run with cross-replica synchronization, just run a CouchDB Server, see CouchDB's installation guide




    npm i crdt-md-editor


    DownloadsWeekly Downloads






    Unpacked Size

    100 kB

    Total Files


    Last publish


    • itoumlilt