| Tiptap은 웹사이트나 관리자 페이지에 글쓰기 에디터를 구현할 때 사용할 수 있는 최신 JavaScript 에디터 라이브러리입니다. 기존 CKEditor나 TinyMCE처럼 정해진 디자인의 에디터를 그대로 붙이는 방식이 아니라, 원하는 UI와 기능을 자유롭게 구성할 수 있는 Headless Editor 방식입니다.
Tiptap은 ProseMirror 기반으로 만들어졌으며, 게시판 글쓰기, 블로그 에디터, CMS 관리자 에디터, 쇼핑몰 상품설명 에디터, Notion 스타일 블록 에디터, AI 글쓰기 도우미 같은 기능을 구현할 때 활용할 수 있습니다.
React, Vue, Next.js, Nuxt, Svelte, Alpine.js, Vanilla JavaScript 환경을 지원하며, 일반 JavaScript 환경에서도 사용할 수 있습니다. 다만 실무에서는 React나 Vue 기반 프로젝트에서 사용하는 경우가 많습니다.
기본 에디터 코어와 StarterKit, Heading, Bold, Italic, List, Link, Image, Table, Placeholder, Character Count 같은 주요 확장 기능은 무료로 사용할 수 있습니다. 단, 실시간 협업, 댓글, 버전관리, AI 기능, 문서 변환 같은 일부 고급 기능은 유료 기능으로 제공됩니다.
Tiptap은 MIT License 기반의 오픈소스 에디터로, 기본 기능은 상업용 홈페이지나 솔루션에도 무료로 적용할 수 있습니다. 에디터 디자인을 직접 구성할 수 있기 때문에 기존 사이트 디자인에 맞춘 커스텀 에디터 제작에 적합합니다.
주요 기능
- Rich Text Editor 제작
- Notion 스타일 블록 에디터 구현
- 게시판 / 블로그 / CMS 에디터 적용
- React / Vue / Next.js / Vanilla JS 지원
- Bold / Italic / Heading / List / Link 지원
- Image / Table / Placeholder 확장 가능
- Markdown 연동 가능
- Slash Command 구현 가능
- AI 글쓰기 기능 연동 가능
- Headless 방식으로 자유로운 디자인 가능
- MIT License 기반 무료 사용 가능
공식 홈페이지
공식 문서
설치 가이드
Vanilla JavaScript 사용방법
React 사용방법
Vue 사용방법
Extensions 문서
GitHub
|
