Edit DOCX in the browser with JavaScript

To edit DOCX in the browser with JavaScript, use Doconda’s editor plugin (@doconda/editor): a React component you pass the file to, as a link or as a File. Users edit it in a full Word editor and save() gives you back the edited .docx. Everything happens in their browser: the file is not uploaded anywhere to be edited.

Steps

Get the plugin in the dashboard (Billing → Editor plugin), with a 7-day free trial. See licence and domains.
Install it with the command from the dashboard (it needs React 19 or later):

npm install https://api.eu.doconda.com/v1/editor/package/edt_….tgz

Open the file. From a link:

import { DocondaEditor } from "@doconda/editor"

export function Edit({ url }: { url: string }) {
  return (
    <div style={{ height: 700, display: "flex" }}>
      <DocondaEditor src={url} licenseKey="ek_eu_…" className="flex-1" />
    </div>
  )
}

Or from memory, for example the File from an <input type="file"> (a Blob, ArrayBuffer or Uint8Array also works):

<DocondaEditor file={selectedFile} licenseKey="ek_eu_…" />

Get the edited file through a ref:

import { useRef } from "react"
import { DocondaEditor, type EditorHandle } from "@doconda/editor"

const editor = useRef<EditorHandle>(null)

<DocondaEditor ref={editor} src={url} licenseKey="ek_eu_…" />

const file = await editor.current!.save()   // a File (.docx, .pptx, .xlsx or .pdf)

The file keeps the original’s name (or whatever fileName says). The ref also has bytes() (the bytes, not wrapped in a File), focus() and isDirty() (whether there are unsaved changes).

Send it to your server:

// In the browser: the file goes to your server
const body = new FormData()
body.append("file", await editor.current!.save())
await fetch(`/api/documents/${id}/versions`, { method: "POST", body })

Useful events

Prop	What it does
`onReady`	The file has opened
`onError`	It could not be opened (or `editor_unlicensed`, without a licence)
`onChange`	Every time something changes
`onSave`	Ctrl/Cmd+S (and `autosave`), with the file’s bytes
`onDirtyChange`	There are unsaved changes (`true`) or they were saved (`false`)

What it edits

Text and paragraph styles, fonts, colours, lists, tables, images, shapes, links, columns, header and footer, footnotes, comments, table of contents, find and replace, and print or save as PDF. Whatever the editor does not touch is saved as is.

FAQ

Is the document uploaded to a server to be edited?

No. It is edited in the user’s browser. It only leaves it if you send it, for example from onSave.

Can I use it without React?

No: it is a React component and needs React 19 or later.

What if the link needs authentication?

Pass requestInit, which goes to fetch as is: for example, requestInit={{ headers: { Authorization: `Bearer ${token}` } }}.

Can I save it as a new version in Doconda?

Yes, from your server with POST /documents/{id}/versions. See editor plugin: save.

Keep reading

Editor plugin and customize.
Word (DOCX) editor for React.

Get started

Guides

Use cases

Edit DOCX in the browser with JavaScript

Steps

Useful events

What it edits

FAQ

Keep reading

​Steps

​Useful events

​What it edits

​FAQ

​Keep reading

Steps

Useful events

What it edits

FAQ

Keep reading