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.
@tiptap/starter-kit
![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)
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.