ueberdosis/tiptap

어떤 프로젝트인가요?

핵심 기능

• 01기본 UI가 없는 헤드리스 설계로 스타일을 완전히 제어할 수 있음
• 02프레임워크에 종속되지 않아 Vue, React, 순수 JavaScript에서 사용 가능
• 03100개 이상의 확장 기능을 제공하는 확장 시스템
• 04콘텐츠 모델에 맞는 커스텀 확장 기능과 노드 정의 가능
• 05ProseMirror 기반

활용 사례

• 웹 앱에 커스텀 디자인의 리치 텍스트 편집 입력란 추가
• React 또는 Vue로 Notion 스타일의 블록 에디터 구축
• Hocuspocus와 Yjs를 활용한 협업 문서 편집 기능 구현

빠른 시작

1. 1

   프로젝트에 Tiptap agent skill을 설치합니다

   npx skills add ueberdosis/tiptap --skill tiptap
2. 2

   Tiptap 문서의 설치 가이드를 따릅니다

사용 전 알아둘 점

• !헤드리스 에디터이므로 사용자 인터페이스가 제공되지 않으며, 직접 UI를 구축해야 합니다.
• !Pro Extensions를 사용하려면 유효한 구독이 필요합니다.

토픽

자주 묻는 질문

tiptap은(는) 무엇인가요?

ProseMirror 기반의 헤드리스·프레임워크 독립형 리치 텍스트 에디터로, 다양한 확장 기능을 추가할 수 있습니다. Tiptap은 헤드리스 리치 텍스트 에디터입니다. 기본 UI가 제공되지 않으므로 개발자는 에디터의 모양과 레이아웃을 직접 제어하고, 프레임워크는 문서 상태와 서식, 편집 동작을 처리합니다. ProseMirror 라이브러리를 기반으로 하며 Vue, React, 순수 JavaScript에서 사용할 수 있습니다.

tiptap은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

tiptap은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

tiptap은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. tiptap의 마지막 커밋은 2026년 10월 20일입니다.

tiptap은(는) 어디에 사용할 수 있나요?

웹 앱에 커스텀 디자인의 리치 텍스트 편집 입력란 추가 React 또는 Vue로 Notion 스타일의 블록 에디터 구축 Hocuspocus와 Yjs를 활용한 협업 문서 편집 기능 구현

tiptap는 어떻게 설치하나요?

프로젝트에 Tiptap agent skill을 설치합니다: npx skills add ueberdosis/tiptap --skill tiptap Tiptap 문서의 설치 가이드를 따릅니다

tiptap은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/ueberdosis/tiptap