> ## Documentation Index
> Fetch the complete documentation index at: https://superdoc-caio-pizzol-docs-ai-core-preset.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Vanilla JavaScript
SuperDoc works with plain JavaScript. No framework required.
## Basic setup
```html CDN theme={null}
```
```javascript NPM/Bundler theme={null}
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';
const superdoc = new SuperDoc({
selector: '#editor',
document: 'contract.docx'
});
```
## Load documents
```javascript File Upload theme={null}
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
new SuperDoc({
selector: '#editor',
document: file
});
});
```
```javascript Fetch API theme={null}
fetch('/api/documents/123')
.then(res => res.blob())
.then(blob => {
// Convert Blob to File (required)
const file = new File([blob], 'document.docx', {
type: blob.type || 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
});
new SuperDoc({
selector: '#editor',
document: file
});
});
```
```javascript Direct URL theme={null}
new SuperDoc({
selector: '#editor',
document: 'https://example.com/contract.docx'
});
```
## Complete example
```html CDN theme={null}
```
```javascript NPM/Bundler theme={null}
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';
let superdoc = null;
// File upload
document.getElementById('file-input').addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
superdoc = new SuperDoc({
selector: '#editor',
document: file,
documentMode: 'editing'
});
});
// Mode controls
document.getElementById('mode-edit').addEventListener('click', () => {
superdoc?.setDocumentMode('editing');
});
document.getElementById('mode-review').addEventListener('click', () => {
superdoc?.setDocumentMode('suggesting');
});
// Export
document.getElementById('export-btn').addEventListener('click', async () => {
await superdoc?.export({ isFinalDoc: true });
});
```
## Next steps
* [API Reference](/editor/superdoc/configuration) - Configuration options
* [React Integration](/getting-started/frameworks/react) - Using with React
* [Vue Integration](/getting-started/frameworks/vue) - Using with Vue