How does this skill prevent SSR hydration errors in Next.js?

It enforces the 'immediatelyRender: false' property in the useEditor hook, which is the critical fix for preventing hydration mismatches in server-side rendered environments.

Can I use this for real-time collaborative editing?

Yes, the skill includes patterns for integrating Y.js and the @tiptap/extension-collaboration package to build multi-user editing experiences.

Is it compatible with Tailwind CSS v4?

Absolutely. It includes specific configurations for Tailwind v4 and the @tailwindcss/typography plugin to ensure formatted content renders correctly.

Does it support image uploads to Cloudflare R2?

Yes, it provides a specific pattern that uses base64 for immediate UI previews while handling the background upload and replacement with permanent R2 URLs.

How do I fix 'multiple versions of prosemirror-model' errors?

The skill provides a package.json resolution strategy to force a single version of ProseMirror dependencies, which is a common issue when using multiple Tiptap extensions.

Tiptap Rich Text Editor

Name: Tiptap Rich Text Editor
Author: brendadeeznuts1111

bybrendadeeznuts1111

0•

콘텐츠 관리

Builds high-performance, SSR-safe rich text editors using the Tiptap headless framework with React 19 and Tailwind CSS v4.

This skill provides a production-ready framework for implementing specialized rich text editing capabilities within React applications. It focuses on resolving common Tiptap hurdles such as Next.js hydration mismatches, ProseMirror dependency conflicts, and inefficient base64 image handling. By offering templates for Cloudflare R2 uploads, Y.js collaborative editing, and Tailwind CSS v4 typography, this skill enables developers to create sophisticated, Notion-like editing experiences with minimal boilerplate and maximum reliability.

주요 기능

01SSR-safe configuration for Next.js and React 19 using immediatelyRender protocols

02Real-time collaborative editing setup using Y.js and Tiptap extensions

03Automated resolution for ProseMirror version conflicts and hydration errors

040 GitHub stars

05Optimized image upload patterns using background replacement to prevent database bloat

06Tailwind CSS v4 prose styling and typography integration

사용 사례

01Implementing rich text comment systems with SSR support

02Building real-time collaborative documentation and note-taking apps

03Developing production-grade blog editors or CMS interfaces

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add brendadeeznuts1111/tier-1380-omega tiptap

For use in Claude.ai and ChatGPT

Download Skill