Rapid Web Front End Development - How we built a Google Docs-like Editor in No Time

Expectations in today's software development

One of Apptimia's clients is developing a cutting-edge AI product, and a comprehensive online web editor with real-time collaboration for multiple users is a crucial component. Essentially, we needed to create an editor comparable to Google Docs, with features like rich text support, image embedding, and full online collaboration. You might think: "If a large corporation spent years refining their product, how can we quickly build something similar?" At the same time, our clients don't want to pay for reinventing the wheel.

In today's world, if you aim for rapid web front-end development, thorough research into existing open-source solutions and then integrating and adapting these components is as vital as the software coding itself. Check out our story below to see how we did it.

Our approach

After all, building a full-featured, collaborative rich-text editor is no small feat. We needed a solution that would provide a seamless user experience like Google Docs or Notion, but without reinventing the wheel. After evaluating several options, we chose Tiptap, a headless WYSIWYG editor based on ProseMirror, due to its flexibility, extensibility, and collaboration capabilities.

Why Tiptap?

When evaluating rich-text editors, we had a few key requirements:

• Modular & Extensible: We needed to customize behavior and add new features easily.

• Collaboration-Ready: Real-time editing support was a must.

• Framework-Agnostic: While React was our primary choice, we wanted an editor that could be used with other frameworks if needed.

Tiptap checked all these boxes, enabling us to build a tailored editing experience with minimal effort.

Implementation Overview

1. Setting up Tiptap

After boostrapping a React + Vite project, we must install the following packages:

npm install @tiptap/react @tiptap/pm @tiptap/starter-kit

Based on Tiptap’s performance guide, we should create an editor component in a separate file along with everything which depends on it to prevent unnecessary re-renders.

🗂️/src/components/tiptap.jsx

import {
  useEditor,
  FloatingMenu,
  BubbleMenu,
  EditorContent,
} from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';

// Define your extensions array
const extensions = [StarterKit];

// Initial content
const content = '<p>🚀 Welcome to Apptimia!</p>';

const Tiptap = () => {
  const editor = useEditor({
    extensions,
    content,
  });

  return (
    <>
      <EditorContent editor={editor} />
      <BubbleMenu editor={editor}>This is the bubble menu</BubbleMenu>
      <FloatingMenu editor={editor}>This is the floating menu</FloatingMenu>
    </>
  );
};

export { Tiptap };

The only missing step is to plug our Tiptap component into App.jsx.

import { Tiptap } from './components/tiptap';

const App = () => {
  return <Tiptap />;
};

export { App };

Start the development server and you will see a ready-to-use editor:

We can leverage BubbleMenu and FloatingMenu built-in components to create our custom Toolbars which are visible upon text selection or moving to the next line. Tiptap is headless and gives us thereby a free hand regarding how such a formatting toolbar might look like.

Here is an example of styled BubbleMenu component:

2. Built-in extensions and customization

Tiptap provides a wide range of extensions which give your editor powerful capabilities. From text formatting, lists, and tables to YouTube embedding–many powerful features are available out of the box.

📌 You can check all the available extensions here: Tiptap extensions

However, one of Tiptap’s biggest strengths is its support for custom extensions, plugins, nodes and marks.

In our project, we created multiple custom components like a comment mark enabling users to attach a comment on a selected text, and even an AI generated node which visually distinguishes AI generated content from user-created content.

Example of rendering content retrieved from an external API:

3. Collaboration

Real-time editing support and conflict management of simultaneous edits can be a challenging task to tackle. Fortunately, Tiptap’s Y.js based collaboration plugin Hocuspocus simplifies synchronization between multiple clients.

We integrated the editor with existing CRDT (Conflict-free Replicated Data Types) implementation which is compatible with many WYSIWYG libraries.

Let’s see how simple it is to bring a collaborative workflow into your editor. Firstly, we need to install the following dependencies:

npm install @tiptap/extension-collaboration @tiptap/extension-collaboration-cursor @hocuspocus/provider y-prosemirror

Then, we need to slightly extend our Tiptap component by declaring aforementioned collaboration extensions and defining the websocket server location (in the next step we will run it with CLI for simplification):

🗂️/src/components/tiptap.jsx

import { HocuspocusProvider } from '@hocuspocus/provider';
import Collaboration from '@tiptap/extension-collaboration';
import CollaborationCursor from '@tiptap/extension-collaboration-cursor';

const provider = new HocuspocusProvider({
  url: 'http://localhost:1234',
  name: 'example-document',
});

// Define your extensions array
const extensions = [
  StarterKit.configure({
    // The collaboration extension comes with its own history handling
    history: false,
  }),
  Collaboration.configure({ document: provider.document }),
  CollaborationCursor.configure({
    provider: provider,
    user: {
      name: 'John Doe',
      color: '#f00',
    },

Then, scaffold a Hocuspocus Node.js server (in a different terminal tab):

npx @hocuspocus/cli --port 1234 --sqlite

Finally, to style collaboration cursor indicator, we can use the styles from Tiptap docs:

/* Basic editor styles */
.tiptap {
  :first-child {
    margin-top: 0;
  }

  /* Placeholder (at the top) */
  p.is-editor-empty:first-child::before {
    color: var(--gray-4);
    content: attr(data-placeholder);
    float: left;
    height: 0;
    pointer-events: none;
  }

  p {
    word-break: break-all;
  }

  /* Give a remote user a caret */
  .collaboration-cursor__caret {
    border-left: 1px solid #0d0d0d;
    border-right: 1px solid #0d0d0d;
    margin-left: -1px;
    margin-right: -1px;
    pointer-events: none;
    position: relative;
    word-break: normal;
  }

  /* Render the username above the caret */
  .collaboration-cursor__label {
    border-radius: 3px 3px 3px 0;
    color: #0d0d0d;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    left: -1px;
    line-height: normal;
    padding: 0.1rem 0.3rem;
    position: absolute;
    top: -1.4em;
    user-select: none;
    white-space: nowrap;
  }
}

The result? A seamless Google Docs-like collaboration experience:

Lessons Learned

• 🔥 Tiptap’s API is highly extensible, making it easy to add advanced features like AI assistance and inline commenting.

• 🪄 Hocuspocus integration was straightforward, saving us from building a custom WebSocket layer.

• ⏳ Leveraging open-source solutions saved us months of development time, allowing us to focus on delivering value to our customer.

Final Thoughts

By combining Tiptap and Hocuspocus, we built a powerful, collaborative WYSIWYG editor in a fraction of time it would take to develop from scratch. The modular architecture allowed us to tailor the experience

Adrian T., Senior Software Engineer at Apptimia

Looking for rapid web front end development in your projects?

Apptimia has delivered many software projects with advances front-end capabilities and top-notch UX/UI. Contact us for details.