diff --git a/docs/dist/v1/chartifact.editor.umd.js b/docs/dist/v1/chartifact.editor.umd.js
index adb27c31..30b43fc3 100644
--- a/docs/dist/v1/chartifact.editor.umd.js
+++ b/docs/dist/v1/chartifact.editor.umd.js
@@ -2952,8 +2952,8 @@ document.addEventListener('DOMContentLoaded', () => {
       (_a = this.iframe.contentWindow) == null ? void 0 : _a.postMessage(message, "*");
     }
     getDependencies() {
-      const { hostname, origin } = window.location;
-      const url = hostname === "localhost" ? origin : "https://microsoft.github.io";
+      const { hostname, origin, port } = window.location;
+      const url = hostname === "localhost" && port === "4000" ? origin : "https://microsoft.github.io";
       return `
 <link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css" rel="stylesheet" />
 <link href="${url}/chartifact/dist/v1/chartifact-reset.css" rel="stylesheet" />
diff --git a/docs/dist/v1/chartifact.host.umd.js b/docs/dist/v1/chartifact.host.umd.js
index 681d27c9..0dc12280 100644
--- a/docs/dist/v1/chartifact.host.umd.js
+++ b/docs/dist/v1/chartifact.host.umd.js
@@ -2952,8 +2952,8 @@ document.addEventListener('DOMContentLoaded', () => {
       (_a = this.iframe.contentWindow) == null ? void 0 : _a.postMessage(message, "*");
     }
     getDependencies() {
-      const { hostname, origin } = window.location;
-      const url = hostname === "localhost" ? origin : "https://microsoft.github.io";
+      const { hostname, origin, port } = window.location;
+      const url = hostname === "localhost" && port === "4000" ? origin : "https://microsoft.github.io";
       return `
 <link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css" rel="stylesheet" />
 <link href="${url}/chartifact/dist/v1/chartifact-reset.css" rel="stylesheet" />
diff --git a/docs/dist/v1/chartifact.sandbox.umd.js b/docs/dist/v1/chartifact.sandbox.umd.js
index 0658ce30..57207406 100644
--- a/docs/dist/v1/chartifact.sandbox.umd.js
+++ b/docs/dist/v1/chartifact.sandbox.umd.js
@@ -303,8 +303,8 @@ document.addEventListener('DOMContentLoaded', () => {
       (_a = this.iframe.contentWindow) == null ? void 0 : _a.postMessage(message, "*");
     }
     getDependencies() {
-      const { hostname, origin } = window.location;
-      const url = hostname === "localhost" ? origin : "https://microsoft.github.io";
+      const { hostname, origin, port } = window.location;
+      const url = hostname === "localhost" && port === "4000" ? origin : "https://microsoft.github.io";
       return `
 <link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css" rel="stylesheet" />
 <link href="${url}/chartifact/dist/v1/chartifact-reset.css" rel="stylesheet" />
diff --git a/packages/html-wrapper/test/test-umd.html b/packages/html-wrapper/test/test-umd.html
index 2f1eb9d8..08b9ad5d 100644
--- a/packages/html-wrapper/test/test-umd.html
+++ b/packages/html-wrapper/test/test-umd.html
@@ -92,7 +92,7 @@ <h2>Test 3: JSON Viewer</h2>
     <script src="https://microsoft.github.io/chartifact/dist/v1/chartifact.compiler.umd.js"></script>
     
     <!-- Load html-wrapper UMD bundle -->
-    <script src="../../docs/dist/v1/chartifact.html-wrapper.umd.js"></script>
+    <script src="../../../docs/dist/v1/chartifact.html-wrapper.umd.js"></script>
 
     <script>
         // Test 1: Check if the module loaded
@@ -108,8 +108,8 @@ <h2>Test 3: JSON Viewer</h2>
         function initializeViewers() {
             const mdTestDiv = document.getElementById('md-test');
             try {
-                const result = Chartifact.htmlWrapper.initMarkdownViewer('#source-md', '#preview-md', '.chartifact-toolbar-md');
-                if (result && result.sandbox && result.toolbar) {
+                const result = Chartifact.htmlWrapper.htmlMarkdownWrapper('#source-md', '#preview-md', '.chartifact-toolbar-md');
+                if (result) {
                     mdTestDiv.innerHTML = '<span class="success">✓ Markdown viewer initialized successfully!</span>';
                 } else {
                     mdTestDiv.innerHTML = '<span class="error">✗ Markdown viewer initialization returned unexpected result</span>';
@@ -120,8 +120,8 @@ <h2>Test 3: JSON Viewer</h2>
 
             const jsonTestDiv = document.getElementById('json-test');
             try {
-                const result = Chartifact.htmlWrapper.initJsonViewer('#source-json', '#preview-json', '.chartifact-toolbar-json');
-                if (result && result.sandbox && result.toolbar) {
+                const result = Chartifact.htmlWrapper.htmlJsonWrapper('#source-json', '#preview-json', '.chartifact-toolbar-json');
+                if (result) {
                     jsonTestDiv.innerHTML = '<span class="success">✓ JSON viewer initialized successfully!</span>';
                 } else {
                     jsonTestDiv.innerHTML = '<span class="error">✗ JSON viewer initialization returned unexpected result</span>';
diff --git a/packages/sandbox/src/sandbox.ts b/packages/sandbox/src/sandbox.ts
index e2176862..8a12ae74 100644
--- a/packages/sandbox/src/sandbox.ts
+++ b/packages/sandbox/src/sandbox.ts
@@ -104,8 +104,8 @@ export class Sandbox {
     }
 
     getDependencies() {
-        const { hostname, origin } = window.location;
-        const url = (hostname === 'localhost')
+        const { hostname, origin, port } = window.location;
+        const url = (hostname === 'localhost' && port === '4000')
             ? origin
             : 'https://microsoft.github.io';
         return `