skills.rest
dennislee928
dennislee928COMMUNITY
Explore all skills by this author →
WebsiteGitHub

tiptap

Create SSR-safe Tiptap rich text editors in React with image uploads.

54|Updated Nov 19, 2025
Search Tags:#react#tailwind#ssr#rich text editor#tiptap#content editor
One-click install
npx skills add https://github.com/dennislee928/Ethic-Latex --skill tiptap-dennislee928
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tiptap
Source: https://github.com/dennislee928/Ethic-Latex/tree/main/.claude/skills/tiptap
Command: npx skills add https://github.com/dennislee928/Ethic-Latex --skill tiptap-dennislee928

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and code templates for building robust, SSR-safe rich text editors using Tiptap in React applications, addressing common issues like hydration errors and image uploads.

Core Features & Use Cases

  • SSR-Safe Setup: Prevents Next.js hydration errors with immediatelyRender: false.
  • Image Uploads: Integrates patterns for uploading images to Cloudflare R2.
  • Styling: Supports Tailwind v4 prose styling and shadcn/ui components.
  • Use Case: You need to build a blog post editor where users can format text, insert images that upload to cloud storage, and ensure the editor works seamlessly in a Next.js application.

Quick Start

Install the Tiptap core dependencies and configure an SSR-safe editor component.

Frequently Asked Questions about tiptap

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix Tiptap hydration errors in Next.js?▼

To fix Tiptap hydration errors in Next.js, configure your rich text editor with `immediatelyRender: false` to ensure SSR-safe rendering and prevent server-client mismatches.

How do I upload images from a Tiptap editor to Cloudflare R2?▼

You can upload images from a Tiptap editor to Cloudflare R2 by implementing the provided integration patterns that connect the rich text editor's image insertion functionality directly to your R2 cloud storage.

Can I style a Tiptap rich text editor with Tailwind CSS v4 and shadcn/ui?▼

Yes, you can style a Tiptap rich text editor using Tailwind CSS v4 prose styling and shadcn/ui components, allowing you to build content editing interfaces that match your existing design system.

What is the best way to build a React rich text editor for a CMS?▼

The best way to build a React rich text editor for a CMS is using Tiptap, which provides a framework to format text, insert images, and create complex content fields for collaborative document platforms.

Does Tiptap work with server-side rendering in React applications?▼

Yes, Tiptap works with server-side rendering in React applications by applying specific SSR-safe setup configurations that prevent Next.js hydration errors commonly associated with rich text editors.

Related Skills

Explore More Software Engineering Skills→
chrisvoncsefalvaychrisvoncsefalvay
3

coeditor

Scaffold React editors with CopilotKit and LangGraph for AI collaboration.

Community
Intermediate
mattwoodcomattwoodco
3

cms

Set up a content management system for posts, pages, categories, and media.

Community
Advanced
Tahasaif3Tahasaif3

shadcn

Provide Radix UI-based components styled with Tailwind CSS for React interfaces.

Community
Intermediate
CaiZongyuanCaiZongyuan
2

tentap-editor

Integrate TenTap's WebView-based rich text editor into React Native apps.

Community
Advanced