@tiptap/core

What is @tiptap/core?

@tiptap/core is a headless, framework-agnostic, and highly customizable rich-text editor built on top of ProseMirror. It provides a flexible and extensible API to create and manage rich-text content, making it suitable for a wide range of applications from simple text editors to complex content management systems.

What are @tiptap/core's main functionalities?

Creating an Editor

This code demonstrates how to create a basic editor instance with initial content and an update handler that logs the current HTML content to the console.

const { Editor } = require('@tiptap/core');
const editor = new Editor({
  content: '<p>Hello World!</p>',
  onUpdate: ({ editor }) => {
    console.log(editor.getHTML());
  },
});

Adding Extensions

This code shows how to add extensions to the editor. The `StarterKit` extension provides a set of basic functionalities like bold, italic, and bullet lists.

const { Editor } = require('@tiptap/core');
const { StarterKit } = require('@tiptap/starter-kit');
const editor = new Editor({
  extensions: [StarterKit],
  content: '<p>Hello World!</p>',
});

Custom Extensions

This code demonstrates how to create a custom node extension. The `CustomNode` is defined with specific parsing and rendering rules, and then added to the editor.

const { Node, mergeAttributes } = require('@tiptap/core');
const CustomNode = Node.create({
  name: 'customNode',
  group: 'block',
  content: 'inline*',
  parseHTML() {
    return [{ tag: 'custom-node' }];
  },
  renderHTML({ HTMLAttributes }) {
    return ['custom-node', mergeAttributes(HTMLAttributes), 0];
  },
});
const editor = new Editor({
  extensions: [CustomNode],
  content: '<custom-node>Hello World!</custom-node>',
});

Other packages similar to @tiptap/core

prosemirror

ProseMirror is a toolkit for building rich-text editors. It provides a lot of flexibility and control over the editor's behavior and appearance. @tiptap/core is built on top of ProseMirror, making it easier to use and extend.

slate

Slate is another highly customizable framework for building rich-text editors. It offers a more React-centric approach compared to @tiptap/core, which is framework-agnostic.

draft-js

Draft.js is a rich-text editor framework built by Facebook. It is highly extensible and provides a lot of control over the editor's state and behavior. However, it is more tightly coupled with React compared to @tiptap/core.

README

@tiptap/core

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.