diff --git a/package-lock.json b/package-lock.json
index 2986927897..fbb9807b41 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -228,6 +228,7 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
+      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -20469,13 +20470,8 @@
       },
       "devDependencies": {
         "@hpcc-js/esbuild-plugins": "^1.3.0",
-        "react": "18.3.1",
-        "react-data-grid": "7.0.0-beta.47",
-        "react-dom": "18.3.1"
-      },
-      "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0"
+        "@hpcc-js/preact-shim": "^3.0.0",
+        "react-data-grid": "7.0.0-beta.47"
       }
     },
     "packages/eclwatch": {
@@ -20960,13 +20956,7 @@
         "d3-sankey": "^0",
         "d3-shape": "^1",
         "d3-tile": "^1",
-        "d3-transition": "^1",
-        "react": "18.3.1",
-        "react-dom": "18.3.1"
-      },
-      "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0"
+        "d3-transition": "^1"
       }
     },
     "packages/html": {
@@ -20979,14 +20969,9 @@
       },
       "devDependencies": {
         "@hpcc-js/esbuild-plugins": "^1.3.0",
+        "@hpcc-js/preact-shim": "^3.0.0",
         "d3-format": "^1",
-        "d3-selection": "^1",
-        "react": "18.3.1",
-        "react-dom": "18.3.1"
-      },
-      "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0"
+        "d3-selection": "^1"
       }
     },
     "packages/layout": {
@@ -21201,12 +21186,7 @@
       },
       "devDependencies": {
         "@hpcc-js/esbuild-plugins": "^1.3.0",
-        "react": "18.3.1",
-        "react-dom": "18.3.1"
-      },
-      "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0"
+        "@hpcc-js/preact-shim": "^3.0.0"
       }
     },
     "packages/timeline": {
diff --git a/packages/dgrid2/esbuild.js b/packages/dgrid2/esbuild.js
index 67b91a9988..36c65c4683 100644
--- a/packages/dgrid2/esbuild.js
+++ b/packages/dgrid2/esbuild.js
@@ -20,7 +20,11 @@ await Promise.all([
             "d3-selection": "@hpcc-js/common",
             "d3-time-format": "@hpcc-js/common",
             "d3-transition": "@hpcc-js/common",
-            "d3-zoom": "@hpcc-js/common"
+            "d3-zoom": "@hpcc-js/common",
+            "react": "preact/compat",
+            "react/jsx-runtime": "preact/jsx-runtime",
+            "react-dom": "preact/compat",
+            "react-dom/test-utils": "preact/test-utils",
         },
         external: [
             ...Object.keys(pkg.dependencies),
diff --git a/packages/dgrid2/package.json b/packages/dgrid2/package.json
index 2e50bddfd5..c1f7033fae 100644
--- a/packages/dgrid2/package.json
+++ b/packages/dgrid2/package.json
@@ -41,14 +41,10 @@
     },
     "devDependencies": {
         "@hpcc-js/esbuild-plugins": "^1.3.0",
-        "react-data-grid": "7.0.0-beta.47",
-        "react": "18.3.1",
-        "react-dom": "18.3.1"
-    },
-    "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0"
+        "@hpcc-js/preact-shim": "^3.0.0",
+        "react-data-grid": "7.0.0-beta.47"
     },
+    "peerDependencies": {},
     "repository": {
         "type": "git",
         "url": "git+https://github.com/hpcc-systems/Visualization.git"
diff --git a/packages/dgrid2/src/hooks.ts b/packages/dgrid2/src/hooks.ts
index 1ddb29a24c..b09ee01b7e 100644
--- a/packages/dgrid2/src/hooks.ts
+++ b/packages/dgrid2/src/hooks.ts
@@ -1,5 +1,5 @@
-import React from "react";
 import { Widget } from "@hpcc-js/common";
+import * as React from "react";
 
 export function useData(widget: Widget): [string[], Array<string | number>[]] {
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -9,3 +9,4 @@ export function useData(widget: Widget): [string[], Array<string | number>[]] {
 
     return [columns, data];
 }
+
diff --git a/packages/dgrid2/src/reactTable.tsx b/packages/dgrid2/src/reactTable.tsx
index dcd8b1213e..3876a155b0 100644
--- a/packages/dgrid2/src/reactTable.tsx
+++ b/packages/dgrid2/src/reactTable.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import DataGrid, { Column, SelectColumn, SortColumn } from "react-data-grid";
 import { format, timeFormat, timeParse } from "@hpcc-js/common";
 import { useData } from "./hooks.ts";
@@ -33,7 +33,7 @@ const EmptyRowsRenderer: React.FunctionComponent<EmptyRowsRendererProps> = ({
 };
 
 interface ColumnEx<TRow, TSummaryRow = unknown> extends Column<TRow, TSummaryRow> {
-    renderCell?: (props: any) => React.JSX.Element;
+    renderCell?: (props: any) => any;
     __hpcc_pattern?: ReturnType<typeof timeParse>;
     __hpcc_format?: ReturnType<typeof format> | ReturnType<typeof timeFormat>;
 }
@@ -145,7 +145,7 @@ export const ReactTable: React.FunctionComponent<ReactTableProps> = ({
         rows={rows}
         rowKeyGetter={rowKeyGetter}
         rowHeight={20}
-        renderers={{ noRowsFallback: <EmptyRowsRenderer message={table.noDataMessage()} /> }}
+        renderers={{ noRowsFallback: <EmptyRowsRenderer message={table.noDataMessage()} /> as any }}
         className={table.darkMode() ? "rdg-dark" : "rdg-light"}
         sortColumns={sortColumn ? [sortColumn] : []}
         onSortColumnsChange={onSortColumnsChange}
diff --git a/packages/dgrid2/src/table.ts b/packages/dgrid2/src/table.ts
index 8c2fa50fbf..32a709af5a 100644
--- a/packages/dgrid2/src/table.ts
+++ b/packages/dgrid2/src/table.ts
@@ -1,6 +1,6 @@
-import React from "react";
-import { createRoot, Root } from "react-dom/client";
+import * as React from "react";
 import { HTMLWidget } from "@hpcc-js/common";
+import { render, unmountComponentAtNode } from "react-dom";
 import { ReactTable } from "./reactTable.tsx";
 
 import "./table.css";
@@ -10,7 +10,6 @@ export type ColumnType = "boolean" | "number" | "string" | "time";
 export class Table extends HTMLWidget {
 
     protected _div;
-    protected _root: Root;
 
     constructor() {
         super();
@@ -59,18 +58,17 @@ export class Table extends HTMLWidget {
             .append("div")
             .style("display", "grid")
             ;
-        this._root = createRoot(this._div.node());
     }
 
     update(domNode, element) {
         super.update(domNode, element);
         this._div.style("width", this.width() + "px");
         this._div.style("height", this.height() + "px");
-        this._root.render(React.createElement(ReactTable, { table: this }));
+        render(React.createElement(ReactTable, { table: this }), this._div.node());
     }
 
     exit(domNode, element) {
-        this._root.unmount();
+        unmountComponentAtNode(this._div.node());
         this._div.remove();
         super.exit(domNode, element);
     }
diff --git a/packages/graph/index.html b/packages/graph/index.html
index 806b8644c8..09b31d5b6e 100644
--- a/packages/graph/index.html
+++ b/packages/graph/index.html
@@ -38,12 +38,7 @@
                 "@hpcc-js/dgrid": "../dgrid/dist/index.js",
                 "@hpcc-js/react": "../react/dist/index.js",
                 "@hpcc-js/html": "../html/dist/index.js",
-                "@hpcc-js/graph": "../graph/dist/index.js",
-                "xreact":"../../node_modules/preact/compat/dist/compat.module.js",
-                "xreact-dom/client":"../../node_modules/preact/compat/client.mjs",
-                "xpreact":"../../node_modules/preact/dist/preact.module.js",
-                "xpreact/compat":"../../node_modules/preact/compat/dist/compat.module.js",
-                "xpreact/hooks":"../../node_modules/preact/hooks/dist/hooks.module.js"
+                "@hpcc-js/graph": "../graph/dist/index.js"
             }
         }
     </script>
diff --git a/packages/graph/package.json b/packages/graph/package.json
index 6be19ef0c2..1a459a6db9 100644
--- a/packages/graph/package.json
+++ b/packages/graph/package.json
@@ -52,14 +52,9 @@
         "d3-sankey": "^0",
         "d3-shape": "^1",
         "d3-tile": "^1",
-        "d3-transition": "^1",
-        "react": "18.3.1",
-        "react-dom": "18.3.1"
-    },
-    "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0"
+        "d3-transition": "^1"
     },
+    "peerDependencies": {},
     "repository": {
         "type": "git",
         "url": "git+https://github.com/hpcc-systems/Visualization.git"
diff --git a/packages/graph/src/graph2/graph.ts b/packages/graph/src/graph2/graph.ts
index 8b42624de3..ec813c4484 100644
--- a/packages/graph/src/graph2/graph.ts
+++ b/packages/graph/src/graph2/graph.ts
@@ -1,5 +1,4 @@
-import React from "react";
-import { Subgraph, SubgraphProps, Vertex, VertexProps, Edge, EdgeProps } from "@hpcc-js/react";
+import { React, Subgraph, SubgraphProps, Vertex, VertexProps, Edge, EdgeProps } from "@hpcc-js/react";
 import { GraphReactT } from "./graphReactT.ts";
 import { GraphDataProps, HierarchyBase } from "./graphT.ts";
 
diff --git a/packages/graph/src/graph2/graphReactT.ts b/packages/graph/src/graph2/graphReactT.ts
index 92f0bade44..615aaa81a3 100644
--- a/packages/graph/src/graph2/graphReactT.ts
+++ b/packages/graph/src/graph2/graphReactT.ts
@@ -1,5 +1,4 @@
-import React from "react";
-import { SubgraphProps, VertexProps, EdgeProps, render } from "@hpcc-js/react";
+import { render, React, SubgraphProps, VertexProps, EdgeProps } from "@hpcc-js/react";
 import { GraphT, RendererT } from "./graphT.ts";
 
 function adapter<T>(reactRenderer: React.FunctionComponent<T>): RendererT<T> {
diff --git a/packages/graph/src/graph2/subgraph.tsx b/packages/graph/src/graph2/subgraph.tsx
index 4293f05d15..8aeaca08d6 100644
--- a/packages/graph/src/graph2/subgraph.tsx
+++ b/packages/graph/src/graph2/subgraph.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { Text } from "@hpcc-js/react";
+import { React, Text } from "@hpcc-js/react";
 import { SubgraphBaseProps } from "./layouts/placeholders.ts";
 
 export interface BasicSubgraphProps extends SubgraphBaseProps {
diff --git a/packages/graph/src/graph2/vertex.tsx b/packages/graph/src/graph2/vertex.tsx
index 79b0d9b41d..4b36d83aec 100644
--- a/packages/graph/src/graph2/vertex.tsx
+++ b/packages/graph/src/graph2/vertex.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import { Text } from "@hpcc-js/react";
+import { React, Text } from "@hpcc-js/react";
 import { VertexBaseProps } from "./layouts/placeholders.ts";
 
 export interface BasicVertexProps extends VertexBaseProps {
diff --git a/packages/graph/tsconfig.json b/packages/graph/tsconfig.json
index acfd3b2511..73b1d0a5c0 100644
--- a/packages/graph/tsconfig.json
+++ b/packages/graph/tsconfig.json
@@ -7,7 +7,8 @@
         "emitDeclarationOnly": true,
         "declaration": true,
         "declarationDir": "types",
-        "jsx": "react",
+        "jsx": "react-jsx",
+        "jsxImportSource": "preact",
         "strict": true,
         "noImplicitAny": false,
         "strictNullChecks": false,
diff --git a/packages/html/package.json b/packages/html/package.json
index 96d81466ce..9c7c492919 100644
--- a/packages/html/package.json
+++ b/packages/html/package.json
@@ -40,15 +40,12 @@
     },
     "devDependencies": {
         "@hpcc-js/esbuild-plugins": "^1.3.0",
+	        "@hpcc-js/preact-shim": "^3.0.0",
+
         "d3-format": "^1",
-        "d3-selection": "^1",
-        "react": "18.3.1",
-        "react-dom": "18.3.1"
-    },
-    "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0"
+        "d3-selection": "^1"
     },
+    "peerDependencies": {},
     "repository": {
         "type": "git",
         "url": "git+https://github.com/hpcc-systems/Visualization.git"
diff --git a/packages/html/src/JSXWidget.ts b/packages/html/src/JSXWidget.ts
index 349af47564..c07f53d513 100644
--- a/packages/html/src/JSXWidget.ts
+++ b/packages/html/src/JSXWidget.ts
@@ -1,10 +1,9 @@
-import React from "react";
-import { render } from "react-dom";
 import { HTMLWidget } from "@hpcc-js/common";
+import { Component, createElement, render } from "@hpcc-js/preact-shim";
 
 export class JSXWidget extends HTMLWidget {
-    static Component = React.Component;
-    static createElement = React.createElement;
+    static Component = Component;
+    static createElement = createElement;
     protected rootNode;
 
     jsxRender(jsx, domNode) {
diff --git a/packages/html/src/VizComponent.tsx b/packages/html/src/VizComponent.tsx
index a38f1dc73a..83b85b1ad9 100644
--- a/packages/html/src/VizComponent.tsx
+++ b/packages/html/src/VizComponent.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 import { JSXWidget } from "./JSXWidget.ts";
 
 export class VizComponent extends JSXWidget.Component<any, any> {
diff --git a/packages/html/src/VizInstance.tsx b/packages/html/src/VizInstance.tsx
index f7f2135f99..a3a5a79230 100644
--- a/packages/html/src/VizInstance.tsx
+++ b/packages/html/src/VizInstance.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 import { JSXWidget } from "./JSXWidget.ts";
 
 export class VizInstance extends JSXWidget.Component<any, any> {
diff --git a/packages/preact-shim/src/index.ts b/packages/preact-shim/src/index.ts
index f25f934fd0..d3859042a6 100644
--- a/packages/preact-shim/src/index.ts
+++ b/packages/preact-shim/src/index.ts
@@ -1,7 +1,8 @@
 export * from "./__package__.ts";
 export { createElement, Component, Fragment, h, render } from "preact";
+export { unmountComponentAtNode } from "preact/compat";
 export type { FunctionComponent } from "preact";
-export { useCallback, useEffect, useMemo, useReducer, useState } from "preact/hooks";
+export { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useState } from "preact/hooks";
 
 /*
  * A Preact 11+ implementation of the `replaceNode` parameter from Preact 10.
diff --git a/packages/react/index.html b/packages/react/index.html
index 5342205e5b..fef20f8fb6 100644
--- a/packages/react/index.html
+++ b/packages/react/index.html
@@ -35,14 +35,7 @@
                 "@hpcc-js/comms": "../comms/dist/index.js",
                 "@hpcc-js/observablehq-compiler": "../observablehq-compiler/dist/index.js",
                 "@hpcc-js/html": "../comms/html/index.js",
-                "@hpcc-js/react": "../react/dist/index.js",
-                "react":"../../node_modules/react/umd/react.development.js",
-                "react-dom/client":"../../node_modules/react-dom/client.js",
-                "preact":"../../node_modules/preact/dist/preact.module.js",
-                "preact/compat":"../../node_modules/preact/compat/dist/compat.module.js",
-                "preact/hooks":"../../node_modules/preact/hooks/dist/hooks.module.js",
-                "react":"../../node_modules/preact/compat/dist/compat.module.js",
-                "react-dom/client":"../../node_modules/preact/compat/client.mjs"
+                "@hpcc-js/react": "../react/dist/index.js"
             }
         }
     </script>
@@ -54,9 +47,9 @@
     <h1>ESM Quick Test</h1>
     <div id="placeholder"></div>
     <script type="module">
-        import { HTMLAdapter, SVGAdapter, Span, Text, LabelledRect, TextLine, Circle, Square, Rectangle, Shape } from "@hpcc-js/react";
+        import { HTMLAdapter, SVGAdapter, Span, TextBox, LabelledRect, TextLine, Circle, Square, Rectangle, Shape } from "@hpcc-js/react";
 
-        window.__widget = new SVGAdapter(Text)
+        window.__widget = new SVGAdapter(TextBox)
             .target("placeholder")
             .prop("text", "red")
             .render()
diff --git a/packages/react/package.json b/packages/react/package.json
index f4ea6dcb15..d64ca2e35c 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -39,13 +39,9 @@
     },
     "devDependencies": {
         "@hpcc-js/esbuild-plugins": "^1.3.0",
-        "react": "18.3.1",
-        "react-dom": "18.3.1"
-    },
-    "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0",
-        "react-dom": "^17.0.0 || ^18.0.0"
+        "@hpcc-js/preact-shim": "^3.0.0"
     },
+    "peerDependencies": {},
     "repository": {
         "type": "git",
         "url": "git+https://github.com/hpcc-systems/Visualization.git"
diff --git a/packages/react/src/ImageChar.tsx b/packages/react/src/ImageChar.tsx
index 2ca5dec41e..100f42c505 100644
--- a/packages/react/src/ImageChar.tsx
+++ b/packages/react/src/ImageChar.tsx
@@ -1,5 +1,5 @@
-import React, { useMemo } from "react";
 import { Utility } from "@hpcc-js/common";
+import * as React from "@hpcc-js/preact-shim";
 
 export interface ImageCharProps {
     x?: number;
@@ -24,7 +24,7 @@ export const ImageChar: React.FunctionComponent<ImageCharProps> = ({
     fontWeight
 }) => {
 
-    const renderChar = useMemo(() => {
+    const renderChar = React.useMemo(() => {
         return fontFamily === "FontAwesome" ? Utility.faChar(char) : char;
     }, [char, fontFamily]);
 
diff --git a/packages/react/src/edge.tsx b/packages/react/src/edge.tsx
index 9d52dd53b7..47f7c02451 100644
--- a/packages/react/src/edge.tsx
+++ b/packages/react/src/edge.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 import { VertexProps } from "./vertex.tsx";
 import { Text } from "./text.tsx";
 
diff --git a/packages/react/src/icon.tsx b/packages/react/src/icon.tsx
index de6300b70f..c8a94d8a90 100644
--- a/packages/react/src/icon.tsx
+++ b/packages/react/src/icon.tsx
@@ -1,5 +1,5 @@
-import React from "react";
 import { Palette } from "@hpcc-js/common";
+import * as React from "@hpcc-js/preact-shim";
 import { Image } from "./image.tsx";
 import { ImageChar } from "./ImageChar.tsx";
 import { Shape } from "./shape.tsx";
diff --git a/packages/react/src/image.tsx b/packages/react/src/image.tsx
index 44a71adfe1..7b116292ee 100644
--- a/packages/react/src/image.tsx
+++ b/packages/react/src/image.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 
 interface ImageProps {
     href: string;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 491f46eb73..a88c530406 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -14,7 +14,7 @@ export * from "./vertex3.tsx";
 export * from "./vertex4.tsx";
 export * from "./subgraph.tsx";
 
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 export {
     React
 };
diff --git a/packages/react/src/render.ts b/packages/react/src/render.ts
index 84eb91d860..04d08099ec 100644
--- a/packages/react/src/render.ts
+++ b/packages/react/src/render.ts
@@ -1,16 +1,18 @@
-import React from "react";
-import { render as reactRender } from "react-dom";
-import { createRoot, Root } from "react-dom/client";
 import { HTMLWidget, SVGWidget } from "@hpcc-js/common";
+import * as React from "@hpcc-js/preact-shim";
 
-export function render<P>(C: React.FunctionComponent<P>, props: Readonly<P>, parent: Element | Document | ShadowRoot | DocumentFragment) {
-    const re = React.createElement(C, props);
-    reactRender(re, parent);
+export function render<P>(C: React.FunctionComponent<P>, props: Readonly<P>, parent: Element | Document | ShadowRoot | DocumentFragment, replaceNode?: Element | Text) {
+    React.render(React.h(C, props), parent, replaceNode);
 }
 
-export class HTMLAdapter<P> extends HTMLWidget {
+export interface FunctionComponent<T> extends React.FunctionComponent<T> {
+}
 
-    protected _root: Root;
+export function svgRender<P>(C: React.FunctionComponent<P>, props: Readonly<P>, parent: Element | Document | ShadowRoot | DocumentFragment, replaceNode?: Element | Text) {
+    React.render(React.h("svg", null, React.h(C, props)), parent, replaceNode);
+}
+
+export class HTMLAdapter<P> extends HTMLWidget {
 
     props(): P;
     props(_: Partial<P>): this;
@@ -32,19 +34,9 @@ export class HTMLAdapter<P> extends HTMLWidget {
         super();
     }
 
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        this._root = createRoot(domNode);
-    }
-
     update(domNode, element) {
         super.update(domNode, element);
-        this._root.render(React.createElement(this._component, this.props()));
-    }
-
-    exit(domNode, element) {
-        this._root.unmount();
-        super.exit(domNode, element);
+        render(this._component, this._props, domNode);
     }
 }
 HTMLAdapter.prototype._class += " react_HTMLAdapter";
@@ -56,8 +48,6 @@ HTMLAdapter.prototype.publish("props", {}, "object", "Properties");
 
 export class SVGAdapter<P> extends SVGWidget {
 
-    protected _root: Root;
-
     props(): P;
     props(_: Partial<P>): this;
     props(_?: Partial<P>): P | this {
@@ -78,20 +68,9 @@ export class SVGAdapter<P> extends SVGWidget {
         super();
     }
 
-    _c2: React.ReactElement;
-    enter(domNode, element) {
-        super.enter(domNode, element);
-        this._root = createRoot(domNode);
-    }
-
     update(domNode, element) {
         super.update(domNode, element);
-        this._root.render(React.createElement(this._component, this.props()));
-    }
-
-    exit(domNode, element) {
-        this._root.unmount();
-        super.exit(domNode, element);
+        render(this._component, this._props, domNode);
     }
 }
 SVGAdapter.prototype._class += " react_SVGAdapter";
diff --git a/packages/react/src/shape.tsx b/packages/react/src/shape.tsx
index 2907448591..a44f93821e 100644
--- a/packages/react/src/shape.tsx
+++ b/packages/react/src/shape.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 
 interface CircleProps {
     radius?: number;
diff --git a/packages/react/src/span.tsx b/packages/react/src/span.tsx
index 714db8acbc..a3f90a7487 100644
--- a/packages/react/src/span.tsx
+++ b/packages/react/src/span.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 
 export interface SpanProps {
     text: string;
diff --git a/packages/react/src/subgraph.tsx b/packages/react/src/subgraph.tsx
index 1a05c67f1a..b55e7727d8 100644
--- a/packages/react/src/subgraph.tsx
+++ b/packages/react/src/subgraph.tsx
@@ -1,5 +1,5 @@
-import React from "react";
 import { Utility } from "@hpcc-js/common";
+import * as React from "@hpcc-js/preact-shim";
 import { Rectangle } from "./shape.tsx";
 import { Text } from "./text.tsx";
 
diff --git a/packages/react/src/text.tsx b/packages/react/src/text.tsx
index 0fdb89b0e2..7efd3460f4 100644
--- a/packages/react/src/text.tsx
+++ b/packages/react/src/text.tsx
@@ -1,5 +1,5 @@
-import React from "react";
 import { Utility } from "@hpcc-js/common";
+import * as React from "@hpcc-js/preact-shim";
 import { Icon } from "./icon.tsx";
 import { Rectangle } from "./shape.tsx";
 
@@ -21,10 +21,10 @@ export const TextLine: React.FunctionComponent<TextLineProps> = ({
     fill = "black"
 }) => {
     return <text
-        fontFamily={fontFamily}
-        fontSize={`${height}px`}
-        textAnchor={anchor}
-        dominantBaseline={baseline}
+        font-family={fontFamily}
+        font-size={`${height}px`}
+        text-anchor={anchor}
+        dominant-baseline={baseline}
         fill={fill}
     >{text}</text>;
 };
diff --git a/packages/react/src/vertex.tsx b/packages/react/src/vertex.tsx
index 9cbaedc869..117e4da7ea 100644
--- a/packages/react/src/vertex.tsx
+++ b/packages/react/src/vertex.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "@hpcc-js/preact-shim";
 import { Icon, IconProps } from "./icon.tsx";
 import { TextBox } from "./text.tsx";
 
diff --git a/packages/react/src/vertex2.tsx b/packages/react/src/vertex2.tsx
index 55c6c228f6..9972ae10c7 100644
--- a/packages/react/src/vertex2.tsx
+++ b/packages/react/src/vertex2.tsx
@@ -1,5 +1,5 @@
-import React from "react";
 import { Utility } from "@hpcc-js/common";
+import * as React from "@hpcc-js/preact-shim";
 import { Icon, IconProps } from "./icon.tsx";
 import { TextBox } from "./text.tsx";
 import { Annotations, VertexProps } from "./vertex.tsx";
diff --git a/packages/react/src/vertex3.tsx b/packages/react/src/vertex3.tsx
index d438ecac28..89ec3c4c8a 100644
--- a/packages/react/src/vertex3.tsx
+++ b/packages/react/src/vertex3.tsx
@@ -1,5 +1,5 @@
-import React from "react";
 import { Utility } from "@hpcc-js/common";
+import * as React from "@hpcc-js/preact-shim";
 import { Icon, IconProps } from "./icon.tsx";
 import { TextBox, TextBoxProps } from "./text.tsx";
 import { VertexProps } from "./vertex.tsx";
diff --git a/packages/react/src/vertex4.tsx b/packages/react/src/vertex4.tsx
index 02e66bb77c..fce5d1bea0 100644
--- a/packages/react/src/vertex4.tsx
+++ b/packages/react/src/vertex4.tsx
@@ -1,5 +1,5 @@
-import React from "react";
 import { Utility } from "@hpcc-js/common";
+import * as React from "@hpcc-js/preact-shim";
 import { Icon, IconProps } from "./icon.tsx";
 import { TextBox, TextBoxProps } from "./text.tsx";
 import { VertexProps } from "./vertex.tsx";
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index acfd3b2511..73b1d0a5c0 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -7,7 +7,8 @@
         "emitDeclarationOnly": true,
         "declaration": true,
         "declarationDir": "types",
-        "jsx": "react",
+        "jsx": "react-jsx",
+        "jsxImportSource": "preact",
         "strict": true,
         "noImplicitAny": false,
         "strictNullChecks": false,