What versions of React are supported?

This skill is verified for React 19+ and recommends modern bundlers like Vite or Next.js to avoid compatibility issues found in older setups.

How does this skill solve Tiptap SSR hydration errors?

It enforces the use of 'immediatelyRender: false' in the editor configuration, which is the primary fix for hydration mismatches in Next.js and other SSR frameworks.

Does it support image uploads?

Yes, the skill provides a verified pattern for handling images that avoids base64 database bloat by using background uploads to services like Cloudflare R2.

Can I use this with Tailwind CSS v4?

Yes, it is specifically optimized for Tailwind v4 and provides the necessary typography plugin configurations and prose classes for seamless styling.

Is collaborative editing supported?

Yes, it includes implementation patterns for real-time multi-user editing using Y.js and the Tiptap collaboration extension.

Tiptap Rich Text Editor

Name: Tiptap Rich Text Editor
Author: evolv3ai

byevolv3ai

0•

コンテンツ管理

Builds production-ready rich text editors with Tiptap using React and Tailwind v4 while preventing common SSR hydration and styling issues.

This skill provides a comprehensive framework for implementing headless rich text editors using Tiptap, optimized for React 19 and Tailwind CSS v4. It streamlines the creation of blog editors, comment systems, and collaborative apps by offering verified patterns for SSR-safe initialization, efficient image upload workflows via Cloudflare R2, and robust prose styling. By addressing critical pitfalls like hydration mismatches and ProseMirror version conflicts, it ensures a smooth development experience for building sophisticated, Notion-like editing interfaces.

主な機能

01SSR-safe configuration for Next.js and React 19 environments

02Real-time collaborative editing implementation using Y.js

03Optimized image upload patterns with Cloudflare R2 integration

04Automated prevention of common ProseMirror dependency conflicts

050 GitHub stars

06Pre-configured Tailwind v4 prose styling and shadcn/ui components

ユースケース

01Implementing a stylized comment system with image support

02Developing a feature-rich blog or CMS content editor

03Building real-time collaborative documentation or Notion-like apps

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add evolv3ai/claude-skills-archive tiptap

For use in Claude.ai and ChatGPT

Download Skill