# docx-editor-default
> Document editor container for opening, editing, and viewing a Word document in the browser.
**Framework:** javascript **Component:** DocxEditor **Variant:** default
## Get this item
**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:
```
GET https://ai.syncfusion.com/r/javascript/docx-editor-default.json
```
**Install Package(s)**
```bash
npm install @syncfusion/ej2-documenteditor
```
**Notes**
- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md
## Source files
### src/components/docx-editor-default/default.html
```html
```
### src/components/docx-editor-default/default.ts
```typescript
import { DocumentEditorContainer, Ribbon, Toolbar } from '@syncfusion/ej2-documenteditor';
import * as data from './data-default.json';
import { Switch } from '@syncfusion/ej2-buttons';
import {
createSpinner,
showSpinner,
hideSpinner,
} from '@syncfusion/ej2-popups';
(window as any).default = (): void => {
let hostUrl: string = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
let container: DocumentEditorContainer = new DocumentEditorContainer({
serviceUrl: hostUrl,
enableToolbar: true,
toolbarMode: 'Ribbon',
height: '590px',
fileMenuItems: [
'New',
'Open',
{
text: 'Export',
id: 'custom_item',
iconCss: 'e-icons e-export',
items: [
{ id: 'sfdt', text: 'Syncfusion Document Text (*.sfdt)' },
{ id: 'docx', text: 'Word Document (*.docx)' },
{ id: 'dotx', text: 'Word Template (*.dotx)' },
{ id: 'text', text: 'Plain Text (*.txt)' },
{ id: 'pdf', text: 'PDF (*.pdf)' },
{ id: 'html', text: 'HyperText Markup Language (*.html)' },
{ id: 'rtf', text: 'Rich Text Format (*.rtf)' },
{ id: 'md', text: 'Markdown (*.md)' },
{ id: 'odt', text: 'OpenDocument Text (*.odt)' },
{ id: 'wordml', text: 'Word XML Document (*.xml)' }
],
},
'Print',
],
fileMenuItemClick: function (args) {
if (args.item.id) {
let value: string = args.item.id;
let sampleName: string = container.documentEditor.documentName === '' ? 'sample' : container.documentEditor.documentName;
switch (value) {
case 'docx':
container.documentEditor.save(sampleName, 'Docx');
break;
case 'sfdt':
container.documentEditor.save(sampleName, 'Sfdt');
break;
case 'text':
container.documentEditor.save(sampleName, 'Txt');
break;
case 'dotx':
container.documentEditor.save(sampleName, 'Dotx');
break;
case 'pdf':
formatSave('Pdf');
break;
case 'html':
formatSave('Html');
break;
case 'odt':
formatSave('Odt');
break;
case 'md':
formatSave('Md');
break;
case 'rtf':
formatSave('Rtf');
break;
case 'wordml':
formatSave('Xml');
break;
}
}
},
});
DocumentEditorContainer.Inject(Toolbar, Ribbon);
container.appendTo('#container');
(window as any).container = container;
function formatSave(type: string) {
createSpinner({
target: document.getElementById('container'),
});
showSpinner(document.getElementById('container'));
let format: string = type;
let url = (window as any).container.documentEditor.serviceUrl + 'Export';
let http = new XMLHttpRequest();
http.open('POST', url);
http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
http.responseType = 'blob';
let sfdt = {
Content: (window as any).container.documentEditor.serialize(),
Filename: (window as any).container.documentEditor.documentName,
Format: '.' + format,
};
http.onload = function () {
if (http.status === 200) {
let responseData = http.response;
let blobUrl = URL.createObjectURL(responseData);
let downloadLink = document.createElement('a');
downloadLink.href = blobUrl;
downloadLink.download =
(window as any).container.documentEditor.documentName + '.' + format.toLowerCase();
document.body.appendChild(downloadLink);
hideSpinner(document.getElementById('container'));
downloadLink.click();
document.body.removeChild(downloadLink);
URL.revokeObjectURL(blobUrl);
} else {
console.error('Request failed with status:', http.status);
hideSpinner(document.getElementById('container'));
}
};
http.send(JSON.stringify(sfdt));
}
container.documentEditor.open(JSON.stringify((data)));
container.documentEditor.documentName = 'Getting Started';
container.documentChange = (): void => {
container.documentEditor.focusIn();
};
let switchObj: Switch = new Switch({ value: 'Toolbar Mode', checked: true, cssClass: 'buttonSwitch' });
switchObj.appendTo('#toolbarSwitch');
switchObj.change = function (args : any) {
if (args.checked) {
container.toolbarMode = 'Ribbon';
}
else {
container.toolbarMode = 'Toolbar';
}
}
};
```