Next.js DOCX Editor: Edit and Embed Word Documents in the Browser

npm install @eigenpal/docx-editor-react

"use client";
 
import { useState, useEffect, useRef, useCallback } from "react";
import { DocxEditor } from "@eigenpal/docx-editor-react";
import type { DocxEditorRef } from "@eigenpal/docx-editor-react";
import "@eigenpal/docx-editor-react/styles.css";
 
export function MyDocxEditor() {
  const editorRef = useRef<DocxEditorRef>(null);
  const [buffer, setBuffer] = useState<ArrayBuffer | null>(null);
 
  useEffect(() => {
    fetch("/sample.docx")
      .then((res) => res.arrayBuffer())
      .then(setBuffer);
  }, []);
 
  const handleSave = useCallback(async () => {
    const saved = await editorRef.current?.save();
    if (!saved) return;
    const blob = new Blob([saved], {
      type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
    });
    const url = URL.createObjectURL(blob);
    Object.assign(document.createElement("a"), {
      href: url,
      download: "edited.docx",
    }).click();
    URL.revokeObjectURL(url);
  }, []);
 
  if (!buffer) return <div>Loading...</div>;
 
  return (
    <div style={{ height: "80vh" }}>
      <DocxEditor
        ref={editorRef}
        documentBuffer={buffer}
        showToolbar
        showRuler
        showZoomControl
      />
      <button onClick={handleSave}>Download .docx</button>
    </div>
  );
}

import { MyDocxEditor } from "@/components/DocxEditor";
 
export default function EditorPage() {
  return <MyDocxEditor />;
}

function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
  const file = e.target.files?.[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = () => setBuffer(reader.result as ArrayBuffer);
  reader.readAsArrayBuffer(file);
}

// app/api/documents/route.ts
export async function POST(req: NextRequest) {
  const data = await req.arrayBuffer();
  // upload to S3, save to DB, etc.
  return NextResponse.json({ ok: true });
}

const saved = await editorRef.current?.save();
await fetch("/api/documents", { method: "POST", body: saved });