[해피CGI][cgimall] Tiptap - Notion 스타일 에디터 제작이 가능한 최신 JavaScript 에디터 라이브러리

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 기반 무료 사용 가능

 

공식 홈페이지

https://tiptap.dev/ 

 

공식 문서

https://tiptap.dev/docs 

 

설치 가이드

https://tiptap.dev/docs/editor/getting-started/install 

 

Vanilla JavaScript 사용방법

https://tiptap.dev/docs/editor/getting-started/install/vanilla-javascript 

 

React 사용방법

https://tiptap.dev/docs/editor/getting-started/install/react 

 

 

Vue 사용방법

https://tiptap.dev/docs/editor/getting-started/install/vue3 

 

Extensions 문서

https://tiptap.dev/docs/editor/extensions 

 

GitHub

https://github.com/ueberdosis/tiptap