react-tiptap-ready

A ready-to-use, fully-featured Tiptap rich text editor for React. Batteries included — toolbar, image upload, highlights, links, and more.

Installation

npm install react-tiptap-ready

Setup

Import the styles in your root file (e.g. main.tsx):

import 'react-tiptap-ready/style.css';

Usage

import { SimpleEditor } from 'react-tiptap-ready';

export default function App() {
  return (
    <SimpleEditor
      content="<p>Your <strong>default</strong> html here</p>"
      onChange={({ editor }) => {
        console.log(editor.getHTML());
        console.log(editor.getJSON());
        console.log(editor.getText());
      }}
    />
  );
}

Props

| Prop | Type | Default | Description | | ---------- | ---------------------------------------- | ------------------------------------------------ | ------------------------------- | | content | string | <p>Your <strong>default</strong> html here</p> | Initial HTML content | | onChange | (data: EditorEvents['update']) => void | undefined | Callback on every editor update |

Features

• ✅ Headings (H1–H4)
• ✅ Bold, Italic, Strike, Underline, Code
• ✅ Superscript & Subscript
• ✅ Bullet, Ordered & Task Lists
• ✅ Blockquote & Code Block
• ✅ Text Alignment (Left, Center, Right, Justify)
• ✅ Color Highlight
• ✅ Link Popover
• ✅ Image Upload (Base64)
• ✅ Undo / Redo
• ✅ Mobile Responsive Toolbar
• ✅ Dark Mode Support

Getting Editor Data

onChange={({ editor }) => {
  const html = editor.getHTML();  // HTML string
  const json = editor.getJSON();  // Tiptap JSON
  const text = editor.getText();  // Plain text
}}

Peer Dependencies

npm install react react-dom

License

MIT