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

# Editar un DOCX en el navegador con JavaScript

> Pasa el .docx al componente <DocondaEditor> (enlace o File): se edita en el navegador, sin subirlo a ningún sitio, y save() devuelve el File editado.

Para editar un DOCX en el navegador con JavaScript, usa el plugin de editor de Doconda (`@doconda/editor`): un
componente de React al que pasas el archivo, como enlace o como `File`. El usuario lo edita con un editor de Word
completo y `save()` te devuelve el `.docx` editado. Todo pasa en su navegador: el archivo no se sube a ningún sitio
para editarlo.

## Pasos

1. Contrata el plugin en el panel (**Facturación → Plugin de editor**), con 7 días de prueba gratis. Ver
   [licencia y dominios](/editor/license).
2. Instálalo con el comando del panel (necesita React 19 o superior):

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

3. Abre el archivo. Desde un enlace:

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

O desde memoria, por ejemplo el `File` de un `<input type="file">` (también vale un `Blob`, `ArrayBuffer` o
`Uint8Array`):

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

4. Pide el archivo editado con una `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()   // un File (.docx, .pptx, .xlsx o .pdf)
```

El archivo se llama como el original (o como diga `fileName`). La `ref` también trae `bytes()` (los bytes, sin
envolver en `File`), `focus()` e `isDirty()` (si hay cambios sin guardar).

5. Envíalo a tu servidor:

```ts theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
// En el navegador: el archivo va a tu servidor
const body = new FormData()
body.append("file", await editor.current!.save())
await fetch(`/api/documents/${id}/versions`, { method: "POST", body })
```

## Eventos útiles

| Propiedad | Qué hace |
| - | - |
| `onReady` | El archivo se ha abierto |
| `onError` | No se pudo abrir (o `editor_unlicensed`, sin licencia) |
| `onChange` | Cada vez que cambia algo |
| `onSave` | Ctrl/Cmd+S (y `autosave`), con los bytes del archivo |
| `onDirtyChange` | Hay cambios sin guardar (`true`) o ya se guardaron (`false`) |

## Qué se puede editar

Texto y estilos de párrafo, fuentes, colores, listas, tablas, imágenes, formas, enlaces, columnas, encabezado y pie,
notas al pie, comentarios, índice, buscar y reemplazar, e imprimir o guardar como PDF. Lo que el editor no toca se
guarda tal cual.

## Preguntas frecuentes

<AccordionGroup>
  <Accordion title="¿Se sube el documento a algún servidor para editarlo?">
    No. Se edita en el navegador del usuario. Solo sale de ahí si tú lo envías, por ejemplo desde `onSave`.
  </Accordion>

  <Accordion title="¿Puedo usarlo sin React?">
    No: es un componente de React y necesita React 19 o superior.
  </Accordion>

  <Accordion title="¿Y si el enlace necesita autenticación?">
    Pasa `requestInit`, que va tal cual a `fetch`: por ejemplo,
    ``requestInit={{ headers: { Authorization: `Bearer ${token}` } }}``.
  </Accordion>

  <Accordion title="¿Puedo guardarlo como versión nueva en Doconda?">
    Sí, desde tu servidor con `POST /documents/{id}/versions`. Ver
    [plugin de editor: guardar](/editor/introduction#guardar).
  </Accordion>
</AccordionGroup>

## Sigue leyendo

* [Plugin de editor](/editor/introduction) y [personalizar](/editor/customize).
* [Editor de Word (DOCX) para React](/answers/docx-editor-react).


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