Astro

Install

Install the editor and add the Astro React integration:

npm install @docx-editor.dev/react @docx-editor.dev/core
npx astro add react

astro add react adds @astrojs/react to astro.config.mjs.

Mount a client-only island

Render the editor as an island with client:only="react":

---
// src/pages/index.astro
import { Editor } from '../components/Editor';
---

<html lang="en">
  <body>
    <Editor client:only="react" />
  </body>
</html>

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

// src/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

• Use client:only="react" to skip the server render. Live editing starts after the island mounts in the browser.
• Import the stylesheet inside the island. Astro bundles CSS from client:only components.
• The island's container needs a measured height.

Run the example

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

bun run dev:astro   # http://localhost:4321

Next steps

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