react-tiptap-texteditor

A modern, fully-featured React rich text editor component built on Tiptap — easy to integrate, extensible, and customizable. Powered by Next.js 15, Tailwind CSS, and the latest Tiptap extensions.

🚀 Features

• Fully React 18/19 compatible functional component
• Built on top of the powerful Tiptap editor
• Supports rich text formatting: bold, italic, underline, strike, highlight
• Supports images, links, tables, task lists, code blocks with syntax highlighting
• YouTube embedding, text alignment, font family, typography extensions, and more
• Easy to style with Tailwind CSS
• Controlled component with value and onChange for React state sync
• Lightweight and tree-shakeable
• Supports extension of Tiptap features via props or customization

📦 Installation

npm install react-tiptap-texteditor
# or
yarn add react-tiptap-texteditor

⚙️ Usage

'use client'

import { useState } from 'react'
import { TextEditor } from 'react-tiptap-texteditor'

export default function Home() {
  const [value, setValue] = useState<string>('')

  return (
    <main className='px-4 lg:px-8 py-8'>
      <TextEditor
        value={value}
        placeholder='Write something...'
        onChange={async (newValue) => {
          setValue(newValue)
        }}
      />
    </main>
  )
}

🔧 Props

| Prop | Type | Required | Description | | ------------- | ------------------------- | -------- | --------------------------------------------- | | value | string | Yes | Current editor content in HTML or JSON format | | onChange | (value: string) => void | Yes | Callback fired on content change | | placeholder | string | No | Placeholder text when editor is empty | | ...others | Various (extensions etc.) | Optional | Customize editor features via extensions |

🎨 Styling

• The editor is styled with Tailwind CSS by default.
• You can customize the styles by overriding classes or wrapping the component with your own styling.
• CSS files included in the package can be imported or copied to your project.

🧩 Extending and Customizing

• This package exposes core Tiptap extensions pre-configured for common use cases.
• You can fork and customize the editor or extend it by passing additional Tiptap extensions to the component (future feature planned).
• Contributions and suggestions are welcome!

🛠️ Development

Clone the repo and run:

npm install
npm run dev

Build for production:

npm run build

Lint and format:

npm run lint
npm run format

📖 Related Links

• Tiptap Documentation
• React Documentation
• Tailwind CSS
• Vite

🤝 Contributing

Contributions, issues, and feature requests are welcome! Currently, I am not accepting pull requests.
If you want to contribute or suggest something, please send an email to [email protected].

📜 License

This project is licensed under the MIT License. See the LICENSE file included in the package.

🙏 Acknowledgements

• Built with ❤️ using React.js, Tiptap, Tailwind CSS, and community contributions.

Happy editing! ✍️
If you have questions, feedback, or feature requests, please contact me.