Next.js

Install

npm install @docx-editor.dev/react @docx-editor.dev/core

Load the editor on the client

Load the editor component with dynamic() and ssr: false from a client component:

// app/page.tsx
'use client';

import dynamic from 'next/dynamic';

const Editor = dynamic(() => import('./components/Editor').then((m) => m.Editor), {
  ssr: false,
  loading: () => <div>Loading editor...</div>,
});

export default function Page() {
  return <Editor />;
}

The "use client" directive alone does not disable server rendering. ssr: false skips the server render, and live editing starts after the component mounts in the browser.

Mount the editor

The editor component imports the stylesheet and fills a container with a height:

// app/components/Editor.tsx
'use client';

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

export function Editor() {
  return (
    <div style={{ height: '100vh' }}>
      <DocxEditor document="blank" />
    </div>
  );
}

To open and download files, use the component from the quickstart.

Limits

• dynamic(..., { ssr: false }) keeps the editor module off the server and out of the route's initial bundle.
• Keep the rest of the page as server components. Only the editor needs the client boundary.
• document="blank" opens an empty page. An omitted document means no document: the editor shows its loading screen until bytes arrive.

Run the example

The examples/nextjs starter needs built packages. After the shared setup, run:

bun run dev:nextjs   # http://localhost:3000

Next steps

• Quickstart: Load, edit, and save a document.
• Loading and saving: URLs, autosave, and uploads.
• Next.js DOCX editor guide: Detailed walkthrough.