Tailwind v4를 지원하는 React용 헤드리스 ProseMirror 기반 편집기 프레임워크인 Tiptap을 사용하여 서식 있는 텍스트 편집기를 빌드합니다. SSR 안전 설정, 이미지 업로드, 산문 스타일 지정, 공동 편집 및 마크다운 지원을 다룹니다. 서식 있는 텍스트 편집기를 추가하거나, Tiptap 확장 프로그램을 구성하거나, 편집기에서 이미지 업로드를 처리하거나, Y.js를 사용한 공동 편집을 설정할 때 사용하세요. Tiptap, 서식 있는 텍스트, 편집기, Prosemirror, React, Tailwind에 사용합니다.
명령줄에서 tiptap AI 스킬을 개발 환경에 빠르게 설치
출처: oakoss/agent-skills.
Tiptap is a headless rich text editor built on ProseMirror, providing a modular extension system for React applications. It supports React 19, Tailwind v4, and SSR frameworks like Next.js. Use when building blog editors, comment systems, documentation tools, or Notion-like collaborative apps. Do NOT use with Create React App (CRA is incompatible with Tiptap v3 ESM module structure; use Vite instead).
| Create editor | useEditor({ extensions: [StarterKit], immediatelyRender: false }) | | Render editor | | | Prose styling | Add className="prose dark:prose-invert max-w-none" to container | | Configure StarterKit | StarterKit.configure({ heading: { levels: [1, 2, 3] } }) |
| Disable undo/redo | StarterKit.configure({ undoRedo: false }) (required for Y.js collab) | | Image upload | Set allowBase64: false, use upload handler with URL replacement | | Markdown support | import { Markdown } from '@tiptap/markdown' (official, open-source) |
AI/검색 인용용 안정적인 필드와 명령어.
npx skills add https://github.com/oakoss/agent-skills --skill tiptapTailwind v4를 지원하는 React용 헤드리스 ProseMirror 기반 편집기 프레임워크인 Tiptap을 사용하여 서식 있는 텍스트 편집기를 빌드합니다. SSR 안전 설정, 이미지 업로드, 산문 스타일 지정, 공동 편집 및 마크다운 지원을 다룹니다. 서식 있는 텍스트 편집기를 추가하거나, Tiptap 확장 프로그램을 구성하거나, 편집기에서 이미지 업로드를 처리하거나, Y.js를 사용한 공동 편집을 설정할 때 사용하세요. Tiptap, 서식 있는 텍스트, 편집기, Prosemirror, React, Tailwind에 사용합니다. 출처: oakoss/agent-skills.
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/oakoss/agent-skills --skill tiptap 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code, Cursor, OpenClaw에서 사용할 수 있습니다
https://github.com/oakoss/agent-skills