diff --git a/package-lock.json b/package-lock.json
index b726b3b..4c4627a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1258,6 +1258,16 @@
         "ws": "^8.16.0"
       }
     },
+    "node_modules/@mml-io/mml-react-types": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/@mml-io/mml-react-types/-/mml-react-types-0.17.1.tgz",
+      "integrity": "sha512-CFzHxl/ZQGqSSFQU8a5d1IsQOwLYNVA3QXeFdnYwC1nzjZ8AtfOwGTcODcWmGBah6qqBYd9Xp/M6ku/ncBb4hQ==",
+      "dev": true,
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "*"
+      }
+    },
     "node_modules/@mml-io/model-loader": {
       "version": "0.15.0",
       "resolved": "https://registry.npmjs.org/@mml-io/model-loader/-/model-loader-0.15.0.tgz",
@@ -14048,6 +14058,9 @@
         "@types/react-dom": "18.3.0",
         "react": "18.3.1",
         "react-dom": "18.3.1"
+      },
+      "devDependencies": {
+        "@mml-io/mml-react-types": "0.17.1"
       }
     },
     "packages/server": {
diff --git a/packages/playground/package.json b/packages/playground/package.json
index ae716b1..1882b82 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -13,5 +13,8 @@
     "react-dom": "18.3.1",
     "@types/react": "18.3.2",
     "@types/react-dom": "18.3.0"
+  },
+  "devDependencies": {
+    "@mml-io/mml-react-types": "0.17.1"
   }
 }
diff --git a/packages/playground/src/Slot.tsx b/packages/playground/src/Slot.tsx
index 92b8b9c..45c2e93 100644
--- a/packages/playground/src/Slot.tsx
+++ b/packages/playground/src/Slot.tsx
@@ -1,3 +1,4 @@
+import { MMLClickEvent } from "@mml-io/mml-react-types";
 import * as React from "react";
 import { useEffect, useState } from "react";
 
@@ -85,13 +86,12 @@ export function Slot(props: { x: number; z: number; demo?: { url: string; title:
     >
       {loadedState ? (
         <>
-          <m-frame className="document-frame" y="0.2" src={loadedState.url}></m-frame>
+          <m-frame y="0.2" src={loadedState.url}></m-frame>
           <m-group
-            className="remove-document"
             visible-to={loadedState.removable ? loadedState.userId : ""}
             x={(SLOT_WIDTH - SLOT_BORDER_THICKNESS) / 2}
             z={(SLOT_DEPTH - SLOT_BORDER_THICKNESS) / 2}
-            onClick={(event: CustomEvent<{ connectionId: number }>) => {
+            onClick={(event: MMLClickEvent) => {
               const { connectionId } = event.detail;
               if (loadedState && loadedState.removable && loadedState.userId === connectionId) {
                 setLoadedState(null);
diff --git a/packages/playground/tsconfig.json b/packages/playground/tsconfig.json
index fc8b2d5..12c245d 100644
--- a/packages/playground/tsconfig.json
+++ b/packages/playground/tsconfig.json
@@ -5,6 +5,7 @@
     "target": "ES2020",
     "jsx": "react-jsx",
     "lib": ["esnext", "dom", "dom.iterable"],
+    "types": ["react", "react-dom", "node", "@mml-io/mml-react-types"],
     "noImplicitAny": true,
     "strictNullChecks": true,
     "strictFunctionTypes": true,