diff --git a/app/gui2/package.json b/app/gui2/package.json
index 72281f9792be0..18e96f3709af8 100644
--- a/app/gui2/package.json
+++ b/app/gui2/package.json
@@ -62,6 +62,7 @@
     "semver": "^7.5.4",
     "sucrase": "^3.34.0",
     "vue": "^3.3.4",
+    "vue-react-wrapper": "^0.3.1",
     "ws": "^8.13.0",
     "y-codemirror.next": "^0.3.2",
     "y-protocols": "^1.0.5",
diff --git a/app/gui2/src/components/GraphEditor.vue b/app/gui2/src/components/GraphEditor.vue
index 4ea7340d9a153..54e5e6e78e9e7 100644
--- a/app/gui2/src/components/GraphEditor.vue
+++ b/app/gui2/src/components/GraphEditor.vue
@@ -268,6 +268,8 @@ const graphBindingsHandler = graphBindings.handler({
 
 const handleClick = useDoubleClick(
   (e: MouseEvent) => {
+    console.log('click')
+    toast.info('click')
     graphBindingsHandler(e)
   },
   () => {
diff --git a/app/gui2/src/createApp.ts b/app/gui2/src/createApp.ts
index 360e5f00775c5..ee4cc3279dd2c 100644
--- a/app/gui2/src/createApp.ts
+++ b/app/gui2/src/createApp.ts
@@ -3,7 +3,6 @@ import '@/assets/main.css'
 import type { ApplicationConfig } from '@/util/config'
 import { createPinia } from 'pinia'
 import { createApp } from 'vue'
-import Vue3Toastify, { type ToastContainerOptions } from 'vue3-toastify'
 
 export function mountProjectApp(rootProps: {
   config: ApplicationConfig
@@ -13,13 +12,6 @@ export function mountProjectApp(rootProps: {
 }) {
   const app = createApp(App, rootProps)
   app.use(createPinia())
-  app.use(Vue3Toastify, {
-    position: 'top-center',
-    theme: 'light',
-    closeOnClick: false,
-    draggable: false,
-    toastClassName: 'text-sm leading-170 bg-frame-selected rounded-2xl backdrop-blur-3xl',
-  } as ToastContainerOptions)
   app.mount('#app')
   return app
 }
diff --git a/app/gui2/stories/CodeEditor.story.vue b/app/gui2/stories/CodeEditor.story.vue
index f44c4835d151f..8bb73f8f0c57d 100644
--- a/app/gui2/stories/CodeEditor.story.vue
+++ b/app/gui2/stories/CodeEditor.story.vue
@@ -40,6 +40,7 @@ main =
     responsiveDisabled
     autoPropsDisabled
   >
+    <div class="Toastify"></div>
     <MockProjectStoreWrapper v-model="text">
       <Suspense><CodeEditor class="standalone" /></Suspense>
     </MockProjectStoreWrapper>
diff --git a/app/gui2/stories/GraphEditor.story.vue b/app/gui2/stories/GraphEditor.story.vue
index e6ba30cb13117..5ae077dd60582 100644
--- a/app/gui2/stories/GraphEditor.story.vue
+++ b/app/gui2/stories/GraphEditor.story.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { reactive, ref } from 'vue'
 
 import GraphEditor from '@/components/GraphEditor.vue'
 import { useSuggestionDbStore } from '@/stores/suggestionDatabase'
+import { ToastContainer } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
+import { createReactWrapper } from 'vue-react-wrapper'
 import MockProjectStoreWrapper from './MockProjectStoreWrapper.vue'
 import HstCode from './histoire/HstCode.vue'
 
@@ -32,6 +35,20 @@ main =
     result = run_main benches
     third_node = 2 + 2
 `)
+
+/// Note: These props should be synced with the props in
+// `app/ide-desktop/lib/dashboard/src/authentication/src/components/app.tsx`.
+// We need this here, as the rect component is not part of the dashboard and not usually available in the demo scenes.
+// Using this wrapper enables us to see toasts in the absence of the dashboard/React.
+const toastProps = reactive({
+  position: 'top-center',
+  theme: 'light',
+  closeOnClick: false,
+  draggable: false,
+  toastClassName: 'text-sm leading-170 bg-frame-selected rounded-2xl backdrop-blur-3xl',
+  limit: 3,
+})
+const JSONView = createReactWrapper(ToastContainer, toastProps)
 </script>
 
 <template>
@@ -47,6 +64,7 @@ main =
     responsiveDisabled
     autoPropsDisabled
   >
+    <JSONView />
     <MockProjectStoreWrapper v-model="text">
       <Suspense><GraphEditor /></Suspense>
     </MockProjectStoreWrapper>
diff --git a/package-lock.json b/package-lock.json
index f0e19d4d1015d..bc0637f1987f3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -57,6 +57,7 @@
         "semver": "^7.5.4",
         "sucrase": "^3.34.0",
         "vue": "^3.3.4",
+        "vue-react-wrapper": "^0.3.1",
         "ws": "^8.13.0",
         "y-codemirror.next": "^0.3.2",
         "y-protocols": "^1.0.5",
@@ -4024,12 +4025,10 @@
     },
     "node_modules/@types/prop-types": {
       "version": "15.7.6",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.2.22",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
@@ -4055,7 +4054,6 @@
     },
     "node_modules/@types/scheduler": {
       "version": "0.16.3",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/semver": {
@@ -17678,6 +17676,34 @@
         "eslint": ">=6.0.0"
       }
     },
+    "node_modules/vue-react-wrapper": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/vue-react-wrapper/-/vue-react-wrapper-0.3.1.tgz",
+      "integrity": "sha512-kvG3A+fua1GkSiwO24Dp/i67KTz1yTH55HjxVmfnKtVA91sWoAlx2MZ728ooV4PKDt7LCapyPdJesoylPmHkUg==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/react": "./src/react-types/react",
+        "@types/react-dom": "18.0.3",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2",
+        "react": "^18.1.0",
+        "react-dom": "^18.1.0"
+      },
+      "engines": {
+        "pnpm": ">=7"
+      },
+      "peerDependencies": {
+        "vue": "^3"
+      }
+    },
+    "node_modules/vue-react-wrapper/node_modules/@types/react-dom": {
+      "version": "18.0.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.3.tgz",
+      "integrity": "sha512-1RRW9kst+67gveJRYPxGmVy8eVJ05O43hg77G2j5m76/RFJtMbcfAs2viQ2UNsvvDg8F7OfQZx8qQcl6ymygaQ==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/vue-resize": {
       "version": "2.0.0-alpha.1",
       "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",