diff --git a/apps/docs/components/LogoDownloadModal.js b/apps/docs/components/LogoDownloadModal.js
index 1772dcb2..3941890d 100644
--- a/apps/docs/components/LogoDownloadModal.js
+++ b/apps/docs/components/LogoDownloadModal.js
@@ -16,8 +16,8 @@ const styles = stylex.create({
     position: 'fixed',
     top: 60,
     left: 20,
-    padding: '16px',
-    borderRadius: '8px',
+    padding: 16,
+    borderRadius: 8,
     boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
     maxWidth: '16.25rem',
     maxHeight: '80vh',
@@ -39,12 +39,12 @@ const styles = stylex.create({
     color: '#FFFFFF',
   },
   section: {
-    marginBottom: '16px',
+    marginBottom: 16,
   },
   sectionTitle: {
-    fontSize: '14px',
+    fontSize: 14,
     fontWeight: 'bold',
-    marginBottom: '8px',
+    marginBottom: 8,
   },
   buttonGroup: {
     display: 'flex',
@@ -54,7 +54,8 @@ const styles = stylex.create({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-start',
-    padding: '12px 16px',
+    paddingBlock: 12,
+    paddingInline: 16,
     cursor: 'pointer',
     backgroundColor: {
       default: 'var(--ifm-background-color)',
@@ -64,17 +65,17 @@ const styles = stylex.create({
       default: 'var(--ifm-font-color-base)',
       ':hover': '#FFFFFF',
     },
-    borderRadius: '4px',
-    fontSize: '14px',
+    borderRadius: 4,
+    fontSize: 14,
     transition: 'background-color 0.2s, color 0.2s',
     borderStyle: 'none',
     width: '100%',
-    marginBottom: '8px',
+    marginBottom: 8,
   },
   icon: {
-    marginRight: '8px',
-    width: '16px',
-    height: '16px',
+    marginRight: 8,
+    width: 16,
+    height: 16,
     fill: 'currentColor',
   },
 });
diff --git a/apps/docs/components/Playground.js b/apps/docs/components/Playground.js
index 5dc572b8..b6ffd58f 100644
--- a/apps/docs/components/Playground.js
+++ b/apps/docs/components/Playground.js
@@ -7,6 +7,7 @@
  * @format
  */
 
+// Import necessary components and libraries
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faBars, faRotateRight } from '@fortawesome/free-solid-svg-icons';
@@ -18,9 +19,17 @@ import { useEffect, useRef, useState } from 'react';
 import { UnControlled as CodeMirror } from 'react-codemirror2';
 import 'codemirror/mode/javascript/javascript';
 import { files } from './playground-utils/files';
+import useDebounced from './hooks/useDebounced';
 
+// Add FontAwesome icons to the library
 library.add(faBars, faRotateRight);
 
+/**
+ * Function to spawn a command in the WebContainer instance.
+ * @param {WebContainer} instance - The WebContainer instance.
+ * @param {...string} args - Command arguments to be executed.
+ * @returns {Promise} - Promise that resolves when the command execution is successful.
+ */
 async function wcSpawn(instance, ...args) {
   console.log('Running:', args.join(' '));
   const process = await instance.spawn(...args);
@@ -41,6 +50,10 @@ async function wcSpawn(instance, ...args) {
   return process;
 }
 
+/**
+ * Function to initialize and configure the WebContainer.
+ * @returns {Promise} - Promise that resolves with the configured WebContainer instance.
+ */
 async function makeWebcontainer() {
   console.log('Booting WebContainer...');
   const instance = await WebContainer.boot();
@@ -57,17 +70,22 @@ async function makeWebcontainer() {
   return instance;
 }
 
+/**
+ * Main component for the Playground.
+ * @returns {JSX.Element} - The rendered JSX element.
+ */
 export default function Playground() {
   const instance = useRef(null);
   const [url, setUrl] = useState(null);
-  const debounceTimeout = useRef(null);
-  const [code, setCode] = useState(
+  const [code, _setCode] = useState(
     files.src.directory['App.jsx'].file.contents,
   );
   const [error, setError] = useState(null);
-  const loadingTimeout = useRef(null);
   const urlRef = useRef(null);
 
+  /**
+   * Function to build the WebContainer and start the development server.
+   */
   const build = async () => {
     const containerInstance = instance.current;
     if (!containerInstance) {
@@ -96,32 +114,31 @@ export default function Playground() {
     });
   };
 
-  const updateFiles = async () => {
+  /**
+   * Function to update files in the WebContainer.
+   */
+  const updateFiles = async (updatedCode) => {
     const containerInstance = instance.current;
     const filePath = './src/App.jsx';
-    const updatedCode = code;
     await containerInstance.fs.writeFile(filePath, updatedCode);
   };
 
-  const handleCodeChange = (newCode) => {
-    if (debounceTimeout.current) {
-      clearTimeout(debounceTimeout.current);
-      debounceTimeout.current = null;
-    }
+  const debouncedUpdateFiles = useDebounced(async (newCode) => {
+    await updateFiles(newCode);
+  }, 1000);
 
-    debounceTimeout.current = setTimeout(async () => {
-      setCode(newCode);
-      if (url) {
-        try {
-          await updateFiles();
-          console.log('Successfully applied changes.');
-        } catch (err) {
-          console.error(err);
-        }
-      }
-    }, 2000);
+  /**
+   * Function to handle code changes in the CodeMirror editor.
+   * @param {string} newCode - The new code content from the editor.
+   */
+  const handleCodeChange = (newCode) => {
+    // setCode(newCode);
+    debouncedUpdateFiles(newCode);
   };
 
+  /**
+   * Function to reload the WebContainer preview.
+   */
   const reloadWebContainer = async () => {
     if (!url) return;
     const iframe = document.querySelector('iframe');
@@ -130,7 +147,6 @@ export default function Playground() {
       if (error) {
         setError(null);
       }
-      console.log('Reloading container preview...');
       await reloadPreview(iframe);
     } catch (err) {
       console.error(`Error reloading preview: ${err.message}`);
@@ -140,45 +156,46 @@ export default function Playground() {
     }
   };
 
+  // useEffect to initialize the WebContainer and build it
   useEffect(() => {
-    require('codemirror/mode/javascript/javascript');
+    let loadingTimeout;
     makeWebcontainer().then((i) => {
       instance.current = i;
       build().then(() => {
-        loadingTimeout.current = setTimeout(() => {
-          console.log('running loading timeout');
-          console.log('instance: ', instance.current);
-          console.log('url ref: ', urlRef.current);
+        loadingTimeout = setTimeout(() => {
           if (!urlRef.current) {
             console.log('error due to timeout...');
             setError(
               'WebContainer failed to load. Please try reloading or use a different browser.',
             );
           }
+          loadingTimeout = null;
         }, 10000);
       });
     });
 
-    () => {
+    // Cleanup function to unmount the WebContainer and clear timeouts
+    return () => {
       instance.current.unmount();
-      if (debounceTimeout.current) {
-        clearTimeout(debounceTimeout.current);
-      }
-      if (loadingTimeout.current) {
-        clearTimeout(loadingTimeout.current);
+      if (loadingTimeout != null) {
+        clearTimeout(loadingTimeout);
       }
     };
   }, []);
 
+  // Render the Playground component
   return (
     <div {...stylex.props(styles.root)}>
       <header {...stylex.props(styles.header)}>
-        <button>
+        {/* <button>
           <FontAwesomeIcon icon="fa-solid fa-bars" />
-        </button>
-        <button {...stylex.props(styles.reloadButton)}>
+        </button> */}
+        <button
+          {...stylex.props(styles.reloadButton)}
+          onClick={reloadWebContainer}
+        >
           <FontAwesomeIcon
-            onClick={reloadWebContainer}
+            aria-label="reload"
             icon="fa-solid fa-rotate-right"
           />
         </button>
@@ -189,20 +206,24 @@ export default function Playground() {
             <>
               <CodeMirror
                 {...stylex.props(styles.textarea)}
+                onChange={(editor, data, newCode) => handleCodeChange(newCode)}
                 options={{
                   mode: 'javascript',
                   theme: 'material-darker',
                   lineNumbers: true,
                 }}
                 value={code}
-                onChange={(editor, data, newCode) => handleCodeChange(newCode)}
               />
               {error ? (
-                <div {...stylex.props(styles.textarea)}>{error}</div>
+                <div {...stylex.props(styles.textarea, styles.centered)}>
+                  {error}
+                </div>
               ) : url ? (
                 <iframe {...stylex.props(styles.textarea)} src={url} />
               ) : (
-                <div {...stylex.props(styles.textarea)}>Loading...</div>
+                <div {...stylex.props(styles.textarea, styles.centered)}>
+                  Loading...
+                </div>
               )}
             </>
           )}
@@ -212,20 +233,22 @@ export default function Playground() {
   );
 }
 
+// Style definitions for the Playground component
 const styles = stylex.create({
   root: {
     minHeight: '100vh',
     backgroundColor: 'var(--bg1)',
   },
   header: {
-    height: '40px',
+    height: 40,
     display: 'flex',
     alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingLeft: '20px',
-    paddingRight: '20px',
+    justifyContent: 'flex-end',
+    paddingInline: 4,
     backgroundColor: 'var(--playground-container-bg)',
-    borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    borderBottomColor: 'rgba(255, 255, 255, 0.1)',
     boxShadow: '0 1px 4px rgba(0, 0, 0, 0.1)',
     zIndex: 20,
   },
@@ -233,26 +256,33 @@ const styles = stylex.create({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: 'transparent',
+    backgroundColor: {
+      default: 'transparent',
+      ':hover': 'var(--ifm-color-primary-light)',
+    },
     color: 'var(--fg1)',
-    width: '32px',
-    height: '32px',
-    borderRadius: '4px',
-    border: 'none',
+    width: 32,
+    height: 32,
+    borderRadius: 4,
+    borderStyle: 'none',
     cursor: 'pointer',
     zIndex: 20,
-    padding: '4px',
-    transition: 'background-color 200ms, transform 150ms',
-    ':hover': {
-      backgroundColor: 'var(--ifm-color-primary-light)',
-      transform: 'scale(1.05)',
+    padding: 4,
+    transitionProperty: 'background-color, transform',
+    transitionDuration: '200ms, 150ms',
+    transform: {
+      default: null,
+      ':hover': 'scale(1.05)',
     },
   },
   container: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    height: stylex.firstThatWorks('calc(100dvh - 60px)', 'calc(100vh - 60px)'),
+    height: stylex.firstThatWorks(
+      'calc(100dvh - 100px)',
+      'calc(100vh - 100px)',
+    ),
     borderBottomWidth: 2,
     borderBottomStyle: 'solid',
     borderBottomColor: 'var(--cyan)',
@@ -267,4 +297,8 @@ const styles = stylex.create({
     borderWidth: 0,
     borderStyle: 'none',
   },
+  centered: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 });
diff --git a/apps/docs/components/hooks/useDebounced.js b/apps/docs/components/hooks/useDebounced.js
new file mode 100644
index 00000000..62e04f45
--- /dev/null
+++ b/apps/docs/components/hooks/useDebounced.js
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import { useRef, useEffect } from 'react';
+
+export default function useDebounced(fn, delay) {
+  const timeoutRef = useRef(null);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const debouncedFn = (...args) => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      fn(...args);
+    }, delay);
+  };
+  return debouncedFn;
+}
diff --git a/apps/docs/components/playground-utils/files.js b/apps/docs/components/playground-utils/files.js
index 9a7b048b..5570b215 100644
--- a/apps/docs/components/playground-utils/files.js
+++ b/apps/docs/components/playground-utils/files.js
@@ -183,7 +183,7 @@ createRoot(root).render(
 import { useState } from 'react';
 import reactLogo from './assets/react.svg';
 import viteLogo from '/vite.svg';
-import { props, create, keyframes } from '@stylexjs/stylex';
+import * as stylex from '@stylexjs/stylex';
 import StyleXLogo from './StyleXLogo';
 
 export default function App() {
@@ -192,25 +192,25 @@ export default function App() {
   return (
     <>
       <div>
-        <a {...props(s.link)} href="https://vite.dev" target="_blank">
-          <img {...props(s.logo)} src={viteLogo} alt="Vite logo" />
+        <a {...stylex.props(styles.link)} href="https://vite.dev" target="_blank">
+          <img {...stylex.props(styles.logo)} src={viteLogo} alt="Vite logo" />
         </a>
-        <a {...props(s.link)} href="https://react.dev" target="_blank">
+        <a {...stylex.props(styles.link)} href="https://react.dev" target="_blank">
           <img
-            {...props(s.logo, s.logoReact)}
+            {...stylex.props(styles.logo, styles.logoReact)}
             src={reactLogo}
             alt="React logo"
           />
         </a>
-        <a {...props(s.link)} href="https://stylexjs.com" target="_blank">
-          <StyleXLogo style={s.logo} />
+        <a {...stylex.props(styles.link)} href="https://stylexjs.com" target="_blank">
+          <StyleXLogo style={styles.logo} />
         </a>
       </div>
 
-      <h1 {...props(s.h1)}>Vite + React</h1>
-      <div {...props(s.card)}>
+      <h1 {...stylex.props(styles.h1)}>Vite + React</h1>
+      <div {...stylex.props(styles.card)}>
         <button
-          {...props(s.button)}
+          {...stylex.props(styles.button)}
           onClick={() => setCount((count) => count + 1)}
         >
           count is {count}
@@ -219,14 +219,14 @@ export default function App() {
           Edit <code>src/App.tsx</code> and save to test HMR
         </p>
       </div>
-      <p {...props(s.readDocs)}>
+      <p {...stylex.props(styles.readDocs)}>
         Click on the Vite, React and StyleX logos to learn more
       </p>
     </>
   );
 }
 
-const spin = keyframes({
+const spin = stylex.keyframes({
   from: { transform: 'rotate(0deg)' },
   to: { transform: 'rotate(360deg)' },
 });
@@ -234,7 +234,7 @@ const spin = keyframes({
 const LIGHT_MODE = '@media (prefers-color-scheme: light)';
 const MEDIA_ANIMATION = '@media (prefers-reduced-motion: no-preference)';
 
-const s = create({
+const styles = stylex.create({
   link: {
     fontWeight: 500,
     color: {
diff --git a/package-lock.json b/package-lock.json
index 1c0d4015..ea68a3e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9370,9 +9370,9 @@
       }
     },
     "node_modules/@webcontainer/api": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@webcontainer/api/-/api-1.1.2.tgz",
-      "integrity": "sha512-Lx4Z9S/11SXeQLuko7XV4/YBX1osCVLMBM1HDiR68+yjLhVqdF6yOMO1SaL43afmt7k3evEvOOT1ckNpIc8rIw==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@webcontainer/api/-/api-1.5.1.tgz",
+      "integrity": "sha512-+ELk+TbTOUx0LawAUdB+nnxaofg/FxUXo/Ac/+CzHSP3SOc3ebBAW3fLo4UZfvJdUW+ygWZOiQMthPLQXvKZEg==",
       "license": "MIT"
     },
     "node_modules/@webpack-cli/configtest": {
@@ -27436,7 +27436,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -27452,7 +27451,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -27468,7 +27466,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -27484,7 +27481,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -27500,7 +27496,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -27516,7 +27511,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -27532,7 +27526,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -27548,7 +27541,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -27564,7 +27556,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -33346,9 +33337,9 @@
       }
     },
     "@webcontainer/api": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@webcontainer/api/-/api-1.1.2.tgz",
-      "integrity": "sha512-Lx4Z9S/11SXeQLuko7XV4/YBX1osCVLMBM1HDiR68+yjLhVqdF6yOMO1SaL43afmt7k3evEvOOT1ckNpIc8rIw=="
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@webcontainer/api/-/api-1.5.1.tgz",
+      "integrity": "sha512-+ELk+TbTOUx0LawAUdB+nnxaofg/FxUXo/Ac/+CzHSP3SOc3ebBAW3fLo4UZfvJdUW+ygWZOiQMthPLQXvKZEg=="
     },
     "@webpack-cli/configtest": {
       "version": "2.1.1",
@@ -46612,6 +46603,60 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz",
       "integrity": "sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw=="
+    },
+    "@next/swc-darwin-arm64": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.1.tgz",
+      "integrity": "sha512-JyxnGCS4qT67hdOKQ0CkgFTp+PXub5W1wsGvIq98TNbF3YEIN7iDekYhYsZzc8Ov0pWEsghQt+tANdidITCLaw==",
+      "optional": true
+    },
+    "@next/swc-darwin-x64": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.1.tgz",
+      "integrity": "sha512-625Z7bb5AyIzswF9hvfZWa+HTwFZw+Jn3lOBNZB87lUS0iuCYDHqk3ujuHCkiyPtSC0xFBtYDLcrZ11mF/ap3w==",
+      "optional": true
+    },
+    "@next/swc-linux-arm64-gnu": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.1.tgz",
+      "integrity": "sha512-iVpn3KG3DprFXzVHM09kvb//4CNNXBQ9NB/pTm8LO+vnnnaObnzFdS5KM+w1okwa32xH0g8EvZIhoB3fI3mS1g==",
+      "optional": true
+    },
+    "@next/swc-linux-arm64-musl": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.1.tgz",
+      "integrity": "sha512-mVsGyMxTLWZXyD5sen6kGOTYVOO67lZjLApIj/JsTEEohDDt1im2nkspzfV5MvhfS7diDw6Rp/xvAQaWZTv1Ww==",
+      "optional": true
+    },
+    "@next/swc-linux-x64-gnu": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.1.tgz",
+      "integrity": "sha512-wMqf90uDWN001NqCM/auRl3+qVVeKfjJdT9XW+RMIOf+rhUzadmYJu++tp2y+hUbb6GTRhT+VjQzcgg/QTD9NQ==",
+      "optional": true
+    },
+    "@next/swc-linux-x64-musl": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.1.tgz",
+      "integrity": "sha512-ol1X1e24w4j4QwdeNjfX0f+Nza25n+ymY0T2frTyalVczUmzkVD7QGgPTZMHfR1aLrO69hBs0G3QBYaj22J5GQ==",
+      "optional": true
+    },
+    "@next/swc-win32-arm64-msvc": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.1.tgz",
+      "integrity": "sha512-WEmTEeWs6yRUEnUlahTgvZteh5RJc4sEjCQIodJlZZ5/VJwVP8p2L7l6VhzQhT4h7KvLx/Ed4UViBdne6zpIsw==",
+      "optional": true
+    },
+    "@next/swc-win32-ia32-msvc": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.1.tgz",
+      "integrity": "sha512-oFpHphN4ygAgZUKjzga7SoH2VGbEJXZa/KL8bHCAwCjDWle6R1SpiGOdUdA8EJ9YsG1TYWpzY6FTbUA+iAJeww==",
+      "optional": true
+    },
+    "@next/swc-win32-x64-msvc": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.1.tgz",
+      "integrity": "sha512-FFp3nOJ/5qSpeWT0BZQ+YE1pSMk4IMpkME/1DwKBwhg4mJLB9L+6EXuJi4JEwaJdl5iN+UUlmUD3IsR1kx5fAg==",
+      "optional": true
     }
   }
 }