Vite

Install

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

Mount the editor

Vite renders on the client, so you do not need a server-rendering boundary. Mount the app on the element from your index.html:

// src/main.tsx
import { createRoot } from 'react-dom/client';
import { App } from './App';

const container = document.getElementById('root');
if (container) {
  createRoot(container).render(<App />);
}

The app imports the stylesheet and fills a container with a height:

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

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

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

Limits

• The element ID must match index.html. The standard Vite React template uses root.
• This setup assumes a client-rendered Vite app. For server rendering, see Installation.
• Import the stylesheet once, and give the editor's parent a measured height.

Run the example

The examples/vite starter aliases package source, so it needs no package build. It also shows composed chrome, the review sidebar, and a custom node. After you clone the repository and run bun install, run:

bun run dev:react   # http://localhost:5173

Next steps

• Quickstart: Load, edit, and save a document.
• Examples: Agent and custom node starters.
• Vite DOCX editor guide: Detailed walkthrough.