> ## Documentation Index
> Fetch the complete documentation index at: https://docs.doconda.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Edit DOCX in the browser with JavaScript

> Pass the .docx to the <DocondaEditor> component (link or File): it is edited in the browser, never uploaded, and save() returns the edited File.

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

1. Get the plugin in the dashboard (**Billing → Editor plugin**), with a 7-day free trial. See
   [licence and domains](/en/editor/license).
2. Install it with the command from the dashboard (it needs React 19 or later):

```bash theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
npm install https://api.eu.doconda.com/v1/editor/package/edt_….tgz
```

3. Open the file. From a link:

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
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):

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
<DocondaEditor file={selectedFile} licenseKey="ek_eu_…" />
```

4. Get the edited file through a `ref`:

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
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).

5. Send it to your server:

```ts theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
// 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

<AccordionGroup>
  <Accordion title="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`.
  </Accordion>

  <Accordion title="Can I use it without React?">
    No: it is a React component and needs React 19 or later.
  </Accordion>

  <Accordion title="What if the link needs authentication?">
    Pass `requestInit`, which goes to `fetch` as is: for example,
    ``requestInit={{ headers: { Authorization: `Bearer ${token}` } }}``.
  </Accordion>

  <Accordion title="Can I save it as a new version in Doconda?">
    Yes, from your server with `POST /documents/{id}/versions`. See [editor plugin: save](/en/editor/introduction#save).
  </Accordion>
</AccordionGroup>

## Keep reading

* [Editor plugin](/en/editor/introduction) and [customize](/en/editor/customize).
* [Word (DOCX) editor for React](/en/answers/docx-editor-react).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.