diff --git a/package.json b/package.json
index 44512967..e97639ab 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "@supabase/supabase-js": "^1.22.5",
     "@xstate/graph": "^1.3.0",
     "@xstate/inspect": "^0.4.1",
-    "@xstate/react": "^1.5.1",
+    "@xstate/react": "^2.0.0",
     "date-fns": "^2.22.1",
     "elkjs": "^0.7.1",
     "framer-motion": "^4",
@@ -30,7 +30,7 @@
     "realms-shim": "^1.2.2",
     "web-vitals": "^1.0.1",
     "web-worker": "^1.0.0",
-    "xstate": "^4.26.0"
+    "xstate": "^4.29.0"
   },
   "scripts": {
     "start": "concurrently \"npm:start:app\" \"npm:graphql:codegen\"",
diff --git a/src/CanvasContainer.tsx b/src/CanvasContainer.tsx
index a816a514..50fc2642 100644
--- a/src/CanvasContainer.tsx
+++ b/src/CanvasContainer.tsx
@@ -49,6 +49,7 @@ const dragModel = createModel(
 
 const dragMachine = dragModel.createMachine(
   {
+    tsTypes: {} as import("./CanvasContainer.typegen").Typegen0,
     preserveActionOrder: true,
     initial: 'checking_if_disabled',
     states: {
@@ -282,7 +283,7 @@ export const CanvasContainer: React.FC<{ panModeEnabled: boolean }> = ({
   const [state, send] = useMachine(dragMachine, {
     actions: {
       sendPanChange: actions.send(
-        (_, ev: any) => {
+        (_, ev) => {
           // we need to translate a pointer move to the viewbox move
           // and that is going into the opposite direction than the pointer
           return canvasModel.events.PAN(-ev.delta.x, -ev.delta.y);
diff --git a/src/CanvasContainer.typegen.ts b/src/CanvasContainer.typegen.ts
new file mode 100644
index 00000000..45715f09
--- /dev/null
+++ b/src/CanvasContainer.typegen.ts
@@ -0,0 +1,70 @@
+// This file was automatically generated. Edits will be overwritten
+
+export interface Typegen0 {
+  '@@xstate/typegen': true;
+  eventsCausingActions: {
+    sendPanChange: 'POINTER_MOVED_BY';
+    enableTextSelection: string;
+    disableTextSelection: 'ENABLE_PANNING';
+  };
+  internalEvents: {};
+  invokeSrcNameMap: {
+    invokeDetectLock: 'done.invoke.(machine).enabled.mode.lockable.released:invocation[0]';
+    wheelPressListener: 'done.invoke.(machine).enabled.mode.lockable.released:invocation[1]';
+    invokeDetectRelease: 'done.invoke.(machine).enabled.mode.lockable.locked:invocation[0]';
+  };
+  missingImplementations: {
+    actions: 'sendPanChange';
+    services: never;
+    guards: 'isPanDisabled';
+    delays: never;
+  };
+  eventsCausingServices: {
+    invokeDetectLock: 'RELEASE' | 'DRAG_SESSION_STOPPED';
+    wheelPressListener: 'RELEASE' | 'DRAG_SESSION_STOPPED';
+    invokeDetectRelease: 'LOCK';
+  };
+  eventsCausingGuards: {
+    isPanDisabled: string;
+  };
+  eventsCausingDelays: {};
+  matchesStates:
+    | 'checking_if_disabled'
+    | 'permanently_disabled'
+    | 'enabled'
+    | 'enabled.mode'
+    | 'enabled.mode.lockable'
+    | 'enabled.mode.lockable.released'
+    | 'enabled.mode.lockable.locked'
+    | 'enabled.mode.lockable.wheelPressed'
+    | 'enabled.mode.pan'
+    | 'enabled.panning'
+    | 'enabled.panning.disabled'
+    | 'enabled.panning.enabled'
+    | 'enabled.panning.enabled.idle'
+    | 'enabled.panning.enabled.active'
+    | 'enabled.panning.enabled.active.grabbed'
+    | 'enabled.panning.enabled.active.dragging'
+    | 'enabled.panning.enabled.active.done'
+    | {
+        enabled?:
+          | 'mode'
+          | 'panning'
+          | {
+              mode?:
+                | 'lockable'
+                | 'pan'
+                | { lockable?: 'released' | 'locked' | 'wheelPressed' };
+              panning?:
+                | 'disabled'
+                | 'enabled'
+                | {
+                    enabled?:
+                      | 'idle'
+                      | 'active'
+                      | { active?: 'grabbed' | 'dragging' | 'done' };
+                  };
+            };
+      };
+  tags: never;
+}
diff --git a/src/EditorPanel.tsx b/src/EditorPanel.tsx
index 4f6f1a19..e284d237 100644
--- a/src/EditorPanel.tsx
+++ b/src/EditorPanel.tsx
@@ -12,7 +12,14 @@ import { useActor, useMachine, useSelector } from '@xstate/react';
 import { editor, Range } from 'monaco-editor';
 import dynamic from 'next/dynamic';
 import React from 'react';
-import { ActorRefFrom, assign, DoneInvokeEvent, send, spawn } from 'xstate';
+import {
+  ActorRefFrom,
+  assign,
+  DoneInvokeEvent,
+  send,
+  spawn,
+  StateNode,
+} from 'xstate';
 import { createModel } from 'xstate/lib/model';
 import { useAuth } from './authContext';
 import { CommandPalette } from './CommandPalette';
@@ -83,9 +90,9 @@ const editorPanelModel = createModel(
     notifRef: undefined! as ActorRefFrom<typeof notifMachine>,
     monacoRef: null as Monaco | null,
     standaloneEditorRef: null as editor.IStandaloneCodeEditor | null,
-    sourceRef: null as SourceMachineActorRef,
+    sourceRef: null as unknown as SourceMachineActorRef,
     mainFile: 'main.ts',
-    machines: null as AnyStateMachine[] | null,
+    machines: null as ReturnType<typeof parseMachines> | null,
     deltaDecorations: [] as string[],
   },
   {
@@ -107,6 +114,14 @@ const editorPanelModel = createModel(
 
 const editorPanelMachine = editorPanelModel.createMachine(
   {
+    tsTypes: {} as import("./EditorPanel.typegen").Typegen0,
+    schema: {} as {
+      services: {
+        parseMachines: {
+          data: ReturnType<typeof parseMachines>;
+        };
+      };
+    },
     entry: [assign({ notifRef: () => spawn(notifMachine) })],
     initial: 'booting',
     states: {
@@ -185,48 +200,10 @@ const editorPanelMachine = editorPanelModel.createMachine(
       compiling: {
         tags: ['visualizing'],
         invoke: {
-          src: async (ctx) => {
-            const monaco = ctx.monacoRef!;
-            const uri = monaco.Uri.parse(ctx.mainFile);
-            const tsWoker = await monaco.languages.typescript
-              .getTypeScriptWorker()
-              .then((worker) => worker(uri));
-
-            const syntaxErrors = await tsWoker.getSyntacticDiagnostics(
-              uri.toString(),
-            );
-
-            if (syntaxErrors.length > 0) {
-              const model = ctx.monacoRef?.editor.getModel(uri);
-              // Only report one error at a time
-              const error = syntaxErrors[0];
-
-              const start = model?.getPositionAt(error.start!);
-              const end = model?.getPositionAt(error.start! + error.length!);
-              const errorRange = new ctx.monacoRef!.Range(
-                start?.lineNumber!,
-                0, // beginning of the line where error occured
-                end?.lineNumber!,
-                end?.column!,
-              );
-              return Promise.reject(
-                new SyntaxError(error.messageText.toString(), errorRange),
-              );
-            }
-
-            const compiledSource = await tsWoker
-              .getEmitOutput(uri.toString())
-              .then((result) => result.outputFiles[0].text);
-
-            return parseMachines(compiledSource);
-          },
+          src: 'parseMachines',
           onDone: {
             target: 'updating',
-            actions: [
-              assign({
-                machines: (_, e: any) => e.data,
-              }),
-            ],
+            actions: ['assignParsedMachinesToContext'],
           },
           onError: [
             {
@@ -276,13 +253,15 @@ const editorPanelMachine = editorPanelModel.createMachine(
     guards: {
       isGist: (ctx) =>
         ctx.sourceRef.getSnapshot()!.context.sourceProvider === 'gist',
-      isSyntaxError: (_, e: any) => e.data instanceof SyntaxError,
+      isSyntaxError: (_, e) => e.data instanceof SyntaxError,
     },
     actions: {
-      broadcastError: send((_, e: any) => ({
+      assignParsedMachinesToContext: assign({
+        machines: (_, e) => e.data,
+      }),
+      broadcastError: send((_, e) => ({
         type: 'EDITOR_ENCOUNTERED_ERROR',
-        title: e.data.title,
-        message: e.data.message,
+        message: (e.data as Error).message,
       })),
       addDecorations: assign({
         deltaDecorations: (ctx, e) => {
@@ -322,6 +301,41 @@ const editorPanelMachine = editorPanelModel.createMachine(
         editor?.revealLineInCenterIfOutsideViewport(range.startLineNumber);
       },
     },
+    services: {
+      parseMachines: async (ctx) => {
+        const monaco = ctx.monacoRef!;
+        const uri = monaco.Uri.parse(ctx.mainFile);
+        const tsWoker = await monaco.languages.typescript
+          .getTypeScriptWorker()
+          .then((worker) => worker(uri));
+
+        const syntaxErrors = await tsWoker.getSyntacticDiagnostics(
+          uri.toString(),
+        );
+
+        if (syntaxErrors.length > 0) {
+          const model = ctx.monacoRef?.editor.getModel(uri);
+          // Only report one error at a time
+          const error = syntaxErrors[0];
+
+          const start = model?.getPositionAt(error.start!);
+          const end = model?.getPositionAt(error.start! + error.length!);
+          const errorRange = new ctx.monacoRef!.Range(
+            start?.lineNumber!,
+            0, // beginning of the line where error occured
+            end?.lineNumber!,
+            end?.column!,
+          );
+          throw new SyntaxError(error.messageText.toString(), errorRange);
+        }
+
+        const compiledSource = await tsWoker
+          .getEmitOutput(uri.toString())
+          .then((result) => result.outputFiles[0].text);
+
+        return parseMachines(compiledSource);
+      },
+    },
   },
 );
 
@@ -373,7 +387,7 @@ export const EditorPanel: React.FC<{
   onSave: () => void;
   onFork: () => void;
   onCreateNew: () => void;
-  onChange: (machine: AnyStateMachine[]) => void;
+  onChange: (machine: ReturnType<typeof parseMachines>) => void;
   onChangedCodeValue: (code: string) => void;
 }> = ({ onSave, onChange, onChangedCodeValue, onFork, onCreateNew }) => {
   const embed = useEmbed();
@@ -512,8 +526,6 @@ export const EditorPanel: React.FC<{
                 {sourceOwnershipStatus === 'user-owns-source' &&
                   !embed?.isEmbedded && (
                     <Button
-                      disabled={sourceState.hasTag('forking')}
-                      isLoading={sourceState.hasTag('forking')}
                       onClick={() => {
                         onFork();
                       }}
diff --git a/src/EditorPanel.typegen.ts b/src/EditorPanel.typegen.ts
new file mode 100644
index 00000000..fe90d4cd
--- /dev/null
+++ b/src/EditorPanel.typegen.ts
@@ -0,0 +1,58 @@
+// This file was automatically generated. Edits will be overwritten
+
+export interface Typegen0 {
+  '@@xstate/typegen': true;
+  eventsCausingActions: {
+    onChangedCodeValue: 'EDITOR_CHANGED_VALUE';
+    clearDecorations: 'EDITOR_CHANGED_VALUE';
+    onChange: 'UPDATE_MACHINE_PRESSED';
+    broadcastError:
+      | 'error.platform.(machine).booting.fixing_gist_imports:invocation[0]'
+      | 'error.platform.(machine).compiling:invocation[0]';
+    assignParsedMachinesToContext: 'done.invoke.(machine).compiling:invocation[0]';
+    addDecorations: 'error.platform.(machine).compiling:invocation[0]';
+    scrollToLineWithError: 'error.platform.(machine).compiling:invocation[0]';
+  };
+  internalEvents: {
+    'error.platform.(machine).booting.fixing_gist_imports:invocation[0]': {
+      type: 'error.platform.(machine).booting.fixing_gist_imports:invocation[0]';
+      data: unknown;
+    };
+    'error.platform.(machine).compiling:invocation[0]': {
+      type: 'error.platform.(machine).compiling:invocation[0]';
+      data: unknown;
+    };
+    'done.invoke.(machine).compiling:invocation[0]': {
+      type: 'done.invoke.(machine).compiling:invocation[0]';
+      data: unknown;
+      __tip: 'See the XState TS docs to learn how to strongly type this.';
+    };
+  };
+  invokeSrcNameMap: {
+    parseMachines: 'done.invoke.(machine).compiling:invocation[0]';
+  };
+  missingImplementations: {
+    actions: 'onChangedCodeValue' | 'onChange';
+    services: never;
+    guards: never;
+    delays: never;
+  };
+  eventsCausingServices: {
+    parseMachines: 'COMPILE' | 'done.state.(machine).booting';
+  };
+  eventsCausingGuards: {
+    isGist: 'EDITOR_READY';
+    isSyntaxError: 'error.platform.(machine).compiling:invocation[0]';
+  };
+  eventsCausingDelays: {};
+  matchesStates:
+    | 'booting'
+    | 'booting.waiting_for_monaco'
+    | 'booting.fixing_gist_imports'
+    | 'booting.done'
+    | 'active'
+    | 'updating'
+    | 'compiling'
+    | { booting?: 'waiting_for_monaco' | 'fixing_gist_imports' | 'done' };
+  tags: 'visualizing';
+}
diff --git a/src/EmbedPreview.tsx b/src/EmbedPreview.tsx
index 717ce212..f537e8a9 100644
--- a/src/EmbedPreview.tsx
+++ b/src/EmbedPreview.tsx
@@ -59,7 +59,8 @@ const extractFormData = (form: HTMLFormElement): ParsedEmbed => {
 /**
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox
  */
-const getEmbedCodeFromUrl = (embedUrl: string) => `<iframe src="${embedUrl}" sandbox="allow-same-origin allow-scripts"></iframe>`;
+const getEmbedCodeFromUrl = (embedUrl: string) =>
+  `<iframe src="${embedUrl}" sandbox="allow-same-origin allow-scripts"></iframe>`;
 
 const embedPreviewModel = createModel(
   {
@@ -91,6 +92,7 @@ const embedPreviewModel = createModel(
 );
 
 const embedPreviewMachine = embedPreviewModel.createMachine({
+  tsTypes: {} as import("./EmbedPreview.typegen").Typegen0,
   id: 'preview',
   type: 'parallel',
   preserveActionOrder: false, // TODO: remove this after we figured why this makes a bug
@@ -101,11 +103,7 @@ const embedPreviewMachine = embedPreviewModel.createMachine({
         ready: {
           entry: [
             'makeEmbedUrlAndCode',
-            pure((ctx: ContextFrom<typeof embedPreviewModel>) => {
-              if (!ctx.loaded) {
-                return { type: 'makePreviewUrl' };
-              }
-            }),
+            'makePreviewUrl',
             'updateEmbedCopy',
             send('PREVIEW'),
           ],
@@ -220,6 +218,7 @@ const EmbedPreviewContent: React.FC = () => {
         };
       }),
       makePreviewUrl: assign((ctx) => {
+        if (!ctx.loaded) return {};
         const url = makeEmbedUrl(
           router.query.sourceFileId as string,
           window.location.origin,
diff --git a/src/EmbedPreview.typegen.ts b/src/EmbedPreview.typegen.ts
new file mode 100644
index 00000000..7b9cc67f
--- /dev/null
+++ b/src/EmbedPreview.typegen.ts
@@ -0,0 +1,40 @@
+// This file was automatically generated. Edits will be overwritten
+
+export interface Typegen0 {
+  '@@xstate/typegen': true;
+  eventsCausingActions: {
+    saveParams: 'PARAMS_CHANGED';
+    makeEmbedUrlAndCode: 'PARAMS_CHANGED';
+    makePreviewUrl: 'PARAMS_CHANGED';
+    updateEmbedCopy: 'PARAMS_CHANGED';
+  };
+  internalEvents: {};
+  invokeSrcNameMap: {};
+  missingImplementations: {
+    actions:
+      | 'saveParams'
+      | 'makeEmbedUrlAndCode'
+      | 'makePreviewUrl'
+      | 'updateEmbedCopy';
+    services: never;
+    guards: never;
+    delays: never;
+  };
+  eventsCausingServices: {};
+  eventsCausingGuards: {};
+  eventsCausingDelays: {};
+  matchesStates:
+    | 'form'
+    | 'form.ready'
+    | 'iframe'
+    | 'iframe.idle'
+    | 'iframe.updating'
+    | 'iframe.loading'
+    | 'iframe.loaded'
+    | 'iframe.error'
+    | {
+        form?: 'ready';
+        iframe?: 'idle' | 'updating' | 'loading' | 'loaded' | 'error';
+      };
+  tags: 'preview_loading' | 'preview_error';
+}
diff --git a/src/ResizableBox.tsx b/src/ResizableBox.tsx
index 497f61d2..e90ea353 100644
--- a/src/ResizableBox.tsx
+++ b/src/ResizableBox.tsx
@@ -29,6 +29,7 @@ const resizableModel = createModel(
 );
 
 const resizableMachine = resizableModel.createMachine({
+  tsTypes: {} as import("./ResizableBox.typegen").Typegen0,
   invoke: {
     id: 'dragSessionTracker',
     src: (ctx) =>
diff --git a/src/ResizableBox.typegen.ts b/src/ResizableBox.typegen.ts
new file mode 100644
index 00000000..80e8edcf
--- /dev/null
+++ b/src/ResizableBox.typegen.ts
@@ -0,0 +1,19 @@
+// This file was automatically generated. Edits will be overwritten
+
+export interface Typegen0 {
+  '@@xstate/typegen': true;
+  eventsCausingActions: {};
+  internalEvents: {};
+  invokeSrcNameMap: {};
+  missingImplementations: {
+    actions: never;
+    services: never;
+    guards: never;
+    delays: never;
+  };
+  eventsCausingServices: {};
+  eventsCausingGuards: {};
+  eventsCausingDelays: {};
+  matchesStates: 'idle' | 'active';
+  tags: never;
+}
diff --git a/src/ShareButton.tsx b/src/ShareButton.tsx
index 374d2871..181c91ea 100644
--- a/src/ShareButton.tsx
+++ b/src/ShareButton.tsx
@@ -24,7 +24,7 @@ const useShareButton = (linkText: string) => {
 
   const [state, send] = useMachine(shareMachine, {
     actions: {
-      copyLinkToClipboard: () => {
+      copyLinkToClipboard: (context) => {
         clipboard.onCopy();
       },
     },
diff --git a/src/TransitionViz.tsx b/src/TransitionViz.tsx
index 6d91936b..894f7e5a 100644
--- a/src/TransitionViz.tsx
+++ b/src/TransitionViz.tsx
@@ -1,11 +1,11 @@
 import { useSelector } from '@xstate/react';
 import React, { useMemo } from 'react';
-import type { AnyStateNodeDefinition, Guard } from 'xstate';
+import type { AnyStateNodeDefinition, Guard, StateFrom } from 'xstate';
 import { DirectedGraphEdge } from './directedGraph';
 import { EventTypeViz, toDelayString } from './EventTypeViz';
 import { Point } from './pathUtils';
 import { useSimulation } from './SimulationContext';
-import { AnyStateMachine, StateFrom } from './types';
+import { AnyStateMachine } from './types';
 import { toSCXMLEvent } from 'xstate/lib/utils';
 import { simulationMachine } from './simulationMachine';
 import { ActionViz } from './ActionViz';
@@ -43,7 +43,7 @@ const getDelayFromEventType = (
 
     // if configurable delay, get it from the machine options
     if (Number.isNaN(finalDelay)) {
-      const delayExpr = delayOptions[delay];
+      const delayExpr = delayOptions?.[delay];
       // if configured delay is a fixed number value
       if (typeof delayExpr === 'number') {
         finalDelay = delayExpr;
diff --git a/src/WelcomeArea.tsx b/src/WelcomeArea.tsx
index 3f90c2d8..100be6e2 100644
--- a/src/WelcomeArea.tsx
+++ b/src/WelcomeArea.tsx
@@ -41,16 +41,18 @@ const buttonStyleProps: ButtonProps = {
   justifyContent: 'start',
 };
 
-const welcomeAreaMachine = createMachine<
-  {},
-  | { type: 'CLICK_START_CODING' }
-  | {
-      type: 'CLICK_SEE_EXAMPLE';
-    }
-  | {
-      type: 'BACK';
-    }
->({
+const welcomeAreaMachine = createMachine({
+  schema: {
+    events: {} as
+      | { type: 'CLICK_START_CODING' }
+      | {
+          type: 'CLICK_SEE_EXAMPLE';
+        }
+      | {
+          type: 'BACK';
+        },
+  },
+  tsTypes: {} as import("./WelcomeArea.typegen").Typegen0,
   initial: 'welcomeArea',
   states: {
     welcomeArea: {
diff --git a/src/WelcomeArea.typegen.ts b/src/WelcomeArea.typegen.ts
new file mode 100644
index 00000000..f26b9b90
--- /dev/null
+++ b/src/WelcomeArea.typegen.ts
@@ -0,0 +1,21 @@
+// This file was automatically generated. Edits will be overwritten
+
+export interface Typegen0 {
+  '@@xstate/typegen': true;
+  eventsCausingActions: {
+    requestExample: 'CLICK_SEE_EXAMPLE';
+  };
+  internalEvents: {};
+  invokeSrcNameMap: {};
+  missingImplementations: {
+    actions: 'requestExample';
+    services: never;
+    guards: never;
+    delays: never;
+  };
+  eventsCausingServices: {};
+  eventsCausingGuards: {};
+  eventsCausingDelays: {};
+  matchesStates: 'welcomeArea' | 'seeingExample' | 'startCodingRightAway';
+  tags: never;
+}
diff --git a/src/authContext.tsx b/src/authContext.tsx
index a6981883..fbdf3496 100644
--- a/src/authContext.tsx
+++ b/src/authContext.tsx
@@ -1,9 +1,8 @@
-import { InterpreterFrom } from 'xstate';
-import { AuthMachine } from './authMachine';
+import { AuthMachineInterpreter } from './authMachine';
 import { createInterpreterContext } from './utils';
 
 const [AuthProvider, useAuth, createAuthSelector] =
-  createInterpreterContext<InterpreterFrom<AuthMachine>>('Auth');
+  createInterpreterContext<AuthMachineInterpreter>('Auth');
 
 export { AuthProvider, useAuth };
 
diff --git a/src/authMachine.ts b/src/authMachine.ts
index e1fa3fc1..bdb2bcb1 100644
--- a/src/authMachine.ts
+++ b/src/authMachine.ts
@@ -5,6 +5,7 @@ import {
   ContextFrom,
   DoneInvokeEvent,
   EventFrom,
+  InterpreterFrom,
   send,
   spawn,
   StateFrom,
@@ -36,7 +37,7 @@ const authModel = createModel(
       },
     ),
     notifRef: null! as ActorRefFrom<typeof notifMachine>,
-    sourceRef: null as SourceMachineActorRef | null,
+    sourceRef: null as InterpreterFrom<typeof makeSourceMachine> | null,
     loggedInUserData: null as LoggedInUserFragment | null,
   },
   {
@@ -54,6 +55,7 @@ const authModel = createModel(
 export type AuthMachine = ReturnType<typeof createAuthMachine>;
 
 export type AuthMachineState = StateFrom<AuthMachine>;
+export type AuthMachineInterpreter = InterpreterFrom<AuthMachine>;
 
 export const createAuthMachine = (params: {
   sourceRegistryData: SourceRegistryData | null;
@@ -62,6 +64,7 @@ export const createAuthMachine = (params: {
 }) =>
   authModel.createMachine(
     {
+      tsTypes: {} as import("./authMachine.typegen").Typegen0,
       preserveActionOrder: true,
       id: 'auth',
       initial: 'initializing',
@@ -102,7 +105,7 @@ export const createAuthMachine = (params: {
                     router: params.router,
                     isEmbedded: params.isEmbbeded,
                   }),
-                ),
+                ) as any,
               };
             }),
           ],
@@ -213,14 +216,12 @@ export const createAuthMachine = (params: {
         signing_in: {
           entry: 'signInUser',
           type: 'final',
-          meta: {
-            description: `
+          description: `
             Calling signInUser redirects us away from this
             page - this is modelled as a final state because
             the state machine is stopped and recreated when
             the user gets redirected back.
           `,
-          },
         },
       },
     },
diff --git a/src/authMachine.typegen.ts b/src/authMachine.typegen.ts
new file mode 100644
index 00000000..feb43ec3
--- /dev/null
+++ b/src/authMachine.typegen.ts
@@ -0,0 +1,35 @@
+// This file was automatically generated. Edits will be overwritten
+
+export interface Typegen0 {
+  '@@xstate/typegen': true;
+  eventsCausingActions: {
+    signOutUser: 'SIGN_OUT';
+    signInUser: 'SIGN_IN';
+  };
+  internalEvents: {};
+  invokeSrcNameMap: {};
+  missingImplementations: {
+    actions: never;
+    services: never;
+    guards: never;
+    delays: never;
+  };
+  eventsCausingServices: {};
+  eventsCausingGuards: {};
+  eventsCausingDelays: {};
+  matchesStates:
+    | 'initializing'
+    | 'checking_if_signed_in'
+    | 'signed_out'
+    | 'signed_out.idle'
+    | 'signed_out.choosing_provider'
+    | 'signed_in'
+    | 'signed_in.fetchingUser'
+    | 'signed_in.idle'
+    | 'signing_in'
+    | {
+        signed_out?: 'idle' | 'choosing_provider';
+        signed_in?: 'fetchingUser' | 'idle';
+      };
+  tags: 'authorized';
+}
diff --git a/src/cacheCodeChangesMachine.ts b/src/cacheCodeChangesMachine.ts
index 96671886..bcd21273 100644
--- a/src/cacheCodeChangesMachine.ts
+++ b/src/cacheCodeChangesMachine.ts
@@ -16,13 +16,37 @@ const cacheCodeChangesModel = createModel(
   },
 );
 
-export const cacheCodeChangesMachine = cacheCodeChangesModel.createMachine({
-  initial: 'idle',
-  on: {
-    CODE_UPDATED: {
-      target: '.throttling',
-      internal: false,
-      actions: cacheCodeChangesModel.assign((ctx, event) => {
+export const cacheCodeChangesMachine = cacheCodeChangesModel.createMachine(
+  {
+    initial: 'idle',
+    tsTypes: {} as import("./cacheCodeChangesMachine.typegen").Typegen0,
+    on: {
+      CODE_UPDATED: {
+        target: '.throttling',
+        internal: false,
+        actions: 'assignCodeToContext',
+      },
+    },
+    states: {
+      idle: {},
+      throttling: {
+        after: {
+          300: 'saving',
+        },
+      },
+      saving: {
+        always: {
+          actions: (ctx) => {
+            localCache.saveSourceRawContent(ctx.sourceID, ctx.code);
+          },
+          target: 'idle',
+        },
+      },
+    },
+  },
+  {
+    actions: {
+      assignCodeToContext: cacheCodeChangesModel.assign((ctx, event) => {
         return {
           code: event.code,
           sourceID: event.sourceID,
@@ -30,20 +54,4 @@ export const cacheCodeChangesMachine = cacheCodeChangesModel.createMachine({
       }),
     },
   },
-  states: {
-    idle: {},
-    throttling: {
-      after: {
-        300: 'saving',
-      },
-    },
-    saving: {
-      always: {
-        actions: (ctx) => {
-          localCache.saveSourceRawContent(ctx.sourceID, ctx.code);
-        },
-        target: 'idle',
-      },
-    },
-  },
-});
+);
diff --git a/src/cacheCodeChangesMachine.typegen.ts b/src/cacheCodeChangesMachine.typegen.ts
new file mode 100644
index 00000000..5c4e008f
--- /dev/null
+++ b/src/cacheCodeChangesMachine.typegen.ts
@@ -0,0 +1,21 @@
+// This file was automatically generated. Edits will be overwritten
+
+export interface Typegen0 {
+  '@@xstate/typegen': true;
+  eventsCausingActions: {
+    assignCodeToContext: 'CODE_UPDATED';
+  };
+  internalEvents: {};
+  invokeSrcNameMap: {};
+  missingImplementations: {
+    actions: never;
+    services: never;
+    guards: never;
+    delays: never;
+  };
+  eventsCausingServices: {};
+  eventsCausingGuards: {};
+  eventsCausingDelays: {};
+  matchesStates: 'idle' | 'throttling' | 'saving';
+  tags: never;
+}
diff --git a/src/canvasMachine.tsx b/src/canvasMachine.tsx
index 10c21bde..67a3fdd8 100644
--- a/src/canvasMachine.tsx
+++ b/src/canvasMachine.tsx
@@ -141,110 +141,150 @@ const getNewZoomAndViewbox = (
   };
 };
 
-export const canvasMachine = canvasModel.createMachine({
-  on: {
-    CANVAS_RECT_CHANGED: {
-      actions: canvasModel.assign((ctx, e) => {
-        return {
-          canvasPanelPosition: {
-            offsetY: e.offsetY,
-            offsetX: e.offsetX,
-            height: e.height,
-            width: e.width,
-          },
-        };
-      }),
-    },
-    'ZOOM.OUT': {
-      actions: canvasModel.assign((ctx, e) => {
-        return getNewZoomAndViewbox(ctx, {
-          translationPoint: e.point,
-          zoomFactor: calculateZoomOutFactor(e.zoomFactor),
-        });
-      }),
-      cond: (ctx) => canZoom(ctx.embed) && canZoomOut(ctx),
-      target: '.throttling',
-      internal: false,
-    },
-    'ZOOM.IN': {
-      actions: canvasModel.assign((ctx, e) => {
-        return getNewZoomAndViewbox(ctx, {
-          translationPoint: e.point,
-          zoomFactor: e.zoomFactor || DEFAULT_ZOOM_IN_FACTOR,
-        });
-      }),
-      cond: (ctx) => canZoom(ctx.embed) && canZoomIn(ctx),
-      target: '.throttling',
-      internal: false,
-    },
-    PAN: {
-      actions: canvasModel.assign({
-        viewbox: (ctx, e) => {
+export const canvasMachine = canvasModel.createMachine(
+  {
+    tsTypes: {} as import("./canvasMachine.typegen").Typegen0,
+    on: {
+      CANVAS_RECT_CHANGED: {
+        actions: canvasModel.assign((ctx, e) => {
           return {
-            minX: ctx.viewbox.minX + e.dx,
-            minY: ctx.viewbox.minY + e.dy,
+            canvasPanelPosition: {
+              offsetY: e.offsetY,
+              offsetX: e.offsetX,
+              height: e.height,
+              width: e.width,
+            },
           };
-        },
-      }),
-      cond: (ctx) => canPan(ctx),
-      target: '.throttling',
-      internal: false,
-    },
-    'PAN.LEFT': {
-      actions: canvasModel.assign({
-        viewbox: (ctx, e) => ({
-          minX: ctx.viewbox.minX - (e.isLongPan ? LONG_PAN : SHORT_PAN),
-          minY: ctx.viewbox.minY,
         }),
-      }),
-      target: '.throttling',
-      internal: false,
-    },
-    'PAN.RIGHT': {
-      actions: canvasModel.assign({
-        viewbox: (ctx, e) => ({
-          minX: ctx.viewbox.minX + (e.isLongPan ? LONG_PAN : SHORT_PAN),
-          minY: ctx.viewbox.minY,
+      },
+      'ZOOM.OUT': {
+        actions: canvasModel.assign((ctx, e) => {
+          return getNewZoomAndViewbox(ctx, {
+            translationPoint: e.point,
+            zoomFactor: calculateZoomOutFactor(e.zoomFactor),
+          });
         }),
-      }),
-      target: '.throttling',
-      internal: false,
-    },
-    'PAN.UP': {
-      actions: canvasModel.assign({
-        viewbox: (ctx, e) => ({
-          minX: ctx.viewbox.minX,
-          minY: ctx.viewbox.minY - (e.isLongPan ? LONG_PAN : SHORT_PAN),
+        cond: (ctx) => canZoom(ctx.embed) && canZoomOut(ctx),
+        target: '.throttling',
+        internal: false,
+      },
+      'ZOOM.IN': {
+        actions: 'assignAfterZoomIn',
+        cond: 'canZoomIn',
+        target: '.throttling',
+        internal: false,
+      },
+      PAN: {
+        actions: canvasModel.assign({
+          viewbox: (ctx, e) => {
+            return {
+              minX: ctx.viewbox.minX + e.dx,
+              minY: ctx.viewbox.minY + e.dy,
+            };
+          },
         }),
-      }),
-      target: '.throttling',
-      internal: false,
-    },
-    'PAN.DOWN': {
-      actions: canvasModel.assign({
-        viewbox: (ctx, e) => ({
-          minX: ctx.viewbox.minX,
-          minY: ctx.viewbox.minY + (e.isLongPan ? LONG_PAN : SHORT_PAN),
+        cond: (ctx) => canPan(ctx),
+        target: '.throttling',
+        internal: false,
+      },
+      'PAN.LEFT': {
+        actions: canvasModel.assign({
+          viewbox: (ctx, e) => ({
+            minX: ctx.viewbox.minX - (e.isLongPan ? LONG_PAN : SHORT_PAN),
+            minY: ctx.viewbox.minY,
+          }),
         }),
-      }),
-      target: '.throttling',
-      internal: false,
+        target: '.throttling',
+        internal: false,
+      },
+      'PAN.RIGHT': {
+        actions: canvasModel.assign({
+          viewbox: (ctx, e) => ({
+            minX: ctx.viewbox.minX + (e.isLongPan ? LONG_PAN : SHORT_PAN),
+            minY: ctx.viewbox.minY,
+          }),
+        }),
+        target: '.throttling',
+        internal: false,
+      },
+      'PAN.UP': {
+        actions: canvasModel.assign({
+          viewbox: (ctx, e) => ({
+            minX: ctx.viewbox.minX,
+            minY: ctx.viewbox.minY - (e.isLongPan ? LONG_PAN : SHORT_PAN),
+          }),
+        }),
+        target: '.throttling',
+        internal: false,
+      },
+      'PAN.DOWN': {
+        actions: canvasModel.assign({
+          viewbox: (ctx, e) => ({
+            minX: ctx.viewbox.minX,
+            minY: ctx.viewbox.minY + (e.isLongPan ? LONG_PAN : SHORT_PAN),
+          }),
+        }),
+        target: '.throttling',
+        internal: false,
+      },
+      'POSITION.RESET': {
+        actions: 'resetPosition',
+        target: '.throttling',
+        internal: false,
+      },
+      SOURCE_CHANGED: {
+        target: '.throttling',
+        internal: false,
+        actions: 'setPositionAfterSourceChanged',
+      },
+      'elkGraph.UPDATE': {
+        actions: [
+          canvasModel.assign({
+            elkGraph: (_, e) => e.elkGraph,
+          }),
+          send('FIT_TO_CONTENT'),
+        ],
+      },
+      FIT_TO_CONTENT: {
+        actions: [
+          'assignZoomAfterFitToContent',
+          'assignViewBoxAfterFitToContent',
+        ],
+      },
+    },
+    initial: 'idle',
+    states: {
+      idle: {},
+      throttling: {
+        after: {
+          300: 'saving',
+        },
+        description: `
+        Throttling a moment before saving to ensure
+        we don't do too much saving to localStorage
+      `,
+      },
+      saving: {
+        always: {
+          actions: 'persistPositionToLocalStorage',
+          target: 'idle',
+        },
+      },
+    },
+  },
+  {
+    guards: {
+      canZoomIn: (ctx) => canZoom(ctx.embed) && canZoomIn(ctx),
     },
-    'POSITION.RESET': {
-      actions: canvasModel.assign({
+    actions: {
+      resetPosition: canvasModel.assign({
         zoom: canvasModel.initialContext.zoom,
         viewbox: canvasModel.initialContext.viewbox,
       }),
-      target: '.throttling',
-      internal: false,
-    },
-    SOURCE_CHANGED: {
-      target: '.throttling',
-      internal: false,
-      actions: canvasModel.assign((context, event) => {
+      setPositionAfterSourceChanged: canvasModel.assign((context, event) => {
         // TODO: This can be more elegant when we have system actor
         if (!context.embed?.isEmbedded) {
-          const position = getPositionFromEvent(event);
+          const position = getPositionFromEvent(event.id);
 
           if (!position) return {};
 
@@ -252,71 +292,42 @@ export const canvasMachine = canvasModel.createMachine({
         }
         return {};
       }),
-    },
-    'elkGraph.UPDATE': {
-      actions: [
-        canvasModel.assign({
-          elkGraph: (_, e) => e.elkGraph,
-        }),
-        send('FIT_TO_CONTENT'),
-      ],
-    },
-    FIT_TO_CONTENT: {
-      actions: [
-        canvasModel.assign({
-          zoom: (ctx) => {
-            if (!ctx.elkGraph) return ctx.zoom;
-            return (
-              Math.min(
-                ctx.canvasPanelPosition.width / ctx.elkGraph.width!,
-                ctx.canvasPanelPosition.height / ctx.elkGraph.height!,
-                MAX_ZOOM_IN_FACTOR,
-              ) * 0.9 // Ensure machine does not touch sides
-            );
-          },
-        }),
-        canvasModel.assign({
-          viewbox: (ctx) => {
-            if (!ctx.elkGraph) return ctx.viewbox;
-            return {
-              minX:
-                (ctx.elkGraph.width! * ctx.zoom) / 2 -
-                ctx.canvasPanelPosition.width / 2,
-              minY:
-                (ctx.elkGraph.height! * ctx.zoom) / 2 -
-                ctx.canvasPanelPosition.height / 2,
-            };
-          },
-        }),
-      ],
-    },
-  },
-  initial: 'idle',
-  states: {
-    idle: {},
-    throttling: {
-      after: {
-        300: 'saving',
-      },
-      meta: {
-        description: `
-          Throttling a moment before saving to ensure
-          we don't do too much saving to localStorage
-        `,
-      },
-    },
-    saving: {
-      always: {
-        actions: 'persistPositionToLocalStorage',
-        target: 'idle',
-      },
+      assignZoomAfterFitToContent: canvasModel.assign({
+        zoom: (ctx) => {
+          if (!ctx.elkGraph) return ctx.zoom;
+          return (
+            Math.min(
+              ctx.canvasPanelPosition.width / ctx.elkGraph.width!,
+              ctx.canvasPanelPosition.height / ctx.elkGraph.height!,
+              MAX_ZOOM_IN_FACTOR,
+            ) * 0.9 // Ensure machine does not touch sides
+          );
+        },
+      }),
+      assignViewBoxAfterFitToContent: canvasModel.assign({
+        viewbox: (ctx) => {
+          if (!ctx.elkGraph) return ctx.viewbox;
+          return {
+            minX:
+              (ctx.elkGraph.width! * ctx.zoom) / 2 -
+              ctx.canvasPanelPosition.width / 2,
+            minY:
+              (ctx.elkGraph.height! * ctx.zoom) / 2 -
+              ctx.canvasPanelPosition.height / 2,
+          };
+        },
+      }),
+      assignAfterZoomIn: canvasModel.assign((ctx, e) => {
+        return getNewZoomAndViewbox(ctx, {
+          translationPoint: e.point,
+          zoomFactor: e.zoomFactor || DEFAULT_ZOOM_IN_FACTOR,
+        });
+      }),
     },
   },
-});
-
-const getPositionFromEvent = (event: ModelEventsFrom<typeof canvasModel>) => {
-  if (event.type !== 'SOURCE_CHANGED') return null;
+);
 
-  const position = localCache.getPosition(event.id);
+const getPositionFromEvent = (id: string | null) => {
+  const position = localCache.getPosition(id);
   return position;
 };
diff --git a/src/canvasMachine.typegen.ts b/src/canvasMachine.typegen.ts
new file mode 100644
index 00000000..39261171
--- /dev/null
+++ b/src/canvasMachine.typegen.ts
@@ -0,0 +1,28 @@
+// This file was automatically generated. Edits will be overwritten
+
+export interface Typegen0 {
+  '@@xstate/typegen': true;
+  eventsCausingActions: {
+    assignAfterZoomIn: 'ZOOM.IN';
+    resetPosition: 'POSITION.RESET';
+    setPositionAfterSourceChanged: 'SOURCE_CHANGED';
+    assignZoomAfterFitToContent: 'FIT_TO_CONTENT';
+    assignViewBoxAfterFitToContent: 'FIT_TO_CONTENT';
+    persistPositionToLocalStorage: string;
+  };
+  internalEvents: {};
+  invokeSrcNameMap: {};
+  missingImplementations: {
+    actions: 'persistPositionToLocalStorage';
+    services: never;
+    guards: never;
+    delays: never;
+  };
+  eventsCausingServices: {};
+  eventsCausingGuards: {
+    canZoomIn: 'ZOOM.IN';
+  };
+  eventsCausingDelays: {};
+  matchesStates: 'idle' | 'throttling' | 'saving';
+  tags: never;
+}
diff --git a/src/confirmLeavingService.ts b/src/confirmLeavingService.ts
index 8265fc88..8b33a8d0 100644
--- a/src/confirmLeavingService.ts
+++ b/src/confirmLeavingService.ts
@@ -24,6 +24,7 @@ export const confirmBeforeLeavingMachine = createModel(
     },
   },
 ).createMachine({
+  tsTypes: {} as import("./confirmLeavingService.typegen").Typegen0,
   initial: 'notConfirming',
   on: {
     CODE_UPDATED: {
diff --git a/src/confirmLeavingService.typegen.ts b/src/confirmLeavingService.typegen.ts
new file mode 100644
index 00000000..7442c085
--- /dev/null
+++ b/src/confirmLeavingService.typegen.ts
@@ -0,0 +1,19 @@
+// This file was automatically generated. Edits will be overwritten
+
+export interface Typegen0 {
+  '@@xstate/typegen': true;
+  eventsCausingActions: {};
+  internalEvents: {};
+  invokeSrcNameMap: {};
+  missingImplementations: {
+    actions: never;
+    services: never;
+    guards: never;
+    delays: never;
+  };
+  eventsCausingServices: {};
+  eventsCausingGuards: {};
+  eventsCausingDelays: {};
+  matchesStates: 'notConfirming' | 'confirming';
+  tags: never;
+}
diff --git a/src/dragSessionTracker.ts b/src/dragSessionTracker.ts
index e334f012..51a475a4 100644
--- a/src/dragSessionTracker.ts
+++ b/src/dragSessionTracker.ts
@@ -37,6 +37,7 @@ export const dragSessionModel = createModel(
 
 export const dragSessionTracker = dragSessionModel.createMachine(
   {
+    tsTypes: {} as import("./dragSessionTracker.typegen").Typegen0,
     preserveActionOrder: true,
     initial: 'check_session_data',
     states: {
@@ -135,8 +136,10 @@ export const dragSessionTracker = dragSessionModel.createMachine(
   },
   {
     actions: {
-      capturePointer: ({ ref, session }, ev: any) =>
-        ref!.current!.setPointerCapture(ev!.pointerId || session?.pointerId),
+      capturePointer: ({ ref, session }, ev) =>
+        ref!.current!.setPointerCapture(
+          (ev.pointerId || session?.pointerId) as number,
+        ),
       releasePointer: ({ ref, session }) =>
         ref!.current!.releasePointerCapture(session!.pointerId),
       setSessionData: assign({
@@ -149,27 +152,22 @@ export const dragSessionTracker = dragSessionModel.createMachine(
           return ctx.session;
         },
       }),
-      clearSessionData: assign({
+      clearSessionData: assign((ctx) => ({
         session: null,
-      }) as any,
+      })),
       updatePoint: assign({
-        session: (ctx, ev: any) => ({
+        session: (ctx, ev) => ({
           ...ctx.session!,
           point: ev.point,
         }),
       }),
-      sendPointDelta: sendParent(
-        (
-          ctx: ContextFrom<typeof dragSessionModel>,
-          ev: ReturnType<typeof dragSessionModel.events.DRAG_POINT_MOVED>,
-        ) => ({
-          type: 'POINTER_MOVED_BY',
-          delta: {
-            x: ev.point.x - ctx.session!.point.x,
-            y: ev.point.y - ctx.session!.point.y,
-          },
-        }),
-      ) as any,
+      sendPointDelta: sendParent((ctx, ev) => ({
+        type: 'POINTER_MOVED_BY',
+        delta: {
+          x: ev.point.x - ctx.session!.point.x,
+          y: ev.point.y - ctx.session!.point.y,
+        },
+      })),
     },
   },
 );
diff --git a/src/dragSessionTracker.typegen.ts b/src/dragSessionTracker.typegen.ts
new file mode 100644
index 00000000..9e67fed1
--- /dev/null
+++ b/src/dragSessionTracker.typegen.ts
@@ -0,0 +1,26 @@
+// This file was automatically generated. Edits will be overwritten
+
+export interface Typegen0 {
+  '@@xstate/typegen': true;
+  eventsCausingActions: {
+    sendPointDelta: 'DRAG_POINT_MOVED';
+    updatePoint: 'DRAG_POINT_MOVED';
+    releasePointer: string;
+    clearSessionData: string;
+    capturePointer: 'DRAG_SESSION_STARTED';
+    setSessionData: 'DRAG_SESSION_STARTED';
+  };
+  internalEvents: {};
+  invokeSrcNameMap: {};
+  missingImplementations: {
+    actions: never;
+    services: never;
+    guards: never;
+    delays: never;
+  };
+  eventsCausingServices: {};
+  eventsCausingGuards: {};
+  eventsCausingDelays: {};
+  matchesStates: 'check_session_data' | 'idle' | 'active';
+  tags: never;
+}
diff --git a/src/elkMachine.ts b/src/elkMachine.ts
index 8a3211a9..ddce3af9 100644
--- a/src/elkMachine.ts
+++ b/src/elkMachine.ts
@@ -17,6 +17,7 @@ export const createElkMachine = (digraph: DirectedGraphNode) => {
   );
 
   return elkModel.createMachine({
+    tsTypes: {} as import("./elkMachine.typegen").Typegen0,
     context: elkModel.initialContext,
     initial: 'loading',
     states: {
diff --git a/src/elkMachine.typegen.ts b/src/elkMachine.typegen.ts
new file mode 100644
index 00000000..218ad662
--- /dev/null
+++ b/src/elkMachine.typegen.ts
@@ -0,0 +1,28 @@
+// This file was automatically generated. Edits will be overwritten
+
+export interface Typegen0 {
+  '@@xstate/typegen': true;
+  eventsCausingActions: {
+    notifyLayoutReady: 'done.invoke.(machine).loading:invocation[0]';
+    notifyLayoutPending: 'GRAPH_UPDATED';
+  };
+  internalEvents: {
+    'done.invoke.(machine).loading:invocation[0]': {
+      type: 'done.invoke.(machine).loading:invocation[0]';
+      data: unknown;
+      __tip: 'See the XState TS docs to learn how to strongly type this.';
+    };
+  };
+  invokeSrcNameMap: {};
+  missingImplementations: {
+    actions: 'notifyLayoutReady' | 'notifyLayoutPending';
+    services: never;
+    guards: never;
+    delays: never;
+  };
+  eventsCausingServices: {};
+  eventsCausingGuards: {};
+  eventsCausingDelays: {};
+  matchesStates: 'loading' | 'success';
+  tags: never;
+}
diff --git a/src/paletteMachine.ts b/src/paletteMachine.ts
index 43f909d1..6a30084c 100644
--- a/src/paletteMachine.ts
+++ b/src/paletteMachine.ts
@@ -9,6 +9,7 @@ const paletteModel = createModel(undefined, {
 });
 
 export const paletteMachine = paletteModel.createMachine({
+  tsTypes: {} as import("./paletteMachine.typegen").Typegen0,
   initial: 'closed',
   states: {
     closed: {
diff --git a/src/paletteMachine.typegen.ts b/src/paletteMachine.typegen.ts
new file mode 100644
index 00000000..845c43d2
--- /dev/null
+++ b/src/paletteMachine.typegen.ts
@@ -0,0 +1,19 @@
+// This file was automatically generated. Edits will be overwritten
+
+export interface Typegen0 {
+  '@@xstate/typegen': true;
+  eventsCausingActions: {};
+  internalEvents: {};
+  invokeSrcNameMap: {};
+  missingImplementations: {
+    actions: never;
+    services: never;
+    guards: never;
+    delays: never;
+  };
+  eventsCausingServices: {};
+  eventsCausingGuards: {};
+  eventsCausingDelays: {};
+  matchesStates: 'closed' | 'opened';
+  tags: never;
+}
diff --git a/src/shareMachine.ts b/src/shareMachine.ts
index adf18024..d4d19321 100644
--- a/src/shareMachine.ts
+++ b/src/shareMachine.ts
@@ -10,6 +10,7 @@ const model = createModel(
 );
 
 export const shareMachine = model.createMachine({
+  tsTypes: {} as import("./shareMachine.typegen").Typegen0,
   id: 'shareMachine',
   on: {
     COPY_LINK: {
@@ -21,12 +22,10 @@ export const shareMachine = model.createMachine({
     notCopied: {},
     pending: {
       tags: ['loading'],
-      meta: {
-        description: `
-          A fake pending state to give the user
-          some visual feedback
-        `,
-      },
+      description: `
+        A fake pending state to give the user
+        some visual feedback
+      `,
       after: {
         250: {
           target: 'copied',
diff --git a/src/shareMachine.typegen.ts b/src/shareMachine.typegen.ts
new file mode 100644
index 00000000..2a7390ca
--- /dev/null
+++ b/src/shareMachine.typegen.ts
@@ -0,0 +1,25 @@
+// This file was automatically generated. Edits will be overwritten
+
+export interface Typegen0 {
+  '@@xstate/typegen': true;
+  eventsCausingActions: {
+    copyLinkToClipboard: 'xstate.after(250)#shareMachine.pending';
+  };
+  internalEvents: {
+    'xstate.after(250)#shareMachine.pending': {
+      type: 'xstate.after(250)#shareMachine.pending';
+    };
+  };
+  invokeSrcNameMap: {};
+  missingImplementations: {
+    actions: 'copyLinkToClipboard';
+    services: never;
+    guards: never;
+    delays: never;
+  };
+  eventsCausingServices: {};
+  eventsCausingGuards: {};
+  eventsCausingDelays: {};
+  matchesStates: 'notCopied' | 'pending' | 'copied';
+  tags: 'loading' | 'copied';
+}
diff --git a/src/simulationMachine.tsx b/src/simulationMachine.tsx
index 1156730a..2854dbc6 100644
--- a/src/simulationMachine.tsx
+++ b/src/simulationMachine.tsx
@@ -5,6 +5,7 @@ import {
   EventFrom,
   InterpreterStatus,
   SCXML,
+  StateNode,
 } from 'xstate';
 import { AnyEventObject, assign, interpret, send, spawn } from 'xstate';
 import { createWindowReceiver } from '@xstate/inspect';
@@ -32,7 +33,7 @@ export const simModel = createModel(
   {
     events: {
       'SERVICE.SEND': (event: SCXML.Event<AnyEventObject>) => ({ event }),
-      'MACHINES.REGISTER': (machines: Array<AnyStateMachine>) => ({
+      'MACHINES.REGISTER': (machines: Array<StateNode>) => ({
         machines,
       }),
 
@@ -60,6 +61,7 @@ export const simModel = createModel(
 
 export const simulationMachine = simModel.createMachine(
   {
+    tsTypes: {} as import("./simulationMachine.typegen").Typegen0,
     preserveActionOrder: true,
     context: simModel.initialContext,
     initial:
@@ -85,7 +87,7 @@ export const simulationMachine = simModel.createMachine(
               targetWindow: window.opener || window.parent,
             });
 
-            onReceive((event) => {
+            onReceive((event: any) => {
               if (event.type === 'xstate.event') {
                 receiver.send({
                   ...event,
@@ -170,7 +172,7 @@ export const simulationMachine = simModel.createMachine(
               serviceMap.clear();
             }
 
-            onReceive((event) => {
+            onReceive((event: any) => {
               if (event.type === 'INTERPRET') {
                 event.machines.forEach((machine: AnyStateMachine) => {
                   try {
@@ -252,7 +254,7 @@ export const simulationMachine = simModel.createMachine(
 
                 draft[e.sessionId]!.state = service.machine.resolveState(
                   e.state,
-                );
+                ) as any;
               }),
             events: (ctx, e) => {
               return produce(ctx.events, (draft) => {
diff --git a/src/simulationMachine.typegen.ts b/src/simulationMachine.typegen.ts
new file mode 100644
index 00000000..7f7fd5d2
--- /dev/null
+++ b/src/simulationMachine.typegen.ts
@@ -0,0 +1,31 @@
+// This file was automatically generated. Edits will be overwritten
+
+export interface Typegen0 {
+  '@@xstate/typegen': true;
+  eventsCausingActions: {
+    resetVisualizationState: 'MACHINES.REGISTER' | 'MACHINES.RESET';
+  };
+  internalEvents: {};
+  invokeSrcNameMap: {
+    captureEventsFromChildServices: 'done.invoke.(machine):invocation[0]';
+  };
+  missingImplementations: {
+    actions: never;
+    services: never;
+    guards: never;
+    delays: never;
+  };
+  eventsCausingServices: {
+    captureEventsFromChildServices: string;
+  };
+  eventsCausingGuards: {};
+  eventsCausingDelays: {};
+  matchesStates:
+    | 'inspecting'
+    | 'visualizing'
+    | 'visualizing.idle'
+    | 'visualizing.pending'
+    | 'visualizing.ready'
+    | { visualizing?: 'idle' | 'pending' | 'ready' };
+  tags: 'inspecting' | 'visualizing' | 'empty' | 'layoutPending';
+}
diff --git a/src/sourceMachine.ts b/src/sourceMachine.ts
index f27689ac..338d1075 100644
--- a/src/sourceMachine.ts
+++ b/src/sourceMachine.ts
@@ -9,6 +9,7 @@ import {
   DoneInvokeEvent,
   EventFrom,
   forwardTo,
+  InterpreterFrom,
   send,
   sendParent,
   spawn,
@@ -120,14 +121,11 @@ export const sourceModel = createModel(
   },
 );
 
-export type SourceMachineActorRef = ActorRefFrom<
+export type SourceMachineActorRef = InterpreterFrom<
   ReturnType<typeof makeSourceMachine>
 >;
 
-export type SourceMachineState = State<
-  ContextFrom<typeof sourceModel>,
-  EventFrom<typeof sourceModel>
->;
+export type SourceMachineState = StateFrom<typeof makeSourceMachine>;
 
 class NotFoundError extends Error {
   constructor(message: string) {
@@ -168,6 +166,14 @@ export const makeSourceMachine = (params: {
 
   return sourceModel.createMachine(
     {
+      schema: {
+        services: {} as {
+          updateSourceFile: {
+            data: UpdateSourceFileMutation;
+          };
+        },
+      },
+      tsTypes: {} as import("./sourceMachine.typegen").Typegen0,
       initial: 'checking_initial_data',
       preserveActionOrder: true,
       context: {
@@ -212,23 +218,13 @@ export const makeSourceMachine = (params: {
         },
         checking_if_on_legacy_url: {
           onDone: 'checking_url',
-          meta: {
-            description: `This state checks if you're on /id?=<id>, and redirects to you /<id>`,
-          },
+          description: `This state checks if you're on /id?=<id>, and redirects to you /<id>`,
           initial: 'checking_if_id_on_query_params',
           states: {
             checking_if_id_on_query_params: {
               always: [
                 {
-                  cond: (ctx) => {
-                    // TODO: check if `params.router.query.id` can be reliably used here instead of the client check
-                    if (!isOnClientSide()) return false;
-                    const queries = new URLSearchParams(window.location.search);
-
-                    return Boolean(
-                      queries.get('id') && !ctx.sourceRegistryData,
-                    );
-                  },
+                  cond: 'hasIdOnQueryParams',
                   target: 'redirecting',
                 },
                 {
@@ -552,21 +548,7 @@ export const makeSourceMachine = (params: {
             onDone: {
               target: 'with_source.source_loaded.user_owns_this_source',
               actions: [
-                assign(
-                  (
-                    context,
-                    event: DoneInvokeEvent<UpdateSourceFileMutation>,
-                  ) => {
-                    return {
-                      sourceID: event.data.updateSourceFile.id,
-                      sourceProvider: 'registry',
-                      sourceRegistryData: {
-                        ...event.data.updateSourceFile,
-                        dataSource: 'client',
-                      },
-                    };
-                  },
-                ),
+                'assignSourceFileToContext',
                 send(
                   notifModel.events.BROADCAST('Saved successfully', 'success'),
                   {
@@ -597,6 +579,13 @@ export const makeSourceMachine = (params: {
     },
     {
       guards: {
+        hasIdOnQueryParams: (ctx) => {
+          // TODO: check if `params.router.query.id` can be reliably used here instead of the client check
+          if (!isOnClientSide()) return false;
+          const queries = new URLSearchParams(window.location.search);
+
+          return Boolean(queries.get('id') && !ctx.sourceRegistryData);
+        },
         hasLocalStorageCachedSource: (context) => {
           const result = localCache.getSourceRawContent(
             context.sourceID,
@@ -690,6 +679,16 @@ export const makeSourceMachine = (params: {
         openNewWindowAtRoot: () => {
           window.open('/viz', '_blank', 'noopener');
         },
+        assignSourceFileToContext: assign((context, event) => {
+          return {
+            sourceID: event.data?.updateSourceFile.id,
+            sourceProvider: 'registry',
+            sourceRegistryData: {
+              ...event.data.updateSourceFile,
+              dataSource: 'client',
+            },
+          };
+        }),
       },
       services: {
         createSourceFile: async (ctx, e): Promise<SourceFileFragment> => {
@@ -715,8 +714,7 @@ export const makeSourceMachine = (params: {
             return res.data?.createSourceFile!;
           });
         },
-        updateSourceFile: async (ctx, e) => {
-          if (e.type !== 'SAVE') return;
+        updateSourceFile: (ctx, e) => {
           return gQuery(
             UpdateSourceFileDocument,
             {
@@ -724,7 +722,10 @@ export const makeSourceMachine = (params: {
               text: ctx.sourceRawContent,
             },
             params.auth.session()?.access_token!,
-          ).then((res) => res.data);
+          ).then((res) => {
+            if (!res.data) throw new Error('');
+            return res.data;
+          });
         },
         loadSourceContent: (ctx) => async (send) => {
           switch (ctx.sourceProvider) {
diff --git a/src/sourceMachine.typegen.ts b/src/sourceMachine.typegen.ts
new file mode 100644
index 00000000..974329cd
--- /dev/null
+++ b/src/sourceMachine.typegen.ts
@@ -0,0 +1,106 @@
+// This file was automatically generated. Edits will be overwritten
+
+export interface Typegen0 {
+  '@@xstate/typegen': true;
+  eventsCausingActions: {
+    openNewWindowAtRoot: 'CREATE_NEW';
+    addForkOfToDesiredName: 'FORK' | 'SAVE';
+    assignExampleMachineToContext: 'EXAMPLE_REQUESTED';
+    clearLocalStorageEntryForCurrentSource: 'done.invoke.(machine).creating.pendingSave:invocation[0]';
+    assignCreateSourceFileToContext: 'done.invoke.(machine).creating.pendingSave:invocation[0]';
+    updateURLWithMachineID: 'done.invoke.(machine).creating.pendingSave:invocation[0]';
+    showSaveErrorToast: 'error.platform.(machine).creating.pendingSave:invocation[0]';
+    assignSourceFileToContext: 'done.invoke.updating:invocation[0]';
+    redirectToNewUrlFromLegacyUrl: string;
+    parseQueries: 'done.state.(machine).checking_if_on_legacy_url';
+    getLocalStorageCachedSource:
+      | 'LOADED_FROM_REGISTRY'
+      | 'CLOSE_NAME_CHOOSER_MODAL'
+      | 'error.platform.updating:invocation[0]';
+  };
+  internalEvents: {
+    'done.invoke.(machine).creating.pendingSave:invocation[0]': {
+      type: 'done.invoke.(machine).creating.pendingSave:invocation[0]';
+      data: unknown;
+      __tip: 'See the XState TS docs to learn how to strongly type this.';
+    };
+    'error.platform.(machine).creating.pendingSave:invocation[0]': {
+      type: 'error.platform.(machine).creating.pendingSave:invocation[0]';
+      data: unknown;
+    };
+    'done.invoke.updating:invocation[0]': {
+      type: 'done.invoke.updating:invocation[0]';
+      data: unknown;
+      __tip: 'See the XState TS docs to learn how to strongly type this.';
+    };
+    'error.platform.updating:invocation[0]': {
+      type: 'error.platform.updating:invocation[0]';
+      data: unknown;
+    };
+  };
+  invokeSrcNameMap: {
+    loadSourceContent: 'done.invoke.(machine).with_source.loading_content:invocation[0]';
+    createSourceFile: 'done.invoke.(machine).creating.pendingSave:invocation[0]';
+    updateSourceFile: 'done.invoke.updating:invocation[0]';
+  };
+  missingImplementations: {
+    actions: never;
+    services: never;
+    guards: never;
+    delays: never;
+  };
+  eventsCausingServices: {
+    loadSourceContent: string;
+    updateSourceFile: 'SAVE';
+    createSourceFile: 'CHOOSE_NAME';
+  };
+  eventsCausingGuards: {
+    hasIdOnQueryParams: string;
+    hasLocalStorageCachedSource: string;
+  };
+  eventsCausingDelays: {};
+  matchesStates:
+    | 'checking_initial_data'
+    | 'checking_if_on_legacy_url'
+    | 'checking_if_on_legacy_url.checking_if_id_on_query_params'
+    | 'checking_if_on_legacy_url.redirecting'
+    | 'checking_if_on_legacy_url.check_complete'
+    | 'checking_url'
+    | 'with_source'
+    | 'with_source.loading_content'
+    | 'with_source.source_loaded'
+    | 'with_source.source_loaded.checking_if_user_owns_source'
+    | 'with_source.source_loaded.user_owns_this_source'
+    | 'with_source.source_loaded.user_does_not_own_this_source'
+    | 'with_source.source_error'
+    | 'no_source'
+    | 'no_source.checking_if_in_local_storage'
+    | 'no_source.has_cached_source'
+    | 'no_source.no_cached_source'
+    | 'creating'
+    | 'creating.showingNameModal'
+    | 'creating.pendingSave'
+    | 'updating'
+    | {
+        checking_if_on_legacy_url?:
+          | 'checking_if_id_on_query_params'
+          | 'redirecting'
+          | 'check_complete';
+        with_source?:
+          | 'loading_content'
+          | 'source_loaded'
+          | 'source_error'
+          | {
+              source_loaded?:
+                | 'checking_if_user_owns_source'
+                | 'user_owns_this_source'
+                | 'user_does_not_own_this_source';
+            };
+        no_source?:
+          | 'checking_if_in_local_storage'
+          | 'has_cached_source'
+          | 'no_cached_source';
+        creating?: 'showingNameModal' | 'pendingSave';
+      };
+  tags: 'canShowWelcomeMessage' | 'noCachedSource' | 'persisting';
+}
diff --git a/src/types.ts b/src/types.ts
index 68df4587..e26ed442 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -5,22 +5,11 @@ import type {
   StateMachine,
 } from 'xstate';
 import { SourceFileFragment } from './graphql/SourceFileFragment.generated';
-import { Model } from 'xstate/lib/model.types';
 import type { editor } from 'monaco-editor';
 
 export type AnyStateMachine = StateMachine<any, any, any>;
 
-export type StateFrom<T> = T extends StateMachine<
-  infer TContext,
-  any,
-  infer TEvent
->
-  ? State<TContext, TEvent>
-  : T extends Model<infer TContext, infer TEvent>
-  ? State<TContext, TEvent, any, any>
-  : never;
-
-export type AnyState = State<any, any>;
+export type AnyState = State<any, any, any, any, any>;
 
 export type SourceProvider = 'gist' | 'registry';
 
diff --git a/src/utils.ts b/src/utils.ts
index 75ee4093..895eeecb 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -35,7 +35,7 @@ export function isInternalEvent(eventName: string) {
 }
 
 export function createInterpreterContext<
-  TInterpreter extends Interpreter<any, any, any>,
+  TInterpreter extends Interpreter<any, any, any, any, any>,
 >(displayName: string) {
   const [Provider, useContext] =
     createRequiredContext<TInterpreter>(displayName);
diff --git a/yarn.lock b/yarn.lock
index a683adb1..d503b9b6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2858,10 +2858,10 @@
   dependencies:
     fast-safe-stringify "^2.0.7"
 
-"@xstate/react@^1.5.1":
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/@xstate/react/-/react-1.5.1.tgz#60817e60e54e338b8e7c3e51bfa4cd3babebdc7d"
-  integrity sha512-DJHDqDlZHus08X98uMJw4KR17FRWBXLHMQ02YRxx0DMm5VLn75VwGyt4tXdlNZHQWjyk++C5c9Ichq3PdmM3og==
+"@xstate/react@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@xstate/react/-/react-2.0.0.tgz#fa1c950483a7a500d71faaa36e6970b337ba7543"
+  integrity sha512-Pw8uHkamrMxoV8cwnVHv570Zun7o2ktokn5bkUOrv6PufFg5JHL2URiGvbyR9JqmIxfJdXregWvCGa3pqXd7Cg==
   dependencies:
     use-isomorphic-layout-effect "^1.0.0"
     use-subscription "^1.3.0"
@@ -9938,10 +9938,10 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
-xstate@^4.26.0:
-  version "4.26.0"
-  resolved "https://registry.yarnpkg.com/xstate/-/xstate-4.26.0.tgz#aea3c94b6df57729f55d3d2b83ab9d21801ad24e"
-  integrity sha512-l0tfRBhVYM17D6IWT4pVOzzN9kY/5lnPWCe4LXjJ3F9HCrJOPBn6tPRAb9mapSRBS8cOeByJFDCRSNopgaoC5w==
+xstate@^4.29.0:
+  version "4.29.0"
+  resolved "https://registry.yarnpkg.com/xstate/-/xstate-4.29.0.tgz#74161f1e4b7fadb073593085f4fbb58068ee0b86"
+  integrity sha512-F6WF5s6xG/bm8Oxi2ETuzwGQW8yleL5I4JPxZl49m7Uw7D4LAXu+4dvUK78Uo4D863sM8auqw6+1Xmj9mFlmDQ==
 
 xtend@^4.0.0, xtend@^4.0.2:
   version "4.0.2"