diff --git a/proto/raw-js-openapi/webpack.config.js b/proto/raw-js-openapi/webpack.config.js
index 793653ffae7..05627b1d856 100644
--- a/proto/raw-js-openapi/webpack.config.js
+++ b/proto/raw-js-openapi/webpack.config.js
@@ -8,7 +8,11 @@ module.exports = {
     output: {
         path: __dirname+'/build/js-out/',
         filename: 'dh-internal.js',
-        libraryTarget: "umd",
+        libraryTarget: 'module',
+        module:true,
+    },
+    experiments: {
+        outputModule:true
     },
     resolve : {
         modules: ['node_modules', __dirname + '/build/js-src'],
diff --git a/web/client-api/src/main/java/io/deephaven/web/DeephavenJsApiLinker.java b/web/client-api/src/main/java/io/deephaven/web/DeephavenJsApiLinker.java
index 501ffc28ab4..2f1667112d4 100644
--- a/web/client-api/src/main/java/io/deephaven/web/DeephavenJsApiLinker.java
+++ b/web/client-api/src/main/java/io/deephaven/web/DeephavenJsApiLinker.java
@@ -9,7 +9,9 @@
 import com.google.gwt.core.ext.linker.*;
 import com.google.gwt.dev.About;
 import com.google.gwt.dev.util.DefaultTextOutput;
+import com.google.gwt.util.tools.Utility;
 
+import java.io.IOException;
 import java.util.Set;
 
 /**
@@ -35,8 +37,6 @@ public ArtifactSet link(TreeLogger logger, LinkerContext context, ArtifactSet ar
 
         ArtifactSet toReturn = new ArtifactSet(artifacts);
         DefaultTextOutput out = new DefaultTextOutput(true);
-        out.print("(function(){");
-        out.newline();
 
         // get compilation result
         Set<CompilationResult> results = artifacts.find(CompilationResult.class);
@@ -54,23 +54,41 @@ public ArtifactSet link(TreeLogger logger, LinkerContext context, ArtifactSet ar
 
         // get the generated javascript
         String[] javaScript = result.getJavaScript();
-        out.print("self.dh = {}");
-        out.newline();
-        out.print("var $wnd = self, $doc, $entry, $moduleName, $moduleBase;");
-        out.newline();
-        out.print("var $gwt_version = \"" + About.getGwtVersionNum() + "\";");
-        out.newlineOpt();
-        out.print(javaScript[0]);
-        out.newline();
-
-        out.print("gwtOnLoad(null,'" + context.getModuleName() + "',null);");
-        out.newline();
-        out.print("})();");
-        out.newline();
+
+        StringBuffer buffer = readFileToStringBuffer(getSelectionScriptTemplate(), logger);
+        replaceAll(buffer, "__GWT_VERSION__", About.getGwtVersionNum());
+        replaceAll(buffer, "__JAVASCRIPT_RESULT__", javaScript[0]);
+        replaceAll(buffer, "__MODULE_NAME__", context.getModuleName());
+
+        out.print(buffer.toString());
 
         toReturn.add(emitString(logger, out.toString(), "dh-core.js"));
 
         return toReturn;
     }
 
+    protected StringBuffer readFileToStringBuffer(String filename,
+            TreeLogger logger) throws UnableToCompleteException {
+        StringBuffer buffer;
+        try {
+            buffer = new StringBuffer(Utility.getFileFromClassPath(filename));
+        } catch (IOException e) {
+            logger.log(TreeLogger.ERROR, "Unable to read file: " + filename, e);
+            throw new UnableToCompleteException();
+        }
+        return buffer;
+    }
+
+    protected String getSelectionScriptTemplate() {
+        return "io/deephaven/web/DeephavenJsApiLinkerTemplate.js";
+    }
+
+    protected static void replaceAll(StringBuffer buf, String search,
+            String replace) {
+        int len = search.length();
+        for (int pos = buf.indexOf(search); pos >= 0; pos = buf.indexOf(search,
+                pos + replace.length())) {
+            buf.replace(pos, pos + len, replace);
+        }
+    }
 }
diff --git a/web/client-api/src/main/java/io/deephaven/web/DeephavenJsApiLinkerTemplate.js b/web/client-api/src/main/java/io/deephaven/web/DeephavenJsApiLinkerTemplate.js
new file mode 100644
index 00000000000..6a7ed749806
--- /dev/null
+++ b/web/client-api/src/main/java/io/deephaven/web/DeephavenJsApiLinkerTemplate.js
@@ -0,0 +1,29 @@
+function bindTo(target, source) {
+    var descriptors = Object.getOwnPropertyDescriptors(source);
+    for (var key in descriptors) {
+        if (!(key[0].toUpperCase() === key[0])) {
+            var descriptor = descriptors[key];
+            if (typeof (descriptor.value) === 'function') {
+                descriptor.value = descriptor.value.bind(source)
+            } else if (typeof (descriptor.get) === 'function') {
+                descriptor.get = descriptor.get.bind(source);
+            }
+        }
+    }
+    Object.defineProperties(target, descriptors);
+}
+
+var Scope = function () {
+};
+Scope.prototype = self;
+var $doc, $entry, $moduleName, $moduleBase;
+var $wnd = new Scope();
+bindTo($wnd, self);
+var dh = {}
+$wnd.dh = dh;
+import {dhinternal} from './dh-internal.js';
+$wnd.dhinternal = dhinternal;
+var $gwt_version = "__GWT_VERSION__";
+__JAVASCRIPT_RESULT__
+gwtOnLoad(null, '__MODULE_NAME__', null);
+export default dh;
diff --git a/web/client-api/src/main/java/io/deephaven/web/public/console.html b/web/client-api/src/main/java/io/deephaven/web/public/console.html
index 597a221129a..96428fab658 100644
--- a/web/client-api/src/main/java/io/deephaven/web/public/console.html
+++ b/web/client-api/src/main/java/io/deephaven/web/public/console.html
@@ -4,15 +4,16 @@
     <meta charset="utf-8" />
 
     <title>Deephaven JS API Console Interaction</title>
-    <script src="dh-internal.js" type="text/javascript"></script>
-    <script src="dh-core.js" type="text/javascript"></script>
 </head>
 <body>
 <div id="logs"></div>
 <div id="tools">
     <textarea id="command" placeholder="waiting for connection..." rows="1" cols="80" autofocus="autofocus" disabled="disabled" style="resize:vertical"></textarea><button id="run">Run</button>
 </div>
-<script type="text/javascript">
+<script type="module">
+    import dh from './dh-core.js';
+
+    const {CoreClient} = dh;
     var client;
     var connection;
     var ide;
@@ -20,8 +21,8 @@
     (async () => {
         var url = new URL(window.location);
         // create a connection to the server
-        client = new dh.CoreClient(url.protocol + "//" + url.host);
-        await client.login({type:dh.CoreClient.LOGIN_TYPE_ANONYMOUS});
+        client = new CoreClient(url.protocol + "//" + url.host);
+        await client.login({type:CoreClient.LOGIN_TYPE_ANONYMOUS});
         connection = await client.getAsIdeConnection();
 
         // check if a language was specified
diff --git a/web/client-api/src/main/java/io/deephaven/web/public/format.html b/web/client-api/src/main/java/io/deephaven/web/public/format.html
index 4731a698fe0..db738557e3f 100644
--- a/web/client-api/src/main/java/io/deephaven/web/public/format.html
+++ b/web/client-api/src/main/java/io/deephaven/web/public/format.html
@@ -3,8 +3,6 @@
 <head>
     <meta charset="UTF-8">
     <title>Deephaven Web API Formatting examples</title>
-    <script src="dh-internal.js" type="text/javascript"></script>
-    <script src="dh-core.js" type="text/javascript"></script>
     <style>
         .console {
             max-height: 200px;
@@ -73,8 +71,8 @@ <h4>Sample format strings (click to replace the current format)</h4>
         </ul>
     </div>
 </div>
-<script>
-
+<script type="module">
+  import dh from './dh-core.js';
 
   document.querySelectorAll(".section").forEach(section => {
     var patternInput = section.querySelector('.pattern');
diff --git a/web/client-api/src/main/java/io/deephaven/web/public/freeze.html b/web/client-api/src/main/java/io/deephaven/web/public/freeze.html
index 7e7a98524e1..286e16367c6 100644
--- a/web/client-api/src/main/java/io/deephaven/web/public/freeze.html
+++ b/web/client-api/src/main/java/io/deephaven/web/public/freeze.html
@@ -3,8 +3,6 @@
 <head>
     <meta charset="utf-8" />
     <title>Deephaven Web API table freeze</title>
-    <script src="dh-internal.js" type="text/javascript"></script>
-    <script src="dh-core.js" type="text/javascript"></script>
     <link href="basic.css" rel="stylesheet" type="text/css" />
     <style>
         li.open ul { display:block; }
@@ -40,8 +38,10 @@ <h3>Selected table data</h3>
 <button id="next_frozen">&gt;</button>
 <button id="end_frozen">&gt;&gt;</button>
 
-<script>
+<script type="module">
+    import dh from './dh-core.js';
 
+    const {Client} = dh;
     var url = new URL('/socket', window.location);
     if (url.protocol === 'http:') {
         url.protocol = 'ws:';
@@ -49,7 +49,7 @@ <h3>Selected table data</h3>
         url.protocol = 'wss:';
     }
 
-    window.c = new dh.Client(url.href);
+    window.c = new Client(url.href);
     c.addEventListener(dh.Client.EVENT_CONNECT, () => {
         connected();
     c.login({username:'dh',token:'dh',type:'password'}).then(result => {
diff --git a/web/client-api/src/main/java/io/deephaven/web/public/grpc.html b/web/client-api/src/main/java/io/deephaven/web/public/grpc.html
index d3d413a574e..d15a271d305 100644
--- a/web/client-api/src/main/java/io/deephaven/web/public/grpc.html
+++ b/web/client-api/src/main/java/io/deephaven/web/public/grpc.html
@@ -4,7 +4,6 @@
     <meta charset="utf-8" />
 
     <title>Deephaven gRPC test page</title>
-    <script src="dh-internal.js" type="text/javascript"></script>
 </head>
 <body>
 <h3>Simple test page to verify that gRPC is working</h3>
diff --git a/web/client-api/src/main/java/io/deephaven/web/public/index.html b/web/client-api/src/main/java/io/deephaven/web/public/index.html
index d9209862d9d..915dde66a8b 100644
--- a/web/client-api/src/main/java/io/deephaven/web/public/index.html
+++ b/web/client-api/src/main/java/io/deephaven/web/public/index.html
@@ -4,8 +4,6 @@
     <meta charset="utf-8" />
 
     <title>Deephaven JS API samples</title>
-    <script src="dh-internal.js" type="text/javascript"></script>
-    <script src="dh-core.js" type="text/javascript"></script>
 </head>
 <body>
 Welcome to the Deephaven JS API. This page has the api loaded, open the browser console to interact with the server.
diff --git a/web/client-api/src/main/java/io/deephaven/web/public/input_table.html b/web/client-api/src/main/java/io/deephaven/web/public/input_table.html
index 3f7510962de..599f6a5dfe6 100644
--- a/web/client-api/src/main/java/io/deephaven/web/public/input_table.html
+++ b/web/client-api/src/main/java/io/deephaven/web/public/input_table.html
@@ -3,8 +3,6 @@
 <head>
   <meta charset="utf-8" />
   <title>Deephaven Web API table viewport and updates</title>
-  <script src="dh-internal.js" type="text/javascript"></script>
-  <script src="dh-core.js" type="text/javascript"></script>
   <script src="input_tables.js" type="text/javascript"></script>
   <link href="basic.css" rel="stylesheet" type="text/css" />
   <style>
@@ -34,7 +32,10 @@ <h3>Table data (bold headers are keys)</h3>
 <button id="next">&gt;</button>
 <button id="end">&gt;&gt;</button>
 
-<script>
+<script type="module">
+  import dh from './dh-core.js'
+
+  const {CoreClient, Table} = dh;
   var table, inputTable;
   var connection;
   var ide;
@@ -43,8 +44,8 @@ <h3>Table data (bold headers are keys)</h3>
   var currentOffset;
   var PAGE_SIZE = 20;
   (async () => {
-    var client = new dh.CoreClient(window.location.protocol + "//" + window.location.host);
-    await client.login({type:dh.CoreClient.LOGIN_TYPE_ANONYMOUS});
+    var client = new CoreClient(window.location.protocol + "//" + window.location.host);
+    await client.login({type:CoreClient.LOGIN_TYPE_ANONYMOUS});
     connection = await client.getAsIdeConnection();
 
     var types = await connection.getConsoleTypes();
@@ -137,7 +138,7 @@ <h3>Table data (bold headers are keys)</h3>
     simplePagingTable.appendChild(header);
 
     // listen for items to be added, populate the table body
-    oldTableHandlerCleanup = t.addEventListener(dh.Table.EVENT_UPDATED, function handleTableUpdate(event) {
+    oldTableHandlerCleanup = t.addEventListener(Table.EVENT_UPDATED, function handleTableUpdate(event) {
       console.log("update event received, time to redraw data");
       // rebuild the current tbody from scratch
       var tbody = simplePagingTable.querySelector('tbody');
diff --git a/web/client-api/src/main/java/io/deephaven/web/public/linked/child.html b/web/client-api/src/main/java/io/deephaven/web/public/linked/child.html
index b4102876cc1..3e01b61ee60 100644
--- a/web/client-api/src/main/java/io/deephaven/web/public/linked/child.html
+++ b/web/client-api/src/main/java/io/deephaven/web/public/linked/child.html
@@ -3,8 +3,6 @@
 <head>
     <meta charset="utf-8" />
     <title>Deephaven Web API linked table example: child window</title>
-    <script src="../dh-internal.js" type="text/javascript"></script>
-    <script src="../dh-core.js" type="text/javascript"></script>
     <link href="../basic.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
@@ -26,7 +24,10 @@ <h3>Outgoing link summary</h3>
 
 </ul>
 
-<script>
+<script type="module">
+  import dh from '../dh-core.js';
+
+  const {Client, FilterValue, Table} = dh;
   if (!window.opener) {
     alert("This page only works correctly when opened by another window.");
     throw "This page only works correctly when opened by another window.";
@@ -43,14 +44,14 @@ <h3>Outgoing link summary</h3>
     url.protocol = 'wss:';
   }
 
-  window.c = new dh.Client(url.href);
-  c.addEventListener(dh.Client.EVENT_CONNECT, () => {
+  window.c = new Client(url.href);
+  c.addEventListener(Client.EVENT_CONNECT, () => {
     c.login({username:'dh',token:'dh',type:'password'}).then(result => {
       console.log("login successful");
     });
   });
   //wait for the named config to load
-  c.addEventListener(dh.Client.EVENT_CONFIG_ADDED, event => {
+  c.addEventListener(Client.EVENT_CONFIG_ADDED, event => {
     var config = event.detail;
     if (config.name === configName) {
       if (config.status !== 'Running') {
@@ -136,9 +137,9 @@ <h3>Outgoing link summary</h3>
 
               // wrap the data so that we can handle it as a filter value
               if (typeof valueToFilterOn === 'string') {
-                valueToFilterOn = dh.FilterValue.ofString(valueToFilterOn);
+                valueToFilterOn = FilterValue.ofString(valueToFilterOn);
               } else {
-                valueToFilterOn = dh.FilterValue.ofNumber(valueToFilterOn);
+                valueToFilterOn = FilterValue.ofNumber(valueToFilterOn);
               }
 
               // apply a new filter (could also present a menu at this point to ask which filter to use)
@@ -166,7 +167,7 @@ <h3>Outgoing link summary</h3>
     simpleLinkedTable.appendChild(header);
 
     // listen for items to be added, populate the table body
-    oldTableHandlerCleanup = table.addEventListener(dh.Table.EVENT_UPDATED, function handleTableUpdate(event) {
+    oldTableHandlerCleanup = table.addEventListener(Table.EVENT_UPDATED, function handleTableUpdate(event) {
       console.log("update event received, time to redraw data");
       // rebuild the current tbody from scratch
       var tbody = simpleLinkedTable.querySelector('tbody');
diff --git a/web/client-api/src/main/java/io/deephaven/web/public/linked/index.html b/web/client-api/src/main/java/io/deephaven/web/public/linked/index.html
index ef44c9820a7..70ac5a0b931 100644
--- a/web/client-api/src/main/java/io/deephaven/web/public/linked/index.html
+++ b/web/client-api/src/main/java/io/deephaven/web/public/linked/index.html
@@ -3,8 +3,6 @@
 <head>
     <meta charset="utf-8" />
     <title>Deephaven Web API linked table example: parent window</title>
-    <script src="../dh-internal.js" type="text/javascript"></script>
-    <script src="../dh-core.js" type="text/javascript"></script>
     <style>
         p, ul {
             max-width: 800px;
@@ -68,7 +66,10 @@ <h3>Persistent Query Configurations</h3>
 <ul id="queries">
 
 </ul>
-<script>
+<script type="module">
+  import dh from './dh-core.js';
+
+  const {Client} = dh;
   var url = new URL('/socket', window.location);
   if (url.protocol === 'http:') {
     url.protocol = 'ws:';
@@ -76,8 +77,8 @@ <h3>Persistent Query Configurations</h3>
     url.protocol = 'wss:';
   }
 
-  window.c = new dh.Client(url.href);
-  c.addEventListener(dh.Client.EVENT_CONNECT, () => {
+  window.c = new Client(url.href);
+  c.addEventListener(Client.EVENT_CONNECT, () => {
     connected();
     c.login({username:'dh',token:'dh',type:'password'}).then(result => {
       console.log("login successful");
@@ -88,14 +89,14 @@ <h3>Persistent Query Configurations</h3>
   var configs = Object.create(null);
 
   function connected() {
-    c.addEventListener(dh.Client.EVENT_CONFIG_REMOVED, event => {
+    c.addEventListener(Client.EVENT_CONFIG_REMOVED, event => {
       removeQuery(event.detail);
     });
-    c.addEventListener(dh.Client.EVENT_CONFIG_UPDATED, event => {
+    c.addEventListener(Client.EVENT_CONFIG_UPDATED, event => {
       removeQuery(event.detail);
       addQuery(event.detail);
     });
-    c.addEventListener(dh.Client.EVENT_CONFIG_ADDED, event => {
+    c.addEventListener(Client.EVENT_CONFIG_ADDED, event => {
       addQuery(event.detail);
     });
     function removeQuery(queryInfo) {
diff --git a/web/client-api/src/main/java/io/deephaven/web/public/persistentquery_figures.html b/web/client-api/src/main/java/io/deephaven/web/public/persistentquery_figures.html
index caea1a0bd36..9927714c1e4 100644
--- a/web/client-api/src/main/java/io/deephaven/web/public/persistentquery_figures.html
+++ b/web/client-api/src/main/java/io/deephaven/web/public/persistentquery_figures.html
@@ -3,8 +3,6 @@
 <head>
     <meta charset="utf-8" />
     <title>Deephaven JS API Plotting sample</title>
-    <script src="dh-internal.js" type="text/javascript"></script>
-    <script src="dh-core.js" type="text/javascript"></script>
     <link href="basic.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
@@ -22,7 +20,10 @@ <h5>Series</h5>
 <div id="series"></div>
 <div id="data"></div>
 
-<script>
+<script type="module">
+    import dh from './dh-core.js';
+
+    const {Client} = dh;
     var url = new URL('/socket', window.location);
     if (url.protocol === 'http:') {
         url.protocol = 'ws:';
@@ -30,8 +31,8 @@ <h5>Series</h5>
         url.protocol = 'wss:';
     }
 
-    window.c = new dh.Client(url.href);
-    c.addEventListener(dh.Client.EVENT_CONNECT, () => {
+    window.c = new Client(url.href);
+    c.addEventListener(Client.EVENT_CONNECT, () => {
         connected();
         c.login({username:'dh',token:'dh',type:'password'}).then(result => {
             console.log("login successful");
@@ -42,14 +43,14 @@ <h5>Series</h5>
     var configs = Object.create(null);
 
     function connected() {
-        c.addEventListener(dh.Client.EVENT_CONFIG_REMOVED, event => {
+        c.addEventListener(Client.EVENT_CONFIG_REMOVED, event => {
             removeQuery(event.detail);
         });
-        c.addEventListener(dh.Client.EVENT_CONFIG_UPDATED, event => {
+        c.addEventListener(Client.EVENT_CONFIG_UPDATED, event => {
             removeQuery(event.detail);
             addQuery(event.detail);
         });
-        c.addEventListener(dh.Client.EVENT_CONFIG_ADDED, event => {
+        c.addEventListener(Client.EVENT_CONFIG_ADDED, event => {
             addQuery(event.detail);
         });
         function removeQuery(queryInfo) {
@@ -71,7 +72,7 @@ <h5>Series</h5>
             queryElt.onclick = () => {
                 open = !open;
                 queryElt.className = open ? 'open' : 'closed';
-                queryInfo.addEventListener(dh.QueryInfo.EVENT_TABLE_METRICS, event => {
+                queryInfo.addEventListener(QueryInfo.EVENT_TABLE_METRICS, event => {
                     if (event.detail.nanos === -1) {
                         console.log(event.detail.type);
                     } else {
diff --git a/web/client-api/src/main/java/io/deephaven/web/public/rollup.html b/web/client-api/src/main/java/io/deephaven/web/public/rollup.html
index 6181abe1aa0..150b85c50ff 100644
--- a/web/client-api/src/main/java/io/deephaven/web/public/rollup.html
+++ b/web/client-api/src/main/java/io/deephaven/web/public/rollup.html
@@ -3,9 +3,6 @@
 <head>
     <meta charset="utf-8" />
     <title>Deephaven Web API rollup table example</title>
-    <script src="dh-internal.js" type="text/javascript"></script>
-    <script src="dh-core.js" type="text/javascript"></script>
-    <script src="treegrid.js" type="text/javascript"></script>
     <script src="totals.js" type="text/javascript"></script>
     <link href="basic.css" rel="stylesheet" type="text/css" />
     <style>
@@ -72,7 +69,12 @@ <h3>Rollup Table Configuration</h3>
 <input id="includeConstituents" type="checkbox"><label for="includeConstituents">Include Constituent values</label><br/>
 <button id="open">Display Rollup Table</button>
 <div id="treetable"></div>
-<script>
+<script type="module">
+    import dh from './dh-core.js'
+
+    const {CoreClient} = dh;
+
+    import {TreeGrid} from "./treegrid.js";
     var connection;
     var ide;
     var treeParent = document.getElementById('treetable');
@@ -81,8 +83,8 @@ <h3>Rollup Table Configuration</h3>
 
     var oldTableHandlerCleanup;
     (async () => {
-        var client = new dh.CoreClient(window.location.protocol + "//" + window.location.host);
-        await client.login({type:dh.CoreClient.LOGIN_TYPE_ANONYMOUS});
+        var client = new CoreClient(window.location.protocol + "//" + window.location.host);
+        await client.login({type:CoreClient.LOGIN_TYPE_ANONYMOUS});
         connection = await client.getAsIdeConnection();
 
         var types = await connection.getConsoleTypes();
diff --git a/web/client-api/src/main/java/io/deephaven/web/public/search.html b/web/client-api/src/main/java/io/deephaven/web/public/search.html
index c3ff25f0b47..350b3243b75 100644
--- a/web/client-api/src/main/java/io/deephaven/web/public/search.html
+++ b/web/client-api/src/main/java/io/deephaven/web/public/search.html
@@ -3,8 +3,6 @@
 <head>
     <meta charset="utf-8" />
     <title>Deephaven Web API Search example through OR'd contains operations</title>
-    <script src="dh-internal.js" type="text/javascript"></script>
-    <script src="dh-core.js" type="text/javascript"></script>
     <link href="basic.css" rel="stylesheet" type="text/css" />
     <style>
         li.open ul { display:block; }
@@ -27,8 +25,10 @@ <h3>Selected table data</h3>
 
 </table>
 
-<script>
+<script type="module">
+  import dh from './dh-core.js';
 
+  const {Client} = dh;
   var url = new URL('/socket', window.location);
   if (url.protocol === 'http:') {
     url.protocol = 'ws:';
@@ -36,8 +36,8 @@ <h3>Selected table data</h3>
     url.protocol = 'wss:';
   }
 
-  window.c = new dh.Client(url.href);
-  c.addEventListener(dh.Client.EVENT_CONNECT, () => {
+  window.c = new Client(url.href);
+  c.addEventListener(Client.EVENT_CONNECT, () => {
     connected();
     c.login({username:'dh',token:'dh',type:'password'}).then(result => {
       console.log("login successful");
@@ -48,14 +48,14 @@ <h3>Selected table data</h3>
   var configs = Object.create(null);
 
   function connected() {
-    c.addEventListener(dh.Client.EVENT_CONFIG_REMOVED, event => {
+    c.addEventListener(Client.EVENT_CONFIG_REMOVED, event => {
       removeQuery(event.detail);
     });
-    c.addEventListener(dh.Client.EVENT_CONFIG_UPDATED, event => {
+    c.addEventListener(Client.EVENT_CONFIG_UPDATED, event => {
       removeQuery(event.detail);
       addQuery(event.detail);
     });
-    c.addEventListener(dh.Client.EVENT_CONFIG_ADDED, event => {
+    c.addEventListener(Client.EVENT_CONFIG_ADDED, event => {
       addQuery(event.detail);
     });
     function removeQuery(queryInfo) {
@@ -77,7 +77,7 @@ <h3>Selected table data</h3>
       queryElt.onclick = () => {
         open = !open;
         queryElt.className = open ? 'open' : 'closed';
-        queryInfo.addEventListener(dh.QueryInfo.EVENT_TABLE_METRICS, event => {
+        queryInfo.addEventListener(QueryInfo.EVENT_TABLE_METRICS, event => {
           if (event.detail.nanos === -1) {
             console.log(event.detail.type);
           } else {
@@ -128,7 +128,7 @@ <h3>Selected table data</h3>
     simplePagingTable.appendChild(header);
 
     // listen for items to be added, populate the table body
-    oldTableHandlerCleanup = table.addEventListener(dh.Table.EVENT_UPDATED, function handleTableUpdate(event) {
+    oldTableHandlerCleanup = table.addEventListener(Table.EVENT_UPDATED, function handleTableUpdate(event) {
       console.log("update event received, time to redraw data");
       // rebuild the current tbody from scratch
       var tbody = simplePagingTable.querySelector('tbody');
@@ -168,7 +168,7 @@ <h3>Selected table data</h3>
     if (needle === null || needle.trim().length === 0) {
       currentTable.applyFilter([]);
     } else {
-      currentTable.applyFilter([dh.FilterCondition.search(dh.FilterValue.ofString(needle))]);
+      currentTable.applyFilter([FilterCondition.search(FilterValue.ofString(needle))]);
     }
     currentTable.setViewport(0, 24);
   }
diff --git a/web/client-api/src/main/java/io/deephaven/web/public/simple.html b/web/client-api/src/main/java/io/deephaven/web/public/simple.html
index 0c75b63d216..88a878ce5bb 100644
--- a/web/client-api/src/main/java/io/deephaven/web/public/simple.html
+++ b/web/client-api/src/main/java/io/deephaven/web/public/simple.html
@@ -4,8 +4,6 @@
     <meta charset="utf-8" />
 
     <title>Simple Deephaven JS Client</title>
-    <script src="dh-internal.js" type="text/javascript"></script>
-    <script src="dh-core.js" type="text/javascript"></script>
 </head>
 <body>
 <h3>Simple test page to verify that the Deephaven JS API can connect, create a table, and subscribe to changes</h3>
@@ -13,12 +11,15 @@ <h3>Simple test page to verify that the Deephaven JS API can connect, create a t
     When the page loads, a connection to the server will be created, and a new ticking table declared. Read the source
     for this page to see how it was created.
 </p>
-<script type="text/javascript">
+<script type="module">
+import dh from './dh-core.js';
+
+const {CoreClient} = dh;
 var ide;
 var table;
 (async () => {
-    var client = new dh.CoreClient(window.location.protocol + "//" + window.location.host);
-    await client.login({type:dh.CoreClient.LOGIN_TYPE_ANONYMOUS});
+    var client = new CoreClient(window.location.protocol + "//" + window.location.host);
+    await client.login({type:CoreClient.LOGIN_TYPE_ANONYMOUS});
     connection = await client.getAsIdeConnection();
 
     var consoleTypes = await connection.getConsoleTypes();
@@ -38,7 +39,6 @@ <h3>Simple test page to verify that the Deephaven JS API can connect, create a t
     document.body.append("Starting viewport subscription");
     table.setViewport(0, 100);
     table.addEventListener("updated", event => {
-        rows = event.detail.rows;
         if (rows.length === 0) {
             return;
         }
diff --git a/web/client-api/src/main/java/io/deephaven/web/public/snapshot.html b/web/client-api/src/main/java/io/deephaven/web/public/snapshot.html
index ef2e5185c14..aa2099a541d 100644
--- a/web/client-api/src/main/java/io/deephaven/web/public/snapshot.html
+++ b/web/client-api/src/main/java/io/deephaven/web/public/snapshot.html
@@ -3,8 +3,6 @@
 <head>
     <meta charset="utf-8" />
     <title>Deephaven Web API table snapshot</title>
-    <script src="dh-internal.js" type="text/javascript"></script>
-    <script src="dh-core.js" type="text/javascript"></script>
     <link href="basic.css" rel="stylesheet" type="text/css" />
     <style>
         li.open ul { display:block; }
@@ -69,8 +67,10 @@ <h3>Snapshot table</h3>
     </tr>
 </table>
 
-<script>
+<script type="module">
+    import dh from './dh-core.js';
 
+    const {Client} = dh;
     var url = new URL('/socket', window.location);
     if (url.protocol === 'http:') {
         url.protocol = 'ws:';
@@ -78,8 +78,8 @@ <h3>Snapshot table</h3>
         url.protocol = 'wss:';
     }
 
-    window.c = new dh.Client(url.href);
-    c.addEventListener(dh.Client.EVENT_CONNECT, () => {
+    window.c = new Client(url.href);
+    c.addEventListener(Client.EVENT_CONNECT, () => {
         connected();
         c.login({username:'dh',token:'dh',type:'password'}).then(result => {
             console.log("login successful");
@@ -96,14 +96,14 @@ <h3>Snapshot table</h3>
     var doInitialSnapshotInput = document.getElementById('doInitialSnapshotInput');
 
     function connected() {
-        c.addEventListener(dh.Client.EVENT_CONFIG_REMOVED, event => {
+        c.addEventListener(Client.EVENT_CONFIG_REMOVED, event => {
             removeQuery(event.detail);
         });
-        c.addEventListener(dh.Client.EVENT_CONFIG_UPDATED, event => {
+        c.addEventListener(Client.EVENT_CONFIG_UPDATED, event => {
             removeQuery(event.detail);
             addQuery(event.detail);
         });
-        c.addEventListener(dh.Client.EVENT_CONFIG_ADDED, event => {
+        c.addEventListener(Client.EVENT_CONFIG_ADDED, event => {
             addQuery(event.detail);
         });
         function removeQuery(queryInfo) {
@@ -132,7 +132,7 @@ <h3>Snapshot table</h3>
             queryElt.onclick = () => {
                 open = !open;
                 queryElt.className = open ? 'open' : 'closed';
-                queryInfo.addEventListener(dh.QueryInfo.EVENT_TABLE_METRICS, event => {
+                queryInfo.addEventListener(QueryInfo.EVENT_TABLE_METRICS, event => {
                     if (event.detail.nanos === -1) {
                         console.log(event.detail.type);
                     } else {
@@ -188,7 +188,7 @@ <h3>Snapshot table</h3>
         tableElement.appendChild(header);
 
         // listen for items to be added, populate the table body
-        handleCleanup = table.addEventListener(dh.Table.EVENT_UPDATED, function handleTableUpdate(event) {
+        handleCleanup = table.addEventListener(Table.EVENT_UPDATED, function handleTableUpdate(event) {
             console.log("update event received, time to redraw data");
             // rebuild the current tbody from scratch
             var tbody = tableElement.querySelector('tbody');
diff --git a/web/client-api/src/main/java/io/deephaven/web/public/table_basic.html b/web/client-api/src/main/java/io/deephaven/web/public/table_basic.html
index 55d7f95874a..805603d665b 100644
--- a/web/client-api/src/main/java/io/deephaven/web/public/table_basic.html
+++ b/web/client-api/src/main/java/io/deephaven/web/public/table_basic.html
@@ -3,8 +3,6 @@
 <head>
     <meta charset="utf-8" />
     <title>Deephaven JS API display basic table</title>
-    <script src="dh-internal.js" type="text/javascript"></script>
-    <script src="dh-core.js" type="text/javascript"></script>
     <link href="basic.css" rel="stylesheet" type="text/css" />
     <style>
         table { border-spacing: 0; }
@@ -17,15 +15,18 @@
 <h3>Table data</h3>
 <table id="simpleTable"></table>
 
-<script>
+<script type="module">
+import dh from './dh-core.js';
+
+const {CoreClient} = dh;
 var table;
 var connection;
 var ide;
 
 (async () => {
     // Open a connection to the server
-    var client = new dh.CoreClient(window.location.protocol + "//" + window.location.host);
-    await client.login({type:dh.CoreClient.LOGIN_TYPE_ANONYMOUS});
+    var client = new CoreClient(window.location.protocol + "//" + window.location.host);
+    await client.login({type:CoreClient.LOGIN_TYPE_ANONYMOUS});
     connection = await client.getAsIdeConnection();
 
     var types = await connection.getConsoleTypes();
diff --git a/web/client-api/src/main/java/io/deephaven/web/public/table_batch.html b/web/client-api/src/main/java/io/deephaven/web/public/table_batch.html
index 95767f725da..e9846acc050 100644
--- a/web/client-api/src/main/java/io/deephaven/web/public/table_batch.html
+++ b/web/client-api/src/main/java/io/deephaven/web/public/table_batch.html
@@ -3,8 +3,6 @@
 <head>
   <meta charset="utf-8" />
   <title>Deephaven Web API table filter api</title>
-  <script src="dh-internal.js" type="text/javascript"></script>
-  <script src="dh-core.js" type="text/javascript"></script>
   <link href="basic.css" rel="stylesheet" type="text/css" />
   <script src="batch.js" type="text/javascript"></script>
 </head>
@@ -32,8 +30,10 @@ <h3>Selected table data</h3>
 
 </table>
 
-<script>
+<script type="module">
+  import dh from './dh-core.js';
 
+  const {Client, FilterValue} = dh;
   var url = new URL('/socket', window.location);
   if (url.protocol === 'http:') {
     url.protocol = 'ws:';
@@ -41,8 +41,8 @@ <h3>Selected table data</h3>
     url.protocol = 'wss:';
   }
 
-  window.c = new dh.Client(url.href);
-  c.addEventListener(dh.Client.EVENT_CONNECT, () => {
+  window.c = new Client(url.href);
+  c.addEventListener(Client.EVENT_CONNECT, () => {
     connected();
     c.login({username:'dh',token:'dh',type:'password'}).then(result => {
       console.log("login successful");
@@ -61,14 +61,14 @@ <h3>Selected table data</h3>
   const heads = [];
   window.dhDebug = { pendingSorts, pendingFilters };
   function connected() {
-    c.addEventListener(dh.Client.EVENT_CONFIG_REMOVED, event => {
+    c.addEventListener(Client.EVENT_CONFIG_REMOVED, event => {
       removeQuery(event.detail);
     });
-    c.addEventListener(dh.Client.EVENT_CONFIG_UPDATED, event => {
+    c.addEventListener(Client.EVENT_CONFIG_UPDATED, event => {
       removeQuery(event.detail);
       addQuery(event.detail);
     });
-    c.addEventListener(dh.Client.EVENT_CONFIG_ADDED, event => {
+    c.addEventListener(Client.EVENT_CONFIG_ADDED, event => {
       addQuery(event.detail);
     });
     function removeQuery(queryInfo) {
@@ -90,7 +90,7 @@ <h3>Selected table data</h3>
       queryElt.onclick = () => {
         open = !open;
         queryElt.className = open ? 'open' : 'closed';
-        queryInfo.addEventListener(dh.QueryInfo.EVENT_TABLE_METRICS, event => {
+        queryInfo.addEventListener(QueryInfo.EVENT_TABLE_METRICS, event => {
           if (event.detail.nanos === -1) {
             console.log(event.detail.type);
           } else {
@@ -146,7 +146,7 @@ <h3>Selected table data</h3>
     simplePagingTable.appendChild(header);
 
     // listen for items to be added, populate the table body
-    oldTableHandlerCleanup = table.addEventListener(dh.Table.EVENT_UPDATED, function handleTableUpdate(event) {
+    oldTableHandlerCleanup = table.addEventListener(Table.EVENT_UPDATED, function handleTableUpdate(event) {
       console.log("update event received, time to redraw data");
       // rebuild the current tbody from scratch
       var tbody = simplePagingTable.querySelector('tbody');
@@ -275,10 +275,10 @@ <h3>Selected table data</h3>
           //TODO convert value more completely
           var value = target.internalValue;
           if (typeof value === 'string') {
-            value = dh.FilterValue.ofString(value);
+            value = FilterValue.ofString(value);
           } else /*if (typeof value === 'number')*/ {
             //otherwise, we'll just assume it is a number, ofNumber will throw exceptions if not
-            value = dh.FilterValue.ofNumber(value);
+            value = FilterValue.ofNumber(value);
           }
           //TODO make editable
           current.push(buildFilter(column, value));
@@ -289,10 +289,10 @@ <h3>Selected table data</h3>
           //TODO convert value more completely
           var value = target.internalValue;
           if (typeof value === 'string') {
-            value = dh.FilterValue.ofString(value);
+            value = FilterValue.ofString(value);
           } else /*if (typeof value === 'number')*/ {
             //otherwise, we'll just assume it is a number, ofNumber will throw exceptions if not
-            value = dh.FilterValue.ofNumber(value);
+            value = FilterValue.ofNumber(value);
           }
 
           //TODO make editable
diff --git a/web/client-api/src/main/java/io/deephaven/web/public/table_columns.html b/web/client-api/src/main/java/io/deephaven/web/public/table_columns.html
index 8248a272229..2743d6aa610 100644
--- a/web/client-api/src/main/java/io/deephaven/web/public/table_columns.html
+++ b/web/client-api/src/main/java/io/deephaven/web/public/table_columns.html
@@ -3,8 +3,6 @@
 <head>
 <meta charset="utf-8" />
 <title>Deephaven Web API table custom columns</title>
-<script src="dh-internal.js" type="text/javascript"></script>
-<script src="dh-core.js" type="text/javascript"></script>
 <link href="basic.css" rel="stylesheet" type="text/css" />
 <style>
     li.open ul { display:block; }
@@ -36,8 +34,10 @@ <h3>Add a new Column with a formula</h3>
 
 </ul>
 
-<script>
+<script type="module">
+    import dh from './dh-core.js';
 
+    const {Client} = dh;
     var url = new URL('/socket', window.location);
     if (url.protocol === 'http:') {
       url.protocol = 'ws:';
@@ -45,8 +45,8 @@ <h3>Add a new Column with a formula</h3>
       url.protocol = 'wss:';
     }
 
-    window.c = new dh.Client(url.href);
-    c.addEventListener(dh.Client.EVENT_CONNECT, () => {
+    window.c = new Client(url.href);
+    c.addEventListener(Client.EVENT_CONNECT, () => {
       connected();
       c.login({username:'dh',token:'dh',type:'password'}).then(result => {
         console.log("login successful");
@@ -57,14 +57,14 @@ <h3>Add a new Column with a formula</h3>
     var configs = Object.create(null);
 
     function connected() {
-      c.addEventListener(dh.Client.EVENT_CONFIG_REMOVED, event => {
+      c.addEventListener(Client.EVENT_CONIG_REMOVED, event => {
         removeQuery(event.detail);
       });
-      c.addEventListener(dh.Client.EVENT_CONFIG_UPDATED, event => {
+      c.addEventListener(Client.EVENT_CONFIG_UPDATED, event => {
         removeQuery(event.detail);
         addQuery(event.detail);
       });
-      c.addEventListener(dh.Client.EVENT_CONFIG_ADDED, event => {
+      c.addEventListener(Client.EVENT_CONFIG_ADDED, event => {
         addQuery(event.detail);
       });
       function removeQuery(queryInfo) {
@@ -86,7 +86,7 @@ <h3>Add a new Column with a formula</h3>
         queryElt.onclick = () => {
           open = !open;
           queryElt.className = open ? 'open' : 'closed';
-          queryInfo.addEventListener(dh.QueryInfo.EVENT_TABLE_METRICS, event => {
+          queryInfo.addEventListener(QueryInfo.EVENT_TABLE_METRICS, event => {
             if (event.detail.nanos === -1) {
               console.log(event.detail.type);
             } else {
@@ -129,7 +129,7 @@ <h3>Add a new Column with a formula</h3>
         simplePagingTable.appendChild(header);
 
         // listen for items to be added, populate the table body
-        oldTableHandlerCleanup = table.addEventListener(dh.Table.EVENT_UPDATED, function handleTableUpdate(event) {
+        oldTableHandlerCleanup = table.addEventListener(Table.EVENT_UPDATED, function handleTableUpdate(event) {
             console.log("update event received, time to redraw data");
 
             //since we're adding custom columns too, let's rebuild the header as well
diff --git a/web/client-api/src/main/java/io/deephaven/web/public/table_filter.html b/web/client-api/src/main/java/io/deephaven/web/public/table_filter.html
index fd8f58a5985..4a816143c3c 100644
--- a/web/client-api/src/main/java/io/deephaven/web/public/table_filter.html
+++ b/web/client-api/src/main/java/io/deephaven/web/public/table_filter.html
@@ -3,8 +3,6 @@
 <head>
     <meta charset="utf-8" />
     <title>Deephaven Web API table filter api</title>
-    <script src="dh-internal.js" type="text/javascript"></script>
-    <script src="dh-core.js" type="text/javascript"></script>
     <link href="basic.css" rel="stylesheet" type="text/css" />
     <style>
         li.open ul { display:block; }
@@ -53,8 +51,10 @@ <h3>Filter Details</h3>
 <div id="topMenu">
 </div>
 
-<script>
+<script type="module">
+  import dh from './dh-core.js';
 
+  const {CoreClient, Table, FilterValue} = dh;
   var filterSetup = {
     "Equals..." : {
       build : (column, value) => column.filter().eq(value),
@@ -151,8 +151,8 @@ <h3>Filter Details</h3>
   var topMenu = document.getElementById('topMenu');
 
   (async () => {
-      var client = new dh.CoreClient(window.location.protocol + "//" + window.location.host);
-      await client.login({type:dh.CoreClient.LOGIN_TYPE_ANONYMOUS});
+      var client = new CoreClient(window.location.protocol + "//" + window.location.host);
+      await client.login({type:CoreClient.LOGIN_TYPE_ANONYMOUS});
       connection = await client.getAsIdeConnection();
 
       var types = await connection.getConsoleTypes();
@@ -192,7 +192,7 @@ <h3>Filter Details</h3>
     simplePagingTable.appendChild(header);
 
     // listen for items to be added, populate the table body
-    oldTableHandlerCleanup = t.addEventListener(dh.Table.EVENT_UPDATED, function handleTableUpdate(event) {
+    oldTableHandlerCleanup = t.addEventListener(Table.EVENT_UPDATED, function handleTableUpdate(event) {
       console.log("update event received, time to redraw data");
       // rebuild the current tbody from scratch
       var tbody = simplePagingTable.querySelector('tbody');
@@ -272,10 +272,10 @@ <h3>Filter Details</h3>
           //TODO convert value more completely
           var value = target.internalValue;
           if (typeof value === 'string') {
-            value = dh.FilterValue.ofString(value);
+            value = FilterValue.ofString(value);
           } else /*if (typeof value === 'number')*/ {
             //otherwise, we'll just assume it is a number, ofNumber will throw exceptions if not
-            value = dh.FilterValue.ofNumber(value);
+            value = FilterValue.ofNumber(value);
           }
           //TODO make editable
           current.push(buildFilter(column, value));
@@ -286,10 +286,10 @@ <h3>Filter Details</h3>
           //TODO convert value more completely
           var value = target.internalValue;
           if (typeof value === 'string') {
-            value = dh.FilterValue.ofString(value);
+            value = FilterValue.ofString(value);
           } else /*if (typeof value === 'number')*/ {
             //otherwise, we'll just assume it is a number, ofNumber will throw exceptions if not
-            value = dh.FilterValue.ofNumber(value);
+            value = FilterValue.ofNumber(value);
           }
 
           //TODO make editable
diff --git a/web/client-api/src/main/java/io/deephaven/web/public/table_sort.html b/web/client-api/src/main/java/io/deephaven/web/public/table_sort.html
index cef18b33b2c..594f2c1973a 100644
--- a/web/client-api/src/main/java/io/deephaven/web/public/table_sort.html
+++ b/web/client-api/src/main/java/io/deephaven/web/public/table_sort.html
@@ -3,8 +3,6 @@
   <head>
     <meta charset="utf-8" />
     <title>Deephaven Web API table sort api</title>
-    <script src="dh-internal.js" type="text/javascript"></script>
-    <script src="dh-core.js" type="text/javascript"></script>
     <link href="basic.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
@@ -16,16 +14,19 @@ <h3>Selected table data (click headers to sort)</h3>
     <button id="clear">Clear Reverse</button>
     <table id="simplePagingTable"></table>
 
-    <script>
+    <script type="module">
+      import dh from './dh-core.js';
+
+      const {CoreClient, Table} = dh;
       var connection;
       var ide;
       var table;
       var oldTableHandlerCleanup;
       var simplePagingTable = document.getElementById("simplePagingTable");
       (async () => {
-        var client = new dh.CoreClient(window.location.protocol + "//" + window.location.host);
-        await client.login({type:dh.CoreClient.LOGIN_TYPE_ANONYMOUS});
-        connection = client.getAsIdeConnection();
+        var client = new CoreClient(window.location.protocol + "//" + window.location.host);
+        await client.login({type:CoreClient.LOGIN_TYPE_ANONYMOUS});
+        connection = await client.getAsIdeConnection();
 
         var types = await connection.getConsoleTypes();
 
@@ -88,7 +89,7 @@ <h3>Selected table data (click headers to sort)</h3>
 
         // listen for items to be added, populate the table body
         oldTableHandlerCleanup = t.addEventListener(
-          dh.Table.EVENT_UPDATED,
+          Table.EVENT_UPDATED,
           function handleTableUpdate(event) {
             console.log("update event received, time to redraw data");
             // rebuild the current tbody from scratch
@@ -118,7 +119,7 @@ <h3>Selected table data (click headers to sort)</h3>
           const sorts = table.sort.filter(
             s => s.direction !== "REVERSE"
           );
-          sorts.unshift(dh.Table.reverse());
+          sorts.unshift(Table.reverse());
           table.applySort(sorts);
           table.setViewport(0, 49);
         };
@@ -127,7 +128,7 @@ <h3>Selected table data (click headers to sort)</h3>
           const sorts = table.sort.filter(
             s => s.direction !== "REVERSE"
           );
-          sorts.push(dh.Table.reverse());
+          sorts.push(Table.reverse());
           table.applySort(sorts);
           table.setViewport(0, 49);
         };
diff --git a/web/client-api/src/main/java/io/deephaven/web/public/table_subscription.html b/web/client-api/src/main/java/io/deephaven/web/public/table_subscription.html
index ab2f560f81f..b51a61363b3 100644
--- a/web/client-api/src/main/java/io/deephaven/web/public/table_subscription.html
+++ b/web/client-api/src/main/java/io/deephaven/web/public/table_subscription.html
@@ -3,8 +3,6 @@
 <head>
     <meta charset="utf-8" />
     <title>Deephaven Web API table viewport and updates</title>
-    <script src="dh-internal.js" type="text/javascript"></script>
-    <script src="dh-core.js" type="text/javascript"></script>
     <link href="basic.css" rel="stylesheet" type="text/css" />
     <style>
         li.open ul { display:block; }
@@ -50,8 +48,10 @@ <h3>Table data</h3>
 
 </table>
 
-<script>
+<script type="module">
+    import dh from './dh-core.js';
 
+    const {Client, QueryInfo, Table} = dh;
     var url = new URL('/socket', window.location);
     if (url.protocol === 'http:') {
         url.protocol = 'ws:';
@@ -59,8 +59,8 @@ <h3>Table data</h3>
         url.protocol = 'wss:';
     }
 
-    window.c = new dh.Client(url.href);
-    c.addEventListener(dh.Client.EVENT_CONNECT, () => {
+    window.c = new Client(url.href);
+    c.addEventListener(Client.EVENT_CONNECT, () => {
         connected();
         c.login({username:'dh',token:'dh',type:'password'}).then(result => {
             console.log("login successful");
@@ -71,14 +71,14 @@ <h3>Table data</h3>
     var configs = Object.create(null);
 
     function connected() {
-        c.addEventListener(dh.Client.EVENT_CONFIG_REMOVED, event => {
+        c.addEventListener(Client.EVENT_CONFIG_REMOVED, event => {
             removeQuery(event.detail);
         });
-        c.addEventListener(dh.Client.EVENT_CONFIG_UPDATED, event => {
+        c.addEventListener(Client.EVENT_CONFIG_UPDATED, event => {
             removeQuery(event.detail);
             addQuery(event.detail);
         });
-        c.addEventListener(dh.Client.EVENT_CONFIG_ADDED, event => {
+        c.addEventListener(Client.EVENT_CONFIG_ADDED, event => {
             addQuery(event.detail);
         });
         function removeQuery(queryInfo) {
@@ -100,7 +100,7 @@ <h3>Table data</h3>
             queryElt.onclick = () => {
                 open = !open;
                 queryElt.className = open ? 'open' : 'closed';
-                queryInfo.addEventListener(dh.QueryInfo.EVENT_TABLE_METRICS, event => {
+                queryInfo.addEventListener(QueryInfo.EVENT_TABLE_METRICS, event => {
                     if (event.detail.nanos === -1) {
                         console.log(event.detail.type);
                     } else {
@@ -177,7 +177,7 @@ <h3>Table data</h3>
         tableData.appendChild(header);
 
         // listen for items to be added, populate the table body
-        oldTableHandlerCleanup = subscription.addEventListener(dh.Table.EVENT_UPDATED, function handleTableUpdate(event) {
+        oldTableHandlerCleanup = subscription.addEventListener(Table.EVENT_UPDATED, function handleTableUpdate(event) {
             console.log("update event received, time to redraw data");
             // rebuild the current tbody from scratch
             var tbody = tableData.querySelector('tbody');
diff --git a/web/client-api/src/main/java/io/deephaven/web/public/table_viewport.html b/web/client-api/src/main/java/io/deephaven/web/public/table_viewport.html
index 90c1fec7965..b55f9757d4d 100644
--- a/web/client-api/src/main/java/io/deephaven/web/public/table_viewport.html
+++ b/web/client-api/src/main/java/io/deephaven/web/public/table_viewport.html
@@ -3,8 +3,6 @@
 <head>
     <meta charset="utf-8" />
     <title>Deephaven JS API table viewport and updates</title>
-    <script src="dh-internal.js" type="text/javascript"></script>
-    <script src="dh-core.js" type="text/javascript"></script>
     <link href="basic.css" rel="stylesheet" type="text/css" />
     <style>
         table { border-spacing: 0; }
@@ -22,7 +20,10 @@ <h3>Table data</h3>
 <button id="next">&gt;</button>
 <button id="end">&gt;&gt;</button>
 
-<script>
+<script type="module">
+import dh from './dh-core.js';
+
+const {CoreClient, Table} = dh;
 var table;
 var connection;
 var ide;
@@ -31,8 +32,8 @@ <h3>Table data</h3>
 var currentOffset;
 var PAGE_SIZE = 20;
 (async () => {
-    var client = new dh.CoreClient(window.location.protocol + "//" + window.location.host);
-    await client.login({type:dh.CoreClient.LOGIN_TYPE_ANONYMOUS});
+    var client = new CoreClient(window.location.protocol + "//" + window.location.host);
+    await client.login({type:CoreClient.LOGIN_TYPE_ANONYMOUS});
     connection = await client.getAsIdeConnection();
 
     var types = await connection.getConsoleTypes();
@@ -97,7 +98,7 @@ <h3>Table data</h3>
     simplePagingTable.appendChild(header);
 
     // listen for items to be added, populate the table body
-    oldTableHandlerCleanup = table.addEventListener(dh.Table.EVENT_UPDATED, function handleTableUpdate(event) {
+    oldTableHandlerCleanup = table.addEventListener(Table.EVENT_UPDATED, function handleTableUpdate(event) {
         console.log("update event received, time to redraw data");
         // rebuild the current tbody from scratch
         var tbody = simplePagingTable.querySelector('tbody');
diff --git a/web/client-api/src/main/java/io/deephaven/web/public/tablemap.html b/web/client-api/src/main/java/io/deephaven/web/public/tablemap.html
index 11880b87239..c7ddf7b2a19 100644
--- a/web/client-api/src/main/java/io/deephaven/web/public/tablemap.html
+++ b/web/client-api/src/main/java/io/deephaven/web/public/tablemap.html
@@ -3,8 +3,6 @@
 <head>
     <meta charset="utf-8" />
     <title>Deephaven Web API TableMap api</title>
-    <script src="dh-internal.js" type="text/javascript"></script>
-    <script src="dh-core.js" type="text/javascript"></script>
     <link href="basic.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
@@ -27,8 +25,10 @@ <h3 id="activeTableKey"></h3>
 
 </table>
 
-<script>
+<script type="module">
+  import dh from './dh-core.js';
 
+  const {Client, Table} = dh;
   var url = new URL('/socket', window.location);
   if (url.protocol === 'http:') {
     url.protocol = 'ws:';
@@ -36,8 +36,8 @@ <h3 id="activeTableKey"></h3>
     url.protocol = 'wss:';
   }
 
-  window.c = new dh.Client(url.href);
-  c.addEventListener(dh.Client.EVENT_CONNECT, () => {
+  window.c = new Client(url.href);
+  c.addEventListener(Client.EVENT_CONNECT, () => {
     connected();
     c.login({username:'dh',token:'dh',type:'password'}).then(result => {
       console.log("login successful");
@@ -50,14 +50,14 @@ <h3 id="activeTableKey"></h3>
   var keyList = document.getElementById('keyList');
 
   function connected() {
-    c.addEventListener(dh.Client.EVENT_CONFIG_REMOVED, event => {
+    c.addEventListener(Client.EVENT_CONFIG_REMOVED, event => {
       removeQuery(event.detail);
     });
-    c.addEventListener(dh.Client.EVENT_CONFIG_UPDATED, event => {
+    c.addEventListener(Client.EVENT_CONFIG_UPDATED, event => {
       removeQuery(event.detail);
       addQuery(event.detail);
     });
-    c.addEventListener(dh.Client.EVENT_CONFIG_ADDED, event => {
+    c.addEventListener(Client.EVENT_CONFIG_ADDED, event => {
       addQuery(event.detail);
     });
     function removeQuery(queryInfo) {
@@ -149,7 +149,7 @@ <h3 id="activeTableKey"></h3>
     simplePagingTable.appendChild(header);
 
     // listen for items to be added, populate the table body
-    oldTableHandlerCleanup = table.addEventListener(dh.Table.EVENT_UPDATED, function handleTableUpdate(event) {
+    oldTableHandlerCleanup = table.addEventListener(Table.EVENT_UPDATED, function handleTableUpdate(event) {
       console.log("update event received, time to redraw data");
       // rebuild the current tbody from scratch
       var tbody = simplePagingTable.querySelector('tbody');
diff --git a/web/client-api/src/main/java/io/deephaven/web/public/totals_tables.html b/web/client-api/src/main/java/io/deephaven/web/public/totals_tables.html
index 292ae2e5541..87c9aa939bc 100644
--- a/web/client-api/src/main/java/io/deephaven/web/public/totals_tables.html
+++ b/web/client-api/src/main/java/io/deephaven/web/public/totals_tables.html
@@ -3,8 +3,6 @@
 <head>
     <meta charset="utf-8" />
     <title>Deephaven Web API Totals Tables example</title>
-    <script src="dh-internal.js" type="text/javascript"></script>
-    <script src="dh-core.js" type="text/javascript"></script>
     <link href="basic.css" rel="stylesheet" type="text/css" />
     <style>
         li.open ul { display:block; }
@@ -32,8 +30,10 @@ <h3>Selected table data</h3>
 <button id="next">&gt;</button>
 <button id="end">&gt;&gt;</button>
 
-<script>
+<script type="module">
+  import dh from './dh-core.js';
 
+  const {Client} = dh;
   var url = new URL('/socket', window.location);
   if (url.protocol === 'http:') {
     url.protocol = 'ws:';
@@ -41,7 +41,7 @@ <h3>Selected table data</h3>
     url.protocol = 'wss:';
   }
 
-  window.c = new dh.Client(url.href);
+  window.c = new Client(url.href);
   c.addEventListener(dh.Client.EVENT_CONNECT, () => {
     connected();
     c.login({username:'dh',token:'dh',type:'password'}).then(result => {
diff --git a/web/client-api/src/main/java/io/deephaven/web/public/treegrid.js b/web/client-api/src/main/java/io/deephaven/web/public/treegrid.js
index 0d122486893..ffeebfdc175 100644
--- a/web/client-api/src/main/java/io/deephaven/web/public/treegrid.js
+++ b/web/client-api/src/main/java/io/deephaven/web/public/treegrid.js
@@ -1,12 +1,15 @@
+import dh from './dh-core.js';
+
+const {Table, FilterValue} = dh;
 /**
  * Simple es6 class encapsulating some basic rendering for a tree table in a grid, allowing
  * expanding and collapsing nodes, and filtering and sorting columns.
  */
 
-class TreeGrid {
+export class TreeGrid {
   constructor(treeTable) {
     this.treeTable = treeTable;
-    this.treeTable.addEventListener(dh.Table.EVENT_UPDATED, e => this.repaint(e.detail));
+    this.treeTable.addEventListener(Table.EVENT_UPDATED, e => this.repaint(e.detail));
 
     this.rootElement = document.createElement('div');
     this.tableElement = document.createElement('table');
@@ -188,10 +191,10 @@ class TreeGrid {
           //TODO convert value more completely
           var value = target.internalValue;
           if (typeof value === 'string') {
-            value = dh.FilterValue.ofString(value);
+            value = FilterValue.ofString(value);
           } else /*if (typeof value === 'number')*/ {
             //otherwise, we'll just assume it is a number, ofNumber will throw exceptions if not
-            value = dh.FilterValue.ofNumber(value);
+            value = FilterValue.ofNumber(value);
           }
           //TODO make editable
           current.push(buildFilter(column, value));
@@ -202,10 +205,10 @@ class TreeGrid {
           //TODO convert value more completely
           var value = target.internalValue;
           if (typeof value === 'string') {
-            value = dh.FilterValue.ofString(value);
+            value = FilterValue.ofString(value);
           } else /*if (typeof value === 'number')*/ {
             //otherwise, we'll just assume it is a number, ofNumber will throw exceptions if not
-            value = dh.FilterValue.ofNumber(value);
+            value = FilterValue.ofNumber(value);
           }
 
           //TODO make editable
diff --git a/web/client-api/src/main/java/io/deephaven/web/public/treetable.html b/web/client-api/src/main/java/io/deephaven/web/public/treetable.html
index 4a6fb740c88..61ccb228be9 100644
--- a/web/client-api/src/main/java/io/deephaven/web/public/treetable.html
+++ b/web/client-api/src/main/java/io/deephaven/web/public/treetable.html
@@ -3,9 +3,6 @@
 <head>
     <meta charset="utf-8" />
     <title>Deephaven Web API tree table example</title>
-    <script src="dh-internal.js" type="text/javascript"></script>
-    <script src="dh-core.js" type="text/javascript"></script>
-    <script src="treegrid.js" type="text/javascript"></script>
     <script src="totals.js" type="text/javascript"></script>
 
     <link href="basic.css" rel="stylesheet" type="text/css" />
@@ -16,12 +13,17 @@
     </style>
 </head>
 <body>
-<script>
+<script type="module">
+    import dh from './dh-core.js';
+    const {CoreClient} = dh;
+
+    import {TreeGrid} from "./treegrid.js";
+
     var connection;
     var ide;
     (async () => {
-        var client = new dh.CoreClient(window.location.protocol + "//" + window.location.host);
-        await client.login({type:dh.CoreClient.LOGIN_TYPE_ANONYMOUS});
+        var client = new CoreClient(window.location.protocol + "//" + window.location.host);
+        await client.login({type:CoreClient.LOGIN_TYPE_ANONYMOUS});
         connection = await client.getAsIdeConnection();
 
         var types = await connection.getConsoleTypes();
diff --git a/web/client-ui/Dockerfile b/web/client-ui/Dockerfile
index 8931ca111f4..7e84a6df934 100644
--- a/web/client-ui/Dockerfile
+++ b/web/client-ui/Dockerfile
@@ -2,9 +2,9 @@ FROM deephaven/node:local-build
 WORKDIR /usr/src/app
 
 # Most of the time, these versions are the same, except in cases where a patch only affects one of the packages
-ARG WEB_VERSION=0.29.0
-ARG GRID_VERSION=0.29.0
-ARG CHART_VERSION=0.29.0
+ARG WEB_VERSION=0.29.1-jsapi-core-module.9
+ARG GRID_VERSION=0.29.1-jsapi-core-module.9
+ARG CHART_VERSION=0.29.1-jsapi-core-module.9
 
 # Pull in the published code-studio package from npmjs and extract is
 RUN set -eux; \