diff --git a/javascript/just.config.cjs b/javascript/just.config.cjs
index ce8b91e5..f6a4815a 100644
--- a/javascript/just.config.cjs
+++ b/javascript/just.config.cjs
@@ -110,7 +110,7 @@ function babelTransformTask(opts) {
       env: {
         // Trigger distribution-specific Babel transforms
         NODE_ENV: 'dist',
-      }
+      },
     });
   };
 }
diff --git a/javascript/src/index.ts b/javascript/src/index.ts
index 888257e7..af5b665a 100644
--- a/javascript/src/index.ts
+++ b/javascript/src/index.ts
@@ -9,7 +9,7 @@
 
 // @ts-ignore untyped from Emscripten
 import loadYoga from '../binaries/web.js';
-import wrapAssembly from './wrapAssembly.js';
+import wrapAssembly from './wrapAssembly.ts';
 
 export type {
   Config,
diff --git a/javascript/tsconfig.json b/javascript/tsconfig.json
index ddca7326..34a56fe3 100644
--- a/javascript/tsconfig.json
+++ b/javascript/tsconfig.json
@@ -17,6 +17,7 @@
     }
   },
   "include": [
-    "src/**/*"
+    "src/**/*",
+    "tests/**/*"
   ]
 }
diff --git a/website-next/src/pages/index.module.css b/website-next/src/pages/index.module.css
index 180b0944..1d3762f4 100644
--- a/website-next/src/pages/index.module.css
+++ b/website-next/src/pages/index.module.css
@@ -28,3 +28,29 @@
   align-items: center;
   justify-content: center;
 }
+
+.playgroundFallback {
+  height: 500px;
+  width: 100%;
+  background: linear-gradient(-90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px),
+    linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
+    linear-gradient(-90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
+    linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
+    linear-gradient(
+      transparent 4px,
+      #f5f5f5 4px,
+      #f5f5f5 97px,
+      transparent 97px
+    ),
+    linear-gradient(-90deg, #e5e5e5 1px, transparent 1px),
+    linear-gradient(
+      -90deg,
+      transparent 4px,
+      #f5f5f5 4px,
+      #f5f5f5 97px,
+      transparent 97px
+    ),
+    linear-gradient(#e5e5e5 1px, transparent 1px), #f5f5f5;
+  background-size: 10px 10px, 10px 10px, 100px 100px, 100px 100px, 100px 100px,
+    100px 100px, 100px 100px, 100px 100px;
+}
diff --git a/website-next/src/pages/index.tsx b/website-next/src/pages/index.tsx
index 5e6e1fcc..ff54a584 100644
--- a/website-next/src/pages/index.tsx
+++ b/website-next/src/pages/index.tsx
@@ -36,6 +36,18 @@ function HomepageHeader() {
 
 const LazyPlayground = React.lazy(() => import('../components/Playground'));
 
+function ClientPlayground() {
+  const fallback = <div className={styles.playgroundFallback} />;
+  return <BrowserOnly fallback={fallback}>
+  {() => (
+    <Suspense fallback={fallback}>
+      <LazyPlayground />
+    </Suspense>
+  )}
+</BrowserOnly>;
+}
+
+
 export default function Home(): JSX.Element {
   const {siteConfig} = useDocusaurusContext();
   return (
@@ -45,13 +57,7 @@ export default function Home(): JSX.Element {
       <HomepageHeader />
       <main>
         <HomepageFeatures />
-        <BrowserOnly fallback={null}>
-          {() => (
-            <Suspense fallback={null}>
-              <LazyPlayground />
-            </Suspense>
-          )}
-        </BrowserOnly>
+        <ClientPlayground />
       </main>
     </Layout>
   );