superdoc-dev · edoversb · Aug 30, 2025 · Aug 29, 2025
diff --git a/examples/loading-from-json/demo-config.json b/examples/loading-from-json/demo-config.json
@@ -0,0 +1,9 @@
+{
+    "dirname": "loading-from-json",
+    "tags": [
+        "editing",
+        "viewing",
+        "vanilla-js"
+    ],
+    "title": "Loading from JSON"
+}
diff --git a/examples/loading-from-json/demo-thumbnail.png b/examples/loading-from-json/demo-thumbnail.png
diff --git a/examples/loading-from-json/demo-video.mp4 b/examples/loading-from-json/demo-video.mp4
diff --git a/examples/loading-from-json/index.html b/examples/loading-from-json/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SuperDoc Vanilla Example</title>
+  </head>
+  <body>
+    <div class="container">
+      <header>
+        <h1>SuperDoc Example</h1>
+        <button id="loadButton">Upload DOCX</button>
+        <button id="loadJSON">Load JSON</button>
+        <input
+          type="file"
+          id="fileInput"
+          accept=".docx,.pdf,.html"
+          style="display: none"
+        />
+      </header>
+      <main>
+        <div id="superdoc-toolbar"></div>
+        <div id="superdoc"></div>
+      </main>
+    </div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/examples/loading-from-json/package.json b/examples/loading-from-json/package.json
@@ -0,0 +1,15 @@
+{
+    "name": "vanilla-superdoc-example",
+    "private": true,
+    "version": "0.0.1",
+    "type": "module",
+    "scripts": {
+        "dev": "vite"
+    },
+    "dependencies": {
+        "@harbour-enterprises/superdoc": "^0.15.16"
+    },
+    "devDependencies": {
+        "vite": "^4.4.6"
+    }
+}
diff --git a/examples/loading-from-json/src/main.js b/examples/loading-from-json/src/main.js
@@ -0,0 +1,100 @@
+// Imports
+import { SuperDoc } from '@harbour-enterprises/superdoc';
+import '@harbour-enterprises/superdoc/style.css';
+import './style.css';
+
+// Init
+let editor = null;
+
+//Init SuperDoc from DOCX file
+function initSuperDocFromFile(file = null) {
+  if (editor) {
+    editor = null;
+  }
+
+  editor = new SuperDoc({
+    selector: '#superdoc',
+    toolbar: '#superdoc-toolbar',
+    document: file, // DOCX URL, File object, or document config
+    documentMode: 'editing',
+    mode: 'docx',
+    pagination: true,
+    rulers: true,
+    onReady: (event) => {
+      const docJSON = event.superdoc.activeEditor.getJSON();
+      console.log('SuperDoc ready - JSON', docJSON);
+    },
+    onEditorUpdate: (event) => {
+      const docJSON = event.editor.getJSON();
+      console.log('SuperDoc updated - JSON', docJSON);
+    },
+  });
+}
+
+//Init SuperDoc from JSON
+function initSuperDocFromJSON() {
+  if (editor) {
+    editor = null;
+  }
+
+  //Hardcoded demo JSON
+  const demoJSON = {
+    type: 'doc',
+    content: [
+      {
+        type: 'paragraph',
+        content: [
+          {
+            type: 'text',
+            text: 'Hello, SuperDoc~!!',
+          },
+        ],
+      },
+    ],
+  };
+
+  editor = new SuperDoc({
+    selector: '#superdoc',
+    toolbar: '#superdoc-toolbar',
+    documentMode: 'editing',
+
+    /* LOADING JSON */
+    //https://docs.superdoc.dev/core/supereditor/configuration#param-options-content
+    mode: 'docx',
+    jsonOverride: demoJSON,
+
+    pagination: true,
+    rulers: true,
+    onReady: (event) => {
+      const docJSON = event.superdoc.activeEditor.getJSON();
+      console.log('SuperDoc ready - JSON', docJSON);
+    },
+    onEditorUpdate: (event) => {
+      const docJSON = event.editor.getJSON();
+      console.log('SuperDoc updated - JSON', docJSON);
+    },
+  });
+}
+
+// Setup file input handling
+const fileInput = document.getElementById('fileInput');
+const loadButton = document.getElementById('loadButton');
+const loadJSON = document.getElementById('loadJSON');
+
+loadButton.addEventListener('click', () => {
+  fileInput.click();
+});
+
+loadJSON.addEventListener('click', () => {
+  initSuperDocFromJSON();
+});
+
+fileInput.addEventListener('change', (event) => {
+  const file = event.target.files?.[0];
+  if (file) {
+    initSuperDocFromFile(file);
+  }
+});
+
+// Initialize empty editor on page load
+initSuperDocFromFile(null);
diff --git a/examples/loading-from-json/src/style.css b/examples/loading-from-json/src/style.css
@@ -0,0 +1,45 @@
+.container {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  header {
+    padding: 1rem;
+    background: #f5f5f5;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  button {
+    padding: 0.5rem 1rem;
+    background: #1355ff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  button:hover {
+    background: #0044ff;
+  }
+
+  main {
+    flex: 1;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+  }
+
+  #superdoc-toolbar {
+    border-bottom: 1px solid #eee;
+  }
+
+  #superdoc {
+    display: flex;
+    justify-content: center;
+    flex: 1;
+    overflow: auto;
+  }
+
diff --git a/examples/loading-from-json/vite.config.js b/examples/loading-from-json/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  optimizeDeps: {
+    include: ['@harbour-enterprises/superdoc']
+  }
+});