Basic setup
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/superdoc/dist/style.css"
rel="stylesheet">
</head>
<body>
<div id="editor" style="height: 700px"></div>
<script type="module">
import { SuperDoc } from 'https://cdn.jsdelivr.net/npm/superdoc/dist/superdoc.es.js';
const superdoc = new SuperDoc({
selector: '#editor',
document: 'contract.docx'
});
</script>
</body>
</html>
import { SuperDoc } from 'superdoc';
import { superdocFonts } from '@superdoc-dev/fonts';
import 'superdoc/style.css';
const superdoc = new SuperDoc({
selector: '#editor',
document: 'contract.docx',
fonts: superdocFonts,
});
Load documents
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
});
});
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
});
});
new SuperDoc({
selector: '#editor',
document: 'https://example.com/contract.docx'
});
Complete example
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/superdoc/dist/style.css"
rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/superdoc/dist/superdoc.min.js"></script>
</head>
<body>
<div class="controls">
<input type="file" id="file-input" accept=".docx">
<button id="mode-edit">Edit</button>
<button id="mode-review">Review</button>
<button id="export-btn">Export</button>
</div>
<div id="editor" style="height: 700px"></div>
<script>
let superdoc = null;
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'
});
});
document.getElementById('mode-edit').addEventListener('click', () => {
superdoc?.setDocumentMode('editing');
});
document.getElementById('mode-review').addEventListener('click', () => {
superdoc?.setDocumentMode('suggesting');
});
document.getElementById('export-btn').addEventListener('click', async () => {
await superdoc?.export({ isFinalDoc: true });
});
</script>
</body>
</html>
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 - Configuration options
- React Integration - Using with React
- Vue Integration - Using with Vue