Build a complete Word workflow.

Embed the Word editor

Give the component an empty host with a usable height. Your application owns storage and access. The File ribbon provides local-file opening and downloads. The editor provides its toolbar, selection, history and Word/PDF downloads.

npm install @onodocs/sdk @onodocs/canvas @onodocs/editor

import { createEditor } from "@onodocs/editor";

const editor = createEditor({
  container: document.querySelector("#editor"),
  document: { licenseKey },
  onError: error => showError(error)
});
await editor.open(docxBytes, "proposal.docx");
const saved = await editor.save();

Here docxBytes comes from your file picker or authenticated fetch; showError is your error UI. Catch opening and saving failures in the surrounding application. Call editor.dispose() when replacing the session or unmounting the host. Omit licenseKey for watermarked evaluation.

Set mode to view, edit, review or form and restrict allowedModes for your interface. Application authorization remains your responsibility. Use editor.execute(command) for edits that belong in undo history; direct document mutations bypass it.

React applications can use the Editor component with its mount helper. Memoize options and onReady so ordinary renders preserve the session. The effect mounts only in the browser and cancels/disposes on unmount. Give the host a usable height. The framework guide links complete React, Next.js, Vue, Svelte, Angular and .NET application shells.

Common text formatting, lists, links, regular tables and inline-image properties are supported. Rich paste preserves common text formatting and lists; tables and images paste as readable text with a notice. Floating-image manipulation and merged-table restructuring remain limited. Open the standalone editor to try your own Word file. The Open Word control reads it locally; Download Word saves the current edits. Complete editor example.

The Editor source uses MIT. Follow the build and customization guide to change its ribbon, styling or controls. SDK and Canvas retain their separate commercial terms.

Generate and refine a proposal

Start with a reusable Word template and business data. Templates support scalar bindings, repeating rows or sections, conditions, images, locale formatting and reusable sections. createTemplateEditor from @onodocs/editor provides visual authoring.

import { openTemplate } from "@onodocs/sdk/browser";

const template = await openTemplate(templateBytes, { licenseKey });
try {
  const bytes = await template.generate(businessData, { locale: "en-US" });
  await editor.open(bytes, "proposal.docx");
} finally { template.dispose(); }

templateBytes is the downloaded proposal template and businessData contains the form values and logo bytes shown in the complete demo's main.js. Export the current editor with editor.save() or editor.pdf() after wording edits. Ask before regeneration replaces those edits. The demo connects Design template, Enter data and Edit generated document while preserving the reusable template separately.

The same template API is available from @onodocs/sdk for Node generation. Fields requiring pagination need browser or server finalization. Browser saves refresh supported page counts, references and tables of contents. Unsupported cached fields remain preserved with diagnostics; inspect those before promising current values.

Create a proposal Design the template · Complete proposal source

Collect permitted form answers

Keep a trusted field definition beside the Word template. It defines permitted regions, answer types and rules. The filling interface keeps the document read-only while users enter answers in labelled controls.

import { openForm } from "@onodocs/editor/forms";

const form = await openForm({
  container, input: templateBytes, definition,
  persist: bytes => saveDraft(bytes),
  onComplete: ({ bytes, answers }) => submitRequest(bytes, answers)
});

container is your empty host. saveDraft and submitRequest are application callbacks and must reject failed storage. A completion contains Word bytes and structured answers from the same snapshot. Call form.save() to keep an incomplete draft and form.dispose() on unmount. Required, read-only, length, number, date and choice rules are supported.

The sample stores drafts in IndexedDB, scoped to the template and definition. Production storage also needs a user and document identity. Ask before restoring a saved draft. Form rules do not encrypt a document or prevent external editing; validate submissions against your trusted definition. The demo downloads completed Word, PDF and answers JSON. Open the form designer to edit fields through the Forms ribbon and export a runnable project with the Word template, definition, application source and license notices. The recipient view contains answers, drafts and completion downloads.

Complete an equipment request Design a form · Complete form source

Review an agreement and exchange Word files

Enable the review panel with an application-controlled identity. It supports anchored comments, replies, resolution, tracked text and run formatting, and accept/reject actions. Your application can store versions through the editor's history callbacks.

const editor = createEditor({
  container, mode: "review", allowedModes: ["edit", "review"],
  review: { identity: () => ({ author: user.displayName, initials: user.initials }) }
});
await editor.open(agreementBytes, "agreement.docx");
await editor.setMode("edit");
await editor.review({ kind: "trackChanges", enabled: true });

The preceding editor import also applies here. user comes from your authenticated application. Use editor.review(...) and editor.execute(...) for changes with history. Save with editor.save() to retain supported comments and pending revisions. Catch failures and dispose the editor when leaving.

Tracked replacements stay within a paragraph. Structural changes need tracking disabled. Imported paragraph-mark and table-row revision decisions require Word. Comparison covers paragraph text and effective formatting. The demo opens with seeded discussions, tracked suggestions and an original version. Use the built-in Review, Compare and History controls. Its Word 16 exchange covers comments, replies, pending replacements and ordinary text edits; it does not establish compatibility with every Word review feature.

Review an agreement Complete review source

Connect extracted content to its source

Extract JSON and Markdown through the public SDK. Each passage includes an opaque source reference that resolves to the current document. Your application can use it to show evidence before a person approves an edit.

import { extractDocument } from "@onodocs/sdk/browser";

const extraction = extractDocument(doc, { stories: ["body"] });
const { content, markdown } = extraction;
const anchor = extraction.resolve(sourceFromSearchResult);
const fragment = doc.geometry.fragments(anchor)[0];
if (fragment) view.scrollTo(fragment, { block: "center" });

doc is the open browser document and view is its Canvas view. sourceFromSearchResult must come from this extraction. References expire after edits or disposal; re-extract before using another result. They are not stable cross-version document IDs.

The hosted report demo uses predetermined local suggestions for its fictional sample. It makes no AI request and does not analyze arbitrary documents. For a real provider, supply the demo's httpReviewer with your backend endpoint. Keep credentials on the backend, check returned quotes against the current extraction, and require user approval for edits. Applying a change refreshes the remaining suggestions against the updated document. The editor supplies undo and Word/PDF downloads.

Inspect the sample report Complete report source

Choose browser, server or combined processing

Browser editing, generation and the hosted demos process documents locally. The form demo stores browser drafts; the other demos keep their working state in the tab. Integrate application persistence with openApplicationEditor from @onodocs/editor/application for autosave, dirty-state events and explicit recovery.

Node can inspect, edit, generate and save without browser layout. Install playwright-core alongside the SDK and use @onodocs/sdk/server with installed Chromium for pagination, page output and PDF. A frontend can receive prepared pages through @onodocs/canvas alone. See the existing server guide and backend processing and frontend display example.

@onodocs/sdk/http exposes authenticated document sessions around that renderer. Sessions are process-local and immutable; your service owns durable storage, authentication, routing and deployment. Replace sessions after edits. The public repository provides HTTP service and Node, Python and .NET client examples with setup instructions.

PDF export supports searchable text, links, bookmarks and tagged headings, lists, tables and figures. Supported graphics remain vector while visible native text is rasterized. Font availability affects pagination. PDF/UA certification and desktop screen-reader speech have not been established.

Add optional shared sessions

Use @onodocs/sdk/collaboration for a customer-hosted service and @onodocs/editor/collaboration for the editor. Pass the application key as licenseKey to createCollaborationService on the server and through the editor's document options in the browser. Omitting it uses evaluation mode. The host supplies authenticated identities, roles, transport and atomic storage. Presence includes names, carets and selections, with reconnect and draft recovery.

Automatic merging covers edits to different unchanged paragraphs. Same-paragraph edits and stale structural, formatting or review changes retain the local draft for explicit resolution. Shared checkpoints clear local snapshot undo history. Ordinary browser editing does not require this service. The public repository provides the complete collaboration example and setup instructions; the SDK provides its service and protocol.