Getting started

The editor for React is on npm. The other packages are used from the repository for now.

Put it in a React application

npm install @rebodocs/react

It is one package with the engine, the editor and the collaboration client inside. React 18 or later is its only peer.

Use the component. The element it is in must have a height:

'use client';
import { DocsEditor } from '@rebodocs/react';

export default function Page() {
  return (
    <div style={{ height: '100vh' }}>
      <DocsEditor name="untitled.docx" locale="en" onSave={(docx, name) => console.log(name, docx.byteLength)} />
    </div>
  );
}

That gives an empty document. To open a file, pass its bytes as docx. See React component.

No React? The same package has the whole editor without it: import { mountDocs } from '@rebodocs/react/mount'. See Without a framework.

Run the repository

To try everything, change the code, or use the packages that are not published yet:

git clone https://github.com/JFranciscoRobles/rebodocs.git
cd rebodocs
npm install
npm run dev

Open http://localhost:5173. That is the playground: the editor with everything switched on. Open a Word file from the menu and edit it.

You need Node 22.12 or later.

Use the engine in Node

Inside the repository, the packages import each other as TypeScript source. Scripts run with vite-node:

// tools/my-script.ts
import { readFileSync, writeFileSync } from 'node:fs';
import { importDocx, fillVariables, exportDocx } from '../packages/core/src/index';

const doc = importDocx(new Uint8Array(readFileSync('template.docx')));
writeFileSync('out.docx', exportDocx(fillVariables(doc, { client: 'Ana Pérez' })));

npx vite-node tools/my-script.ts

Or use the tool that is already there:

npm run generate -- template.docx data.json -o out.pdf

See On a server.

Where to go next

• React component: every prop.
• Headless: your own toolbar and panels, with Tailwind.
• Templates and variables: documents that fill themselves.
• Real-time collaboration: several people at once.

Commands