diff --git a/packages/playground/src/shared/dom/Scene.tsx b/packages/playground/src/shared/dom/Scene.tsx
index df2f82e322..d582c12915 100644
--- a/packages/playground/src/shared/dom/Scene.tsx
+++ b/packages/playground/src/shared/dom/Scene.tsx
@@ -1,7 +1,13 @@
-import { getStudioSync} from '@theatre/core'
+import {getStudio, getStudioSync} from '@theatre/core'
 import type {UseDragOpts} from './useDrag'
 import useDrag from './useDrag'
-import React, {useLayoutEffect, useMemo, useRef, useState} from 'react'
+import React, {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import type {
   IProject,
   ISheet,
@@ -182,10 +188,14 @@ export const Scene: React.FC<{project: IProject}> = ({project}) => {
   const sheet = project.sheet('Scene', 'default')
   const [selection, setSelection] = useState<IStudio['selection']>()
 
-  useLayoutEffect(() => {
-    return getStudioSync()!.onSelectionChange((newState) => {
-      setSelection(newState)
+  useEffect(() => {
+    let unsubscribe = () => {}
+    getStudio().then((studio) => {
+      unsubscribe = studio.onSelectionChange((newState) => {
+        setSelection(newState)
+      })
     })
+    return () => unsubscribe()
   }, [])
 
   const containerRef = useRef<HTMLDivElement>(null!)
diff --git a/packages/playground/src/shared/dom/index.tsx b/packages/playground/src/shared/dom/index.tsx
index 7404cbf9ca..1de3d5181c 100644
--- a/packages/playground/src/shared/dom/index.tsx
+++ b/packages/playground/src/shared/dom/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import theatre from '@theatre/core'
+import '@theatre/studio'
 import {getProject} from '@theatre/core'
 import {Scene} from './Scene'