@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.

Offical Documentation

Documentation can be found on the tiptap website.

License

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