@tiptap/react

What is @tiptap/react?

@tiptap/react is a headless, framework-agnostic text editor built on top of ProseMirror. It provides a highly customizable and extensible rich text editor for React applications.

What are @tiptap/react's main functionalities?

Basic Editor Setup

This code sets up a basic Tiptap editor with the StarterKit extension, which includes common features like bold, italic, and lists.

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

const Tiptap = () => {
  const editor = useEditor({
    extensions: [StarterKit],
    content: '<p>Hello World!</p>',
  });

  return <EditorContent editor={editor} />;
};

export default Tiptap;

Custom Extensions

This code demonstrates how to create a custom extension for Tiptap. The custom extension defines a new node type that can be used within the editor.

import { Node, mergeAttributes } from '@tiptap/core';

const CustomExtension = Node.create({
  name: 'customExtension',
  group: 'block',
  content: 'inline*',
  parseHTML() {
    return [{ tag: 'custom-extension' }];
  },
  renderHTML({ HTMLAttributes }) {
    return ['custom-extension', mergeAttributes(HTMLAttributes), 0];
  },
});

export default CustomExtension;

Collaboration

This code sets up a collaborative editing environment using Tiptap and Yjs with WebRTC. Multiple users can edit the same document in real-time.

import { Collaboration } from '@tiptap/extension-collaboration';
import { WebrtcProvider } from 'y-webrtc';

const editor = useEditor({
  extensions: [
    StarterKit,
    Collaboration.configure({
      document: ydoc,
    }),
  ],
});

const provider = new WebrtcProvider('your-room-name', ydoc);

Other packages similar to @tiptap/react

draft-js

Draft.js is a framework for building rich text editors in React. It provides a set of immutable models and helper functions for managing editor state, but it is less feature-rich and customizable compared to Tiptap.

slate

Slate is a completely customizable framework for building rich text editors. It provides a lot of flexibility and control over the editor's behavior and appearance, similar to Tiptap, but requires more boilerplate code.

quill

Quill is a powerful, rich text editor that provides a simple API and a wide range of features out of the box. However, it is less customizable compared to Tiptap and is not built specifically for React.

README

@tiptap/react

Introduction

tiptap is a headless wrapper around ProseMirror – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as New York Times, The Guardian or Atlassian.

Offical Documentation

Documentation can be found on the tiptap website.

License

tiptap is open-sourced software licensed under the MIT license.