Getting Started with Tiptap

Tiptap is a headless rich text editor framework for the web that gives developers complete freedom to customize the editor’s look and functionality. Unlike traditional WYSIWYG editors, Tiptap provides a toolkit that allows you to build your own editor experience.

What is Tiptap?

Tiptap is built on top of ProseMirror, a powerful toolkit for building rich text editors. It was created to simplify the process of implementing ProseMirror while providing a more developer-friendly experience through its Vue.js, React, and vanilla JavaScript integrations.

Resources

For more information and advanced usage, check out these official resources:

• Tiptap Official Documentation
• Tiptap GitHub Repository
• Tiptap Examples
• API Reference

Key Features

• Headless architecture: Provides the functionality without imposing any styling
• Framework agnostic: Works with React, Vue, Angular, or vanilla JavaScript
• Customizable: Easily extend or modify existing functionality
• Collaborative editing: Built-in support for real-time collaboration
• Extensible: Large ecosystem of extensions for additional features
• TypeScript support: Fully typed API for improved developer experience

Common Functionality

Let’s explore some of Tiptap’s most frequently used features:

Basic Text Formatting

Tiptap makes it easy to implement common formatting options like bold, italic, underline, and strikethrough text with built-in extensions:

• Bold: StarterKit includes the Bold extension
• Italic: Also included in the StarterKit
• Underline: Can be added separately with the Underline extension
• Strike: For strikethrough text, included in StarterKit

Document Structure

• Headings: Create hierarchical document structure with h1-h6 elements
• Lists: Support for both ordered and unordered lists
• Blockquotes: For quotations and callouts
• Code blocks: For displaying formatted code snippets

Interactive Elements

• Links: Add hyperlinks to your content
• Images: Insert and manipulate images
• Tables: Create and edit complex tabular data
• Mentions: Implement @mentions for user references

Getting Started with Tiptap: A Simple Example

Let’s create a basic Tiptap editor with React to demonstrate how easy it is to get started:

Setting Up Your Project

To get started with Tiptap in a React project, follow these steps:

1. Create a new React project (if you don’t have one already):

   npx create-react-app tiptap-demo
   cd tiptap-demo

2. Install Tiptap and necessary extensions:

   npm install @tiptap/react @tiptap/core @tiptap/starter-kit @tiptap/extension-underline @tiptap/extension-link

3. Replace the contents of your App.js and create a new styles.css file with the code from the example above.

4. Run your application:

   npm start

Understanding the Example

Let’s break down what’s happening in our example:

1. Imports: We import the necessary components and extensions from Tiptap.

   • useEditor and EditorContent from @tiptap/react
   • StarterKit for essential functionality
   • Additional extensions like Underline and Link

2. MenuBar Component: Creates a toolbar with buttons that trigger editor commands.

   • Each button uses the editor’s chain API to execute commands
   • The isActive method determines if a format is currently active

3. TiptapEditor Component: Sets up the editor with extensions and initial content.

   • The useEditor hook initializes Tiptap
   • We define our extensions array with StarterKit and additional extensions
   • Initial content is provided as HTML

4. CSS Styling: Basic styling to make the editor look presentable.

Extending Functionality

The example demonstrates basic functionality, but Tiptap can do much more. Here are a few ways to extend it:

Adding a Link Dialog

const setLink = () => {
  const url = window.prompt('URL:');
  
  if (url) {
    editor.chain().focus().setLink({ href: url }).run();
  } else {
    editor.chain().focus().unsetLink().run();
  }
};

Implementing File Uploads

const addImage = () => {
  const url = window.prompt('Image URL:');
  
  if (url) {
    editor.chain().focus().setImage({ src: url }).run();
  }
};

Creating Custom Extensions

import { Extension } from '@tiptap/core';

const CustomExtension = Extension.create({
  name: 'customExtension',
  
  addKeyboardShortcuts() {
    return {
      'Mod-k': () => this.editor.commands.toggleBold(),
    };
  },
});

Conclusion

Tiptap offers a powerful and flexible way to add rich text editing capabilities to your web applications. Its headless architecture gives you complete control over the UI while providing all the functionality you need for a robust editing experience.

By starting with this simple example and exploring the extensive documentation, you can quickly build sophisticated editors tailored to your specific needs. Whether you’re creating a simple text editor or a complex collaborative document system, Tiptap provides the foundation you need to succeed.