diff --git a/examples/js/index.js b/examples/js/index.js
index b4e063b4..cdf0b1f4 100644
--- a/examples/js/index.js
+++ b/examples/js/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import {
   FlexBox,
   Heading,
@@ -38,10 +38,10 @@ const theme = {
 
 const SlideFragments = () => (
   <>
-    <Slide>
+    <Slide key="slide-fragment-1">
       <Text>This is a slide fragment.</Text>
     </Slide>
-    <Slide>
+    <Slide key="slide-fragment-2">
       <Text>This is also a slide fragment.</Text>
       <Appear>
         <Text>This item shows up!</Text>
@@ -267,5 +267,5 @@ const Presentation = () => (
   </Deck>
 );
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = createRoot(document.getElementById('root'));
 root.render(<Presentation />);
diff --git a/examples/one-page/index.html b/examples/one-page/index.html
index b7adc7c6..37d6341b 100644
--- a/examples/one-page/index.html
+++ b/examples/one-page/index.html
@@ -12,42 +12,43 @@
     <script type="importmap">
       {
         "imports": {
-          "htm": "https://esm.sh/v121/htm@^3?deps=react@18.2.0",
-          "spectacle": "https://esm.sh/spectacle@10?bundle",
-          "broadcast-channel": "https://esm.sh/v121/broadcast-channel@^4.17.0?deps=react@18.2.0",
-          "history": "https://esm.sh/v121/history@^5.3.0?deps=react@18.2.0",
-          "kbar": "https://esm.sh/v121/kbar@0.1.0-beta.40?deps=react@18.2.0",
-          "lodash.clonedeep": "https://esm.sh/v121/lodash.clonedeep@^4.5.0?deps=react@18.2.0",
-          "mdast-builder": "https://esm.sh/v121/mdast-builder@^1.1.1?deps=react@18.2.0",
-          "mdast-zone": "https://esm.sh/v121/mdast-zone@^4.0.0?deps=react@18.2.0",
-          "merge-anything": "https://esm.sh/v121/merge-anything@^3.0.3?deps=react@18.2.0",
-          "mousetrap": "https://esm.sh/v121/mousetrap@^1.6.5?deps=react@18.2.0",
-          "query-string": "https://esm.sh/v121/query-string@^7.1.3?deps=react@18.2.0",
-          "react": "https://esm.sh/v121/react@18.2.0?deps=react@18.2.0",
-          "react/jsx-runtime": "https://esm.sh/v121/react@18.2.0/jsx-runtime?deps=react@18.2.0",
-          "react-dom": "https://esm.sh/v121/react-dom@18.2.0?deps=react@18.2.0",
-          "react-fast-compare": "https://esm.sh/v121/react-fast-compare@^3.2.0?deps=react@18.2.0",
-          "react-is": "https://esm.sh/v121/react-is@^18.1.0?deps=react@18.2.0",
-          "react-spring": "https://esm.sh/v121/react-spring@^9.5.5?deps=react@18.2.0",
-          "react-swipeable": "https://esm.sh/v121/react-swipeable@^7.0.0?deps=react@18.2.0",
-          "react-syntax-highlighter": "https://esm.sh/v121/react-syntax-highlighter@^15.5.0?deps=react@18.2.0",
-          "react-syntax-highlighter/dist/cjs/styles/prism/vs-dark.js": "https://esm.sh/v121/react-syntax-highlighter@^15.5.0/dist/esm/styles/prism/vs-dark.js?deps=react@18.2.0",
-          "react-syntax-highlighter/dist/cjs/styles/prism/index.js": "https://esm.sh/v121/react-syntax-highlighter@^15.5.0/dist/esm/styles/prism/index.js?deps=react@18.2.0",
-          "rehype-raw": "https://esm.sh/v121/rehype-raw@^5.1.0?deps=react@18.2.0",
-          "rehype-react": "https://esm.sh/v121/rehype-react@^6.0.0?deps=react@18.2.0",
-          "remark-parse": "https://esm.sh/v121/remark-parse@^8.0.3?deps=react@18.2.0",
-          "remark-rehype": "https://esm.sh/v121/remark-rehype@^7.0.0?deps=react@18.2.0",
-          "styled-components": "https://esm.sh/v121/styled-components@^5.3.6?deps=react@18.2.0",
-          "styled-system": "https://esm.sh/v121/styled-system@5.1.5?deps=react@18.2.0",
-          "unified": "https://esm.sh/v121/unified@^9.0.0?deps=react@18.2.0",
-          "unist-util-visit": "https://esm.sh/v121/unist-util-visit@^2.0.3?deps=react@18.2.0",
-          "use-resize-observer": "https://esm.sh/v121/use-resize-observer@^9.0.2?deps=react@18.2.0"
+          "htm": "https://esm.sh/htm@^3?external=react,react-dom",
+          "spectacle": "https://esm.sh/spectacle@10?external=react,react-dom&bundle",
+          "broadcast-channel": "https://esm.sh/broadcast-channel@^4.17.0?external=react,react-dom",
+          "history": "https://esm.sh/history@^5.3.0?external=react,react-dom",
+          "kbar": "https://esm.sh/kbar@0.1.0-beta.40?external=react,react-dom",
+          "lodash.clonedeep": "https://esm.sh/lodash.clonedeep@^4.5.0?external=react,react-dom",
+          "mdast-builder": "https://esm.sh/mdast-builder@^1.1.1?external=react,react-dom",
+          "mdast-zone": "https://esm.sh/mdast-zone@^4.0.0?external=react,react-dom",
+          "merge-anything": "https://esm.sh/merge-anything@^3.0.3?external=react,react-dom",
+          "mousetrap": "https://esm.sh/mousetrap@^1.6.5?external=react,react-dom",
+          "query-string": "https://esm.sh/query-string@^7.1.3?external=react,react-dom",
+          "react": "https://esm.sh/react@18.2.0?",
+          "react/jsx-runtime": "https://esm.sh/react@18.2.0/jsx-runtime?",
+          "react-dom": "https://esm.sh/react-dom@18.2.0?",
+          "react-dom/client": "https://esm.sh/react-dom@18.2.0/client?",
+          "react-fast-compare": "https://esm.sh/react-fast-compare@^3.2.0?external=react,react-dom",
+          "react-is": "https://esm.sh/react-is@^18.1.0?external=react,react-dom",
+          "react-spring": "https://esm.sh/react-spring@^9.5.5?external=react,react-dom",
+          "react-swipeable": "https://esm.sh/react-swipeable@^7.0.0?external=react,react-dom",
+          "react-syntax-highlighter": "https://esm.sh/react-syntax-highlighter@^15.5.0?external=react,react-dom",
+          "react-syntax-highlighter/dist/cjs/styles/prism/vs-dark.js": "https://esm.sh/react-syntax-highlighter@^15.5.0/dist/esm/styles/prism/vs-dark.js?external=react,react-dom",
+          "react-syntax-highlighter/dist/cjs/styles/prism/index.js": "https://esm.sh/react-syntax-highlighter@^15.5.0/dist/esm/styles/prism/index.js?external=react,react-dom",
+          "rehype-raw": "https://esm.sh/rehype-raw@^5.1.0?external=react,react-dom",
+          "rehype-react": "https://esm.sh/rehype-react@^6.0.0?external=react,react-dom",
+          "remark-parse": "https://esm.sh/remark-parse@^8.0.3?external=react,react-dom",
+          "remark-rehype": "https://esm.sh/remark-rehype@^7.0.0?external=react,react-dom",
+          "styled-components": "https://esm.sh/styled-components@^5.3.6?external=react,react-dom",
+          "styled-system": "https://esm.sh/styled-system@5.1.5?external=react,react-dom",
+          "unified": "https://esm.sh/unified@^9.0.0?external=react,react-dom",
+          "unist-util-visit": "https://esm.sh/unist-util-visit@^2.0.3?external=react,react-dom",
+          "use-resize-observer": "https://esm.sh/use-resize-observer@^9.0.2?external=react,react-dom"
         }
       }
     </script>
     <script type="module">
       import React from 'react';
-      import ReactDOM from 'react-dom';
+      import { createRoot } from 'react-dom/client';
       import {
         FlexBox,
         Heading,
@@ -88,10 +89,10 @@
 
       // SPECTACLE_CLI_THEME_END
       const SlideFragments = () => html`
-        <${Slide}>
+        <${Slide} key="slide-fragment-1">
           <${Text}>This is a slide fragment.</${Text}>
         </${Slide}>
-        <${Slide}>
+        <${Slide} key="slide-fragment-2">
           <${Text}>This is also a slide fragment.</${Text}>
           <${Appear}>
             <${Text}>This item shows up!</${Text}>
@@ -283,7 +284,7 @@
           <${SlideLayout.List} title="Slide layouts!" items=${['Two-column', 'Lists' , 'And more!' ]} animateListItems />
         </${Deck}>
       `;
-      const root = ReactDOM.createRoot(document.getElementById('root'));
+      const root = createRoot(document.getElementById('root'));
       root.render(html`<${Presentation}/>`);
     </script>
   </body>
diff --git a/examples/one-page/scripts/one-page.js b/examples/one-page/scripts/one-page.js
index 3b1f1e5e..051c301d 100644
--- a/examples/one-page/scripts/one-page.js
+++ b/examples/one-page/scripts/one-page.js
@@ -2,6 +2,16 @@
 
 /**
  * Generate the JS `index.html` from `examples/js/index.js`
+ *
+ * To rebuild:
+ * ```sh
+ * pnpm run build:one-page
+ * ```
+ *
+ * To do dev builds and testing:
+ * ```sh
+ * USE_LOCAL=true IS_DEV=true pnpm run build:one-page && pnpm run start:one-page
+ * ```
  */
 const fs = require('fs').promises;
 const path = require('path');
@@ -16,7 +26,7 @@ const SRC_FILE = path.join(EXAMPLES, 'js/index.js');
 const DEST_FILE = path.join(EXAMPLES, 'one-page/index.html');
 
 // Dependencies.
-const ESM_SH_VERSION = 'v121'; // v121, stable, etc.
+const ESM_SH_VERSION = ''; // 'v121/, stable, etc.
 const {
   dependencies,
   peerDependencies
@@ -25,27 +35,30 @@ const reactPkgPath = require.resolve('react/package.json', {
   paths: [SPECTACLE_PATH]
 });
 const { version: reactVersion } = require(reactPkgPath);
-const DEPS = `deps=react@${reactVersion}`;
+const EXTERNAL = `external=react,react-dom`;
 
 // Toggle dev resources. (Use if debugging load / dependency errors).
-const IS_DEV = false;
+const IS_DEV = process.env.IS_DEV === 'true';
 const DEV = IS_DEV ? '&dev' : '';
 
 // Use local built spectacle? Toggle to `true` for dev-only.
 // Note: Due to CORS, you'll need to run `pnpm run --filter ./examples/one-page start` and
 // open http://localhost:5000/examples/one-page to work.
-const USE_LOCAL = false;
+const USE_LOCAL = process.env.USE_LOCAL === 'true';
 
 // ================================================================================================
 // Import Map
 // ================================================================================================
-const importUrl = (k, v, extra = '') => {
+const importUrl = (k, v, extra = '', params = '') => {
+  let external = EXTERNAL;
+
   // Pin react and react-dom.
   if (k === 'react' || k === 'react-dom') {
     v = reactVersion;
+    external = '';
   }
 
-  return `https://esm.sh/${ESM_SH_VERSION}/${k}@${v}${extra}?${DEPS}${DEV}`;
+  return `https://esm.sh/${ESM_SH_VERSION}${k}@${v}${extra}?${external}${params}${DEV}`;
 };
 
 const getImportMap = () => {
@@ -54,7 +67,7 @@ const getImportMap = () => {
     htm: importUrl('htm', '^3'),
     spectacle: USE_LOCAL
       ? '../../packages/spectacle/lib/index.mjs'
-      : 'https://esm.sh/spectacle@10?bundle'
+      : importUrl('spectacle', '10', '', '&bundle')
   };
 
   Object.entries(Object.assign({}, dependencies, peerDependencies))
@@ -67,6 +80,9 @@ const getImportMap = () => {
       if (k === 'react') {
         importMap[`${k}/jsx-runtime`] = importUrl(k, v, '/jsx-runtime');
       }
+      if (k === 'react-dom') {
+        importMap[`${k}/client`] = importUrl(k, v, '/client');
+      }
       if (k === 'react-syntax-highlighter') {
         importMap[`${k}/dist/cjs/styles/prism/vs-dark.js`] = importUrl(
           k,
diff --git a/package.json b/package.json
index c31807a6..f671a54e 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "start:md": "concurrently --raw pnpm:build:spectacle:watch \"pnpm run --filter ./examples/md start\"",
     "start:mdx": "concurrently --raw pnpm:build:spectacle:watch \"pnpm run --filter ./examples/mdx start\"",
     "start:ts": "concurrently --raw pnpm:build:spectacle:watch \"pnpm run --filter ./examples/typescript start\"",
+    "start:one-page": "concurrently --raw pnpm:build:spectacle:watch \"pnpm run --filter ./examples/one-page start\"",
     "start:examples": "concurrently --raw pnpm:build:spectacle:watch \"pnpm run --parallel --filter \\\"./examples/*\\\" start\"",
     "start:create-spectacle": "pnpm run --filter ./packages/create-spectacle build --watch",
     "start:docs": "pnpm run --filter spectacle-docs start",