@tiptap/starter-kit

What is @tiptap/starter-kit?

@tiptap/starter-kit is a comprehensive toolkit for building rich text editors with Tiptap, a headless, framework-agnostic text editor built on ProseMirror. It provides a set of pre-configured extensions and features to quickly set up a functional and customizable text editor.

What are @tiptap/starter-kit's main functionalities?

Basic Setup

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

import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';

const editor = new Editor({
  element: document.querySelector('#editor'),
  extensions: [StarterKit],
});

Custom Extensions

This example demonstrates how to add custom extensions to the Tiptap editor alongside the StarterKit, allowing for extended functionality.

import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import CustomExtension from './CustomExtension';

const editor = new Editor({
  element: document.querySelector('#editor'),
  extensions: [StarterKit, CustomExtension],
});

Event Handling

This code snippet shows how to handle events in the Tiptap editor, such as logging the updated content whenever the editor's content changes.

import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';

const editor = new Editor({
  element: document.querySelector('#editor'),
  extensions: [StarterKit],
  onUpdate: ({ editor }) => {
    console.log('Content updated:', editor.getHTML());
  },
});

Other packages similar to @tiptap/starter-kit

quill

Quill is a powerful, free, open-source WYSIWYG editor built for the modern web. It offers a rich API and a modular architecture, making it highly customizable. Compared to @tiptap/starter-kit, Quill is more opinionated and comes with a default UI, whereas Tiptap is headless and more flexible.

slate

Slate is a completely customizable framework for building rich text editors. It provides a set of tools to create complex editors with a focus on extensibility and control over the rendering process. Unlike @tiptap/starter-kit, Slate requires more setup and configuration but offers greater flexibility in terms of customization.

draft-js

Draft.js is a JavaScript rich text editor framework, built and maintained by Facebook. It provides a set of React components and an immutable model for managing editor state. Draft.js is similar to @tiptap/starter-kit in terms of providing a robust foundation for building text editors, but it is more tightly coupled with React.

README

@tiptap/starter-kit

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.

Official Documentation

Documentation can be found on the Tiptap website.

License

Tiptap is open sourced software licensed under the MIT license.