Remix DOCX editor setup

Add a Remix DOCX editor with a mount check and React.lazy, keeping server rendering and hydration intact.

Install

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

Load the editor after browser mount

Gate the editor behind a mount check and a lazy() import:

// app/routes/_index.tsx
import { lazy, Suspense, useEffect, useState } from 'react';

const Editor = lazy(() => import('../components/Editor').then((m) => ({ default: m.Editor })));

export default function Index() {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);

  if (!mounted) return <div>Loading editor...</div>;

  return (
    <Suspense fallback={<div>Loading editor...</div>}>
      <Editor />
    </Suspense>
  );
}

Mount the editor

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

// app/components/Editor.tsx
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

The mount guard and the lazy import solve different problems. Keep both.
The mounted guard renders the same loading markup on the server and on the first client paint, so hydration matches.
lazy() keeps the editor import behind the client boundary and out of the initial route chunk.

Run the example

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

bun run dev:remix   # http://localhost:3001

Next steps

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