SuperDoc works with plain JavaScript. No framework required.

​
Basic Setup

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/@harbour-enterprises/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/@harbour-enterprises/superdoc/dist/superdoc.es.js';
    
    const superdoc = new SuperDoc({
      selector: '#editor',
      document: 'contract.docx'
    });
  </script>
</body>
</html>

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

​
Complete Example

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/@harbour-enterprises/superdoc/dist/style.css" 
        rel="stylesheet">
</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 type="module">
    import { SuperDoc } from 'https://cdn.jsdelivr.net/npm/@harbour-enterprises/superdoc/dist/superdoc.es.js';
    
    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>

​
Next Steps