How to embed a Word editor in your web page

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

Get the plugin in the dashboard (Billing → Editor plugin), with a 7-day free trial.
Add your domains (up to 5, https only). The editor only opens on them; on localhost it always opens, for development.
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

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

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

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

<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().

<DocondaEditor src={url} toolbar="undo redo | bold italic underline | bullets numbering | link" />

All of this is in 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

Does my site have to use React?

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

Does it work for PowerPoint and Excel too?

Yes, the same component opens .docx, .pptx and .xlsx.

Does it work on subdomains?

Yes. *.yourcompany.com opens on any subdomain (not on yourcompany.com: add it separately). See licence and domains.

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.

Get started

Guides

Use cases

How to embed a Word editor in your web page

Steps

Make it look like part of your product

Why the key can go in your code

FAQ

Keep reading

​Steps

​Make it look like part of your product

​Why the key can go in your code

​FAQ

​Keep reading

Steps

Make it look like part of your product

Why the key can go in your code

FAQ

Keep reading