> ## 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.

# How to embed a Word editor in your web page

> Add the <DocondaEditor> React component to your site: users edit the Word file on your page, in their browser, and you get the file on save.

To embed a Word editor in your web page, add Doconda's editor plugin (`@doconda/editor`), a React component. Users
open the `.docx`, edit it and save it without leaving your site, and you receive the file to store wherever you want.
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.
2. Add your domains (up to 5, https only). The editor only opens on them; on `localhost` it always opens, for
   development.
3. 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
```

4. Put it on your page, inside a container with a height:

```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>
  )
}
```

5. Save what the user edits, automatically or with Ctrl/Cmd+S:

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
<DocondaEditor
  src={url}
  autosave={2000}
  onSave={(bytes) => upload(bytes)}
  onDirtyChange={(pending) => setNotice(pending ? "Unsaved" : "Saved")}
  confirmOnLeave
/>
```

## Make it look like part of your product

* **Colours and font**: `theme="dark"` or your own values, for example
  `theme={{ accent: "#e11d48", font: "Inter, sans-serif", radius: "6px" }}`.
* **Language**: `locale="es"` or `"en"`, and `labels` to change any text.
* **Buttons**: `toolbar` picks which appear and in what order; `features` removes parts (comments, printing…).
* **Your own buttons**: with `items` you add, for example, "Send for signature", which gets the file with
  `api.save()`.

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
<DocondaEditor src={url} toolbar="undo redo | bold italic underline | bullets numbering | link" />
```

All of this is in [customize](/en/editor/customize).

## Why the key can go in your code

`licenseKey` is your licence key (`ek_eu_…`), not your API key. When it opens, the editor asks Doconda for a permit
for the site it is on; the address is set by the browser and the page cannot change it. Outside your domains the key
is useless, and the editor shows "This editor needs a Doconda licence".

## FAQ

<AccordionGroup>
  <Accordion title="Does my site have to use React?">
    Yes: it is a React component and needs React 19 or later.
  </Accordion>

  <Accordion title="Does it work for PowerPoint and Excel too?">
    Yes, the same component opens `.docx`, `.pptx` and `.xlsx`.
  </Accordion>

  <Accordion title="Does it work on subdomains?">
    Yes. `*.yourcompany.com` opens on any subdomain (not on `yourcompany.com`: add it separately). See
    [licence and domains](/en/editor/license#domains).
  </Accordion>

  <Accordion title="How much does it cost?">
    It is purchased separately from the API, per organization, with a monthly, yearly or one-time plan, and unlimited
    documents and users. The dashboard shows each plan's price. See [licence and domains](/en/editor/license).
  </Accordion>
</AccordionGroup>

## Keep reading

* [Editor plugin](/en/editor/introduction).
* [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.