Inkio

React 기반의 커스터마이즈 가능한 리치 텍스트 에디터 라이브러리입니다.

주요 기능

• 🎨 Headless 디자인 - 완전한 스타일 커스터마이징
• 📝 풍부한 포맷팅 - Bold, Italic, Underline, Highlight, Link 등
• 🖼️ 고급 이미지 편집 - 드래그앤드롭, 리사이즈, Crop, 마크업
• 💬 Callout 블록 - Info, Warning, Tip, Danger 타입 지원
• 🔗 위키 링크 - [[페이지]] 형식의 내부 링크
• 👤 멘션 시스템 - @사용자 태그 지원
• #️⃣ 해시태그 - #태그 지원
• ⌨️ 슬래시 커맨드 - / 입력으로 빠른 블록 삽입
• 📋 태스크 리스트 - 체크박스 기반 할일 목록
• 🎯 Tree-shakable - 필요한 기능만 번들링

빠른 시작

npm install @inkio/editor @inkio/extension react react-dom

@inkio/extension는 @inkio/editor, react, react-dom만 peer로 요구합니다. Tiptap 런타임과 katex, konva, react-konva는 @inkio/extension 내부 의존성으로 제공됩니다.

import { Editor, getDefaultCoreExtensions } from '@inkio/editor';
import '@inkio/editor/style.css';
 
function MyEditor() {
  return (
    <Editor
      extensions={getDefaultCoreExtensions()}
      onUpdate={(json) => console.log(json)}
    />
  );
}

데모

플레이그라운드에서 모든 기능을 직접 체험해보세요.

예제로 시작하기

AI와 함께 붙이거나 빠르게 통합하려면 설명형 문서보다 실행 가능한 예제를 먼저 보는 편이 안정적입니다.

• 레시피에서 런타임별 시작점을 고를 수 있습니다.
• 레포에서는 examples/basic-react, examples/next-app-router를 기준 예제로 제공합니다.
• AI에게 코드를 맡길 때는 루트의 AI_CONTEXT.md를 예제 파일과 함께 주는 방식을 권장합니다.

기술 스택

• Tiptap  v3 - ProseMirror 기반 에디터 프레임워크
• React  19+ - UI 라이브러리
• TypeScript  - 타입 안전성
• Tailwind CSS  v4 - 스타일링
• Konva  + react-konva  - 이미지 편집 (Crop, Rotate, Draw, Shapes, Text)