Install
npm install superdoc
<link href="https://cdn.jsdelivr.net/npm/superdoc/dist/style.css" rel="stylesheet"> <script type="module"> import { SuperDoc } from 'https://cdn.jsdelivr.net/npm/superdoc/dist/superdoc.es.js'; </script>
Mount the editor
<div id="editor" style="height: 100vh"></div> <script type="module"> import { SuperDoc } from 'superdoc'; import 'superdoc/style.css'; const superdoc = new SuperDoc({ selector: '#editor', }); </script>
Load a document
File
Blob
new SuperDoc({ selector: '#editor', document: '/files/contract.docx', });
<input type="file" accept=".docx" id="file-input" /> <div id="editor" style="height: 100vh"></div> <script type="module"> import { SuperDoc } from 'superdoc'; import 'superdoc/style.css'; document.getElementById('file-input').addEventListener('change', (e) => { new SuperDoc({ selector: '#editor', document: e.target.files[0], }); }); </script>
const response = await fetch('/api/documents/123'); const blob = await response.blob(); new SuperDoc({ selector: '#editor', document: new File([blob], 'document.docx'), });
import { SuperDocEditor } from '@superdoc-dev/react'; import '@superdoc-dev/react/style.css'; function App() { return <SuperDocEditor document={file} />; }
npm install @superdoc-dev/react
Was this page helpful?