Show HN: JavaScript 중심의 오픈 소스 WYSIWYG DOCX 에디터

오픈 소스 WYSIWYG .docx

표준 OOXML, 변경 내용 추적 (tracked changes), 실시간 협업 (real-time collaboration) 기능을 갖춘 React 및 Vue용 에디터입니다. 에이전트 준비 완료 (Agent-ready). 라이브 데모 (Live demo) | 문서 (Documentation)

npm install @eigenpal/docx-editor-react

아래의 React 퀵 스타트 (quick start)를 참조하세요.

npm install @eigenpal/docx-editor-vue

아래의 Vue 퀵 스타트를 참조하세요.

npm install @eigenpal/nuxt-docx-editor

아래의 Nuxt 퀵 스타트를 참조하세요.

패키지 (Package)	설명 (Description)	문서 (Docs)
@eigenpal/docx-editor-react		[Docs]
@eigenpal/docx-editor-vue		[Docs]
@eigenpal/nuxt-docx-editor		[Docs]
@eigenpal/docx-editor-core	프레임워크에 구애받지 않는 코어 (Framework-agnostic core): OOXML 파서 (parser), 직렬화기 (serializer), 레이아웃 엔진 (layout engine), ProseMirror 스키마 (schema). React 또는 Vue 어댑터를 포크(fork)한다면 이 패키지에 의존하세요.	[Docs]
@eigenpal/docx-editor-i18n	두 어댑터 모두에서 사용하는 공유 로케일 문자열 (locale strings) 및 타입 (types).	[Docs]
@eigenpal/docx-editor-agents	에이전트 SDK 및 채팅 UI: 프레임워크에 구애받지 않는 브릿지 (bridge), MCP 서버, AI SDK 어댑터, 그리고 UI 컴포넌트 포함.	[Docs]

어댑터를 포크하시나요? 포크를 가볍게 유지하세요. @eigenpal/docx-editor-core에 직접 의존하면, 상위 변경 사항을 일일이 수동으로 백포트(backporting)할 필요 없이 파서, 직렬화기 및 렌더링 수정 사항이 빌드에 자동으로 반영됩니다.

import { useState } from 'react';
import { DocxEditor } from '@eigenpal/docx-editor-react';
import '@eigenpal/docx-editor-react/styles.css';
...

Next.js / SSR: 동적 임포트 (dynamic import)를 사용하세요. 에디터는 DOM을 필요로 합니다.

전체 문서: packages/react

· API 레퍼런스 (API reference).

<script setup lang="ts">import { ref } from 'vue';
import { DocxEditor } from '@eigenpal/docx-editor-vue';
import '@eigenpal/docx-editor-vue/styles.css';
...

전체 문서: packages/vue

· API 레퍼런스 (API reference).

// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@eigenpal/nuxt-docx-editor'],
...

@eigenpal/nuxt-docx-editor는 Vue 어댑터를 Nuxt 3 & 4 모듈로 래핑(wraps)합니다. 이는 SSR에 안전한 <DocxEditor> 컴포넌트(수동 임포트나 <ClientOnly> 래퍼가 필요 없음)와 Vue 컴포저블(composables)을 자동 임포트합니다.

전체 문서: packages/nuxt

.

import { DocxEditor } from '@eigenpal/docx-editor-react';
import { PluginHost, templatePlugin } from '@eigenpal/docx-editor-react/plugin-api';
<PluginHost plugins={[templatePlugin]}>
...

전체 플러그인 API는 플러그인 문서를 참조하세요.

bun install
bun run dev # localhost:5173
bun run build
...

main 브랜치의 라이브 프리뷰(Live preview)

는 latest.docx-editor.dev에 자동 배포됩니다. 이는 변경 사항을 npm에 배포하기 전에 테스트하기에 유용합니다.

예시: Vite | Next.js | Remix | Astro | Vue | Nuxt

문서 (Documentation) | Props & Ref 메서드 (Props & Ref Methods) | 플러그인 (Plugins) | 아키텍처 (Architecture)

기여를 환영합니다. 설정, 테스트 및 일회성 CLA 서명에 대해서는 CONTRIBUTING.md를 참조하세요.

로케일 (Locale)	언어 (Language)
en	영어 (English)
de	독일어 (German)
pl	폴란드어 (Polish)
pt-BR	포르투갈어 (브라질) (Portuguese (Brazil))
tr	터키어 (Turkish)
he	히브리어 (Hebrew)
zh-CN	중국어 (간체) (Chinese (Simplified))

에디터를 여러분의 언어로 번역하는 것을 도와주세요! 전체 **i18n 기여 가이드 (i18n contribution guide)**를 참조하세요.

bun run i18n:new de # 독일어 로케일 스캐폴딩 (scaffold)
bun run i18n:status # 번역 커버리지 확인