diff --git a/apps/workflows-dashboard/package.json b/apps/workflows-dashboard/package.json
index dd1a34b3d9..5f4ca4ff1a 100644
--- a/apps/workflows-dashboard/package.json
+++ b/apps/workflows-dashboard/package.json
@@ -45,6 +45,7 @@
     "react": "^18.2.0",
     "react-custom-scrollbars": "^4.2.1",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.13",
     "react-hook-form": "^7.43.9",
     "react-json-view": "^1.21.3",
     "react-router-dom": "^6.11.2",
diff --git a/apps/workflows-dashboard/src/components/organisms/XstateVisualizer/XstateVisualizer.tsx b/apps/workflows-dashboard/src/components/organisms/XstateVisualizer/XstateVisualizer.tsx
index 47365ad0ee..1552f2b843 100644
--- a/apps/workflows-dashboard/src/components/organisms/XstateVisualizer/XstateVisualizer.tsx
+++ b/apps/workflows-dashboard/src/components/organisms/XstateVisualizer/XstateVisualizer.tsx
@@ -2,6 +2,7 @@ import { deserializeStateDefinition } from '@/components/organisms/XstateVisuali
 import { inspect } from '@xstate/inspect';
 import { useInterpret, useMachine } from '@xstate/react';
 import { memo, useLayoutEffect, useMemo, useRef } from 'react';
+import { withErrorBoundary } from 'react-error-boundary';
 import { createMachine } from 'xstate';
 
 interface Props {
@@ -9,38 +10,45 @@ interface Props {
   state?: string;
 }
 
-export const XstateVisualizer = memo(({ stateDefinition, state }: Props) => {
-  const _machine = useMemo(
-    () =>
-      createMachine(
-        deserializeStateDefinition({
-          ...stateDefinition,
-          initial: state || stateDefinition.initial,
-        }),
-      ),
-    [stateDefinition, state],
-  );
-  const [stateMachine] = useMachine(_machine);
+export const XstateVisualizer = memo(
+  withErrorBoundary(
+    ({ stateDefinition, state }: Props) => {
+      const _machine = useMemo(
+        () =>
+          createMachine(
+            deserializeStateDefinition({
+              ...stateDefinition,
+              initial: state || stateDefinition.initial,
+            }),
+          ),
+        [stateDefinition, state],
+      );
+      const [stateMachine] = useMachine(_machine);
 
-  useInterpret(_machine, { devTools: true });
+      useInterpret(_machine, { devTools: true });
 
-  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+      const iframeRef = useRef<HTMLIFrameElement | null>(null);
 
-  useLayoutEffect(() => {
-    if (!iframeRef.current) return;
+      useLayoutEffect(() => {
+        if (!iframeRef.current) return;
 
-    inspect({ iframe: iframeRef.current });
-  }, [iframeRef, state, stateMachine.value]);
+        inspect({ iframe: iframeRef.current });
+      }, [iframeRef, state, stateMachine.value]);
 
-  return (
-    <div className="h-full w-full">
-      <iframe
-        ref={iframeRef}
-        data-xstate
-        style={{ width: 'calc(100% + clamp(40rem, 40rem + 0px, 100%))' }}
-        // width="100%"
-        height="100%"
-      />
-    </div>
-  );
-});
+      return (
+        <div className="h-full w-full">
+          <iframe
+            ref={iframeRef}
+            data-xstate
+            style={{ width: 'calc(100% + clamp(40rem, 40rem + 0px, 100%))' }}
+            // width="100%"
+            height="100%"
+          />
+        </div>
+      );
+    },
+    {
+      fallbackRender: ({ error }) => <span>{error.message}</span>,
+    },
+  ),
+);
diff --git a/apps/workflows-dashboard/src/pages/WorkflowDefinition/WorkflowDefinition.tsx b/apps/workflows-dashboard/src/pages/WorkflowDefinition/WorkflowDefinition.tsx
index 9d2d8c94d7..2644ed8f53 100644
--- a/apps/workflows-dashboard/src/pages/WorkflowDefinition/WorkflowDefinition.tsx
+++ b/apps/workflows-dashboard/src/pages/WorkflowDefinition/WorkflowDefinition.tsx
@@ -5,6 +5,7 @@ import { DashboardLayout } from '@/components/layouts/DashboardLayout';
 import { XstateVisualizer } from '@/components/organisms/XstateVisualizer';
 import { IWorkflow } from '@/domains/workflows/api/workflow';
 import { EditorCard } from '@/pages/WorkflowDefinition/components/EditorCard';
+import { WorkflowDefinitionEditor } from '@/pages/WorkflowDefinition/components/WorkflowDefinitionEditor/WorkflowDefinitionEditor';
 import { WorkflowDefinitionSummaryCard } from '@/pages/WorkflowDefinition/components/WorkflowDefinitionSummaryCard';
 import { useUpgradeWorkflowDefinitionVersionMutation } from '@/pages/WorkflowDefinition/hooks/useUpgradeWorkflowDefinitionVersionMutation';
 import { useWorkflowDefinitionEdit } from '@/pages/WorkflowDefinition/hooks/useWorkflowDefinitionEdit';
@@ -83,12 +84,7 @@ export const WorkflowDefinition = () => {
         </div>
         <div className="flex flex-row gap-2">
           <div className="w-1/2">
-            <EditorCard
-              title="Workflow Definition"
-              value={workflowDefinitionValue || {}}
-              onSave={workflowDefinitionValue ? handleWorkflowDefinitionSave : undefined}
-              onUpgrade={() => upgradeWorkflowDefinitionVersion({ workflowDefinitionId: data.id! })}
-            />
+            <WorkflowDefinitionEditor workflowDefinition={data} />
           </div>
           <div className="w-1/2">
             <EditorCard
diff --git a/apps/workflows-dashboard/src/pages/WorkflowDefinition/components/WorkflowDefinitionEditor/WorkflowDefinitionEditor.tsx b/apps/workflows-dashboard/src/pages/WorkflowDefinition/components/WorkflowDefinitionEditor/WorkflowDefinitionEditor.tsx
new file mode 100644
index 0000000000..43771f11af
--- /dev/null
+++ b/apps/workflows-dashboard/src/pages/WorkflowDefinition/components/WorkflowDefinitionEditor/WorkflowDefinitionEditor.tsx
@@ -0,0 +1,33 @@
+import { IWorkflowDefinition } from '@/domains/workflow-definitions';
+import { EditorCard } from '@/pages/WorkflowDefinition/components/EditorCard';
+import { useUpgradeWorkflowDefinitionVersionMutation } from '@/pages/WorkflowDefinition/hooks/useUpgradeWorkflowDefinitionVersionMutation';
+import { useWorkflowDefinitionEdit } from '@/pages/WorkflowDefinition/hooks/useWorkflowDefinitionEdit';
+import { FunctionComponent } from 'react';
+
+interface WorkflowDefinitionEditorProps {
+  workflowDefinition: IWorkflowDefinition;
+}
+
+export const WorkflowDefinitionEditor: FunctionComponent<WorkflowDefinitionEditorProps> = ({
+  workflowDefinition,
+}) => {
+  const { workflowDefinitionValue, handleWorkflowDefinitionSave } =
+    useWorkflowDefinitionEdit(workflowDefinition);
+  const { mutate: upgradeWorkflowDefinitionVersion } =
+    useUpgradeWorkflowDefinitionVersionMutation();
+
+  return (
+    <EditorCard
+      title="Workflow Definition"
+      value={workflowDefinitionValue || {}}
+      onSave={
+        workflowDefinitionValue
+          ? definition => handleWorkflowDefinitionSave(definition as any)
+          : undefined
+      }
+      onUpgrade={() =>
+        upgradeWorkflowDefinitionVersion({ workflowDefinitionId: workflowDefinition.id })
+      }
+    />
+  );
+};
diff --git a/apps/workflows-dashboard/src/pages/WorkflowDefinition/components/WorkflowDefinitionEditor/index.ts b/apps/workflows-dashboard/src/pages/WorkflowDefinition/components/WorkflowDefinitionEditor/index.ts
new file mode 100644
index 0000000000..0cea18a851
--- /dev/null
+++ b/apps/workflows-dashboard/src/pages/WorkflowDefinition/components/WorkflowDefinitionEditor/index.ts
@@ -0,0 +1 @@
+export * from './WorkflowDefinitionEditor';
diff --git a/apps/workflows-dashboard/src/pages/WorkflowDefinition/hooks/useWorkflowDefinitionEdit/useWorkflowDefinitionEdit.ts b/apps/workflows-dashboard/src/pages/WorkflowDefinition/hooks/useWorkflowDefinitionEdit/useWorkflowDefinitionEdit.ts
index 322a08beb4..4a9d9cf681 100644
--- a/apps/workflows-dashboard/src/pages/WorkflowDefinition/hooks/useWorkflowDefinitionEdit/useWorkflowDefinitionEdit.ts
+++ b/apps/workflows-dashboard/src/pages/WorkflowDefinition/hooks/useWorkflowDefinitionEdit/useWorkflowDefinitionEdit.ts
@@ -6,6 +6,7 @@ export const useWorkflowDefinitionEdit = (workflowDefinition: IWorkflowDefinitio
   const [workflowDefinitionValue, setWorkflowDefinitionValue] = useState(
     workflowDefinition?.definition,
   );
+  const [validationError, setValidationError] = useState<string | null>(null);
   const { mutate, isLoading } = useWorkflowDefinitionUpdateMutation();
 
   useEffect(() => {
@@ -13,14 +14,14 @@ export const useWorkflowDefinitionEdit = (workflowDefinition: IWorkflowDefinitio
   }, [workflowDefinition]);
 
   const handleWorkflowDefinitionSave = useCallback(
-    (value: object) => {
+    (definition: object) => {
       if (!workflowDefinition) return;
 
-      setWorkflowDefinitionValue(value);
+      setWorkflowDefinitionValue(definition);
 
       mutate({
         workflowDefinitionId: workflowDefinition.id!,
-        definition: value,
+        definition: definition,
       });
     },
     [workflowDefinition],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a1c88be474..fd1c8dc542 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -734,6 +734,9 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.3.1(react@18.3.1)
+      react-error-boundary:
+        specifier: ^4.0.13
+        version: 4.0.13(react@18.3.1)
       react-hook-form:
         specifier: ^7.43.9
         version: 7.52.1(react@18.3.1)
@@ -8931,7 +8934,7 @@ packages:
       magic-string: 0.27.0
       react-docgen-typescript: 2.2.2(typescript@4.9.5)
       typescript: 4.9.5
-      vite: 4.5.3(@types/node@20.14.11)
+      vite: 4.5.3(@types/node@18.17.19)
     dev: true
 
   /@joshwooding/vite-plugin-react-docgen-typescript@0.3.0(typescript@5.1.6)(vite@4.5.3):
@@ -13612,7 +13615,7 @@ packages:
       react: 18.3.1
       react-docgen: 7.0.3
       react-dom: 18.3.1(react@18.3.1)
-      vite: 4.5.3(@types/node@20.14.11)
+      vite: 4.5.3(@types/node@18.17.19)
     transitivePeerDependencies:
       - '@preact/preset-vite'
       - encoding
@@ -16153,7 +16156,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': 7.24.7(@babel/core@7.24.9)
       '@types/babel__core': 7.20.5
       react-refresh: 0.14.2
-      vite: 4.5.3(@types/node@18.17.19)
+      vite: 4.5.3(@types/node@20.14.11)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -31624,7 +31627,7 @@ packages:
       strip-ansi: 6.0.1
       tiny-invariant: 1.3.3
       typescript: 5.5.3
-      vite: 4.5.3(@types/node@18.17.19)
+      vite: 4.5.3(@types/node@20.14.11)
       vscode-languageclient: 7.0.0
       vscode-languageserver: 7.0.0
       vscode-languageserver-textdocument: 1.0.11
@@ -31735,7 +31738,7 @@ packages:
       debug: 4.3.5(supports-color@8.1.1)
       globrex: 0.1.2
       tsconfck: 3.1.1(typescript@4.9.5)
-      vite: 4.5.3(@types/node@20.14.11)
+      vite: 4.5.3(@types/node@18.17.19)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -31768,7 +31771,7 @@ packages:
       debug: 4.3.5(supports-color@8.1.1)
       globrex: 0.1.2
       tsconfck: 3.1.1(typescript@5.5.3)
-      vite: 4.5.3(@types/node@18.17.19)
+      vite: 4.5.3(@types/node@20.14.11)
     transitivePeerDependencies:
       - supports-color
       - typescript