Is it compatible with shadcn/ui?

Absolutely. It includes installation instructions and templates for shadcn-compatible minimal Tiptap components that match your existing UI library.

How does this skill solve Next.js hydration errors?

It automatically configures the immediatelyRender: false flag in the Tiptap useEditor hook, preventing the common SSR hydration mismatch error found in Next.js applications.

Can I use this with Tailwind CSS v4?

Yes, the skill includes specific prose styling templates and configurations optimized for the latest Tailwind CSS v4 features and semantic color systems.

Is collaborative editing supported?

Yes, the skill includes templates for setting up real-time multi-user editing using Tiptap's collaboration extension and Y.js integration.

Does it support image uploads to cloud storage?

Yes, it provides a specialized pattern for Cloudflare R2 that includes an immediate base64 preview followed by a background upload to prevent database bloat.

Tiptap Rich Text Editor

Name: Tiptap Rich Text Editor
Author: jezweb

byjezweb

•

コンテンツ管理

Build and customize headless rich text editors using React, Tailwind v4, and shadcn/ui with SSR-safe patterns.

概要

This skill provides comprehensive patterns and templates for integrating the Tiptap editor framework into modern web applications, specifically optimized for React 19+ and Tailwind CSS v4. It streamlines the creation of sophisticated text editors by handling complex requirements such as SSR hydration error prevention, Cloudflare R2 image upload workflows, and real-time collaboration with Y.js. Whether building a simple blog editor or a complex Notion-like platform, this skill ensures production-ready implementations with pre-configured shadcn/ui components and best practices for performance and accessibility.

主な機能

Pre-built shadcn/ui component templates and toolbar configurations
Ready-to-use image upload handlers for Cloudflare R2 with base64 previews
Native support for Markdown content types and real-time collaboration via Y.js
Seamless integration with Tailwind v4 and @tailwindcss/typography plugin
91 GitHub stars
SSR-safe editor configuration for Next.js and React 19 compatibility

ユースケース

Building Notion-like applications with custom blocks and optimized image management
Creating collaborative documentation platforms with real-time multi-user editing
Developing blog post editors or comment systems with consistent prose styling

概要

主な機能

Pre-built shadcn/ui component templates and toolbar configurations
Ready-to-use image upload handlers for Cloudflare R2 with base64 previews
Native support for Markdown content types and real-time collaboration via Y.js
Seamless integration with Tailwind v4 and @tailwindcss/typography plugin
91 GitHub stars
SSR-safe editor configuration for Next.js and React 19 compatibility

ユースケース

Building Notion-like applications with custom blocks and optimized image management
Creating collaborative documentation platforms with real-time multi-user editing
Developing blog post editors or comment systems with consistent prose styling