diff --git a/.changeset/old-fishes-swim.md b/.changeset/old-fishes-swim.md
new file mode 100644
index 00000000000..113cc67fb82
--- /dev/null
+++ b/.changeset/old-fishes-swim.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": patch
+---
+
+Adding improved type safeguards to components folder in perseus-editor.
diff --git a/packages/perseus-editor/src/components/__stories__/blur-input.stories.tsx b/packages/perseus-editor/src/components/__docs__/blur-input.stories.tsx
similarity index 90%
rename from packages/perseus-editor/src/components/__stories__/blur-input.stories.tsx
rename to packages/perseus-editor/src/components/__docs__/blur-input.stories.tsx
index 3b3d0d2ed0f..1595accd283 100644
--- a/packages/perseus-editor/src/components/__stories__/blur-input.stories.tsx
+++ b/packages/perseus-editor/src/components/__docs__/blur-input.stories.tsx
@@ -4,7 +4,7 @@ import {action} from "storybook/actions";
 import BlurInput from "../blur-input";
 
 export default {
-    title: "PerseusEditor/Components/Blur Input",
+    title: "Editors/Components/Blur Input",
 };
 
 export const Default = (): React.ReactElement => {
diff --git a/packages/perseus-editor/src/components/__stories__/color-select.stories.tsx b/packages/perseus-editor/src/components/__docs__/color-select.stories.tsx
similarity index 95%
rename from packages/perseus-editor/src/components/__stories__/color-select.stories.tsx
rename to packages/perseus-editor/src/components/__docs__/color-select.stories.tsx
index 7acd925132e..ef6b85537e1 100644
--- a/packages/perseus-editor/src/components/__stories__/color-select.stories.tsx
+++ b/packages/perseus-editor/src/components/__docs__/color-select.stories.tsx
@@ -7,7 +7,7 @@ import type {LockedFigureColor} from "@khanacademy/perseus-core";
 import type {Meta} from "@storybook/react-vite";
 
 export default {
-    title: "PerseusEditor/Components/Color Select",
+    title: "Editors/Components/Color Select",
     component: ColorSelect,
 } as Meta<typeof ColorSelect>;
 
diff --git a/packages/perseus-editor/src/components/__stories__/color-swatch.stories.tsx b/packages/perseus-editor/src/components/__docs__/color-swatch.stories.tsx
similarity index 91%
rename from packages/perseus-editor/src/components/__stories__/color-swatch.stories.tsx
rename to packages/perseus-editor/src/components/__docs__/color-swatch.stories.tsx
index 25c06d4a4fd..c674445bb9e 100644
--- a/packages/perseus-editor/src/components/__stories__/color-swatch.stories.tsx
+++ b/packages/perseus-editor/src/components/__docs__/color-swatch.stories.tsx
@@ -6,7 +6,7 @@ import ColorSwatch from "../../widgets/interactive-graph-editor/locked-figures/c
 import type {Meta} from "@storybook/react-vite";
 
 export default {
-    title: "PerseusEditor/Components/Color Swatch",
+    title: "Editors/Components/Color Swatch",
     component: ColorSwatch,
 } as Meta<typeof ColorSwatch>;
 
diff --git a/packages/perseus-editor/src/components/__stories__/device-framer.stories.tsx b/packages/perseus-editor/src/components/__docs__/device-framer.stories.tsx
similarity index 96%
rename from packages/perseus-editor/src/components/__stories__/device-framer.stories.tsx
rename to packages/perseus-editor/src/components/__docs__/device-framer.stories.tsx
index e57b656ebd4..01335e36e30 100644
--- a/packages/perseus-editor/src/components/__stories__/device-framer.stories.tsx
+++ b/packages/perseus-editor/src/components/__docs__/device-framer.stories.tsx
@@ -7,7 +7,7 @@ import type {Meta, StoryObj} from "@storybook/react-vite";
 
 const meta: Meta<typeof DeviceFramer> = {
     component: DeviceFramer,
-    title: "PerseusEditor/Components/Device Framer",
+    title: "Editors/Components/Device Framer",
 };
 
 export default meta;
diff --git a/packages/perseus-editor/src/components/__stories__/graph-settings.argtypes.ts b/packages/perseus-editor/src/components/__docs__/graph-settings.argtypes.ts
similarity index 100%
rename from packages/perseus-editor/src/components/__stories__/graph-settings.argtypes.ts
rename to packages/perseus-editor/src/components/__docs__/graph-settings.argtypes.ts
diff --git a/packages/perseus-editor/src/components/__stories__/graph-settings.stories.tsx b/packages/perseus-editor/src/components/__docs__/graph-settings.stories.tsx
similarity index 91%
rename from packages/perseus-editor/src/components/__stories__/graph-settings.stories.tsx
rename to packages/perseus-editor/src/components/__docs__/graph-settings.stories.tsx
index 91d5884ee39..2a741507297 100644
--- a/packages/perseus-editor/src/components/__stories__/graph-settings.stories.tsx
+++ b/packages/perseus-editor/src/components/__docs__/graph-settings.stories.tsx
@@ -5,7 +5,7 @@ import GraphSettings from "../graph-settings";
 import GraphSettingsArgTypes from "./graph-settings.argtypes";
 
 export default {
-    title: "PerseusEditor/Components/Graph Settings",
+    title: "Editors/Components/Graph Settings",
     component: GraphSettings,
     argTypes: GraphSettingsArgTypes,
 };
diff --git a/packages/perseus-editor/src/components/__stories__/interactive-graph-settings.argtypes.ts b/packages/perseus-editor/src/components/__docs__/interactive-graph-settings.argtypes.ts
similarity index 100%
rename from packages/perseus-editor/src/components/__stories__/interactive-graph-settings.argtypes.ts
rename to packages/perseus-editor/src/components/__docs__/interactive-graph-settings.argtypes.ts
diff --git a/packages/perseus-editor/src/components/__stories__/interactive-graph-settings.stories.tsx b/packages/perseus-editor/src/components/__docs__/interactive-graph-settings.stories.tsx
similarity index 95%
rename from packages/perseus-editor/src/components/__stories__/interactive-graph-settings.stories.tsx
rename to packages/perseus-editor/src/components/__docs__/interactive-graph-settings.stories.tsx
index fcb0d785ba6..4150cc166c1 100644
--- a/packages/perseus-editor/src/components/__stories__/interactive-graph-settings.stories.tsx
+++ b/packages/perseus-editor/src/components/__docs__/interactive-graph-settings.stories.tsx
@@ -7,7 +7,7 @@ import InteractiveGraphSettingsArgTypes from "./interactive-graph-settings.argty
 import type {StoryObj} from "@storybook/react-vite";
 
 export default {
-    title: "PerseusEditor/Components/Interactive Graph Settings",
+    title: "Editors/Components/Interactive Graph Settings",
     component: InteractiveGraphSettings,
     argTypes: InteractiveGraphSettingsArgTypes,
 };
diff --git a/packages/perseus-editor/src/components/__stories__/locked-ellipse-settings.stories.tsx b/packages/perseus-editor/src/components/__docs__/locked-ellipse-settings.stories.tsx
similarity index 97%
rename from packages/perseus-editor/src/components/__stories__/locked-ellipse-settings.stories.tsx
rename to packages/perseus-editor/src/components/__docs__/locked-ellipse-settings.stories.tsx
index 8cbaffbe437..5aafd2bfff6 100644
--- a/packages/perseus-editor/src/components/__stories__/locked-ellipse-settings.stories.tsx
+++ b/packages/perseus-editor/src/components/__docs__/locked-ellipse-settings.stories.tsx
@@ -6,7 +6,7 @@ import LockedEllipseSettings from "../../widgets/interactive-graph-editor/locked
 import type {Meta, StoryObj} from "@storybook/react-vite";
 
 export default {
-    title: "PerseusEditor/Components/Locked Ellipse Settings",
+    title: "Editors/Components/Locked Ellipse Settings",
     component: LockedEllipseSettings,
 } as Meta<typeof LockedEllipseSettings>;
 
diff --git a/packages/perseus-editor/src/components/__stories__/locked-figures-section.stories.tsx b/packages/perseus-editor/src/components/__docs__/locked-figures-section.stories.tsx
similarity index 97%
rename from packages/perseus-editor/src/components/__stories__/locked-figures-section.stories.tsx
rename to packages/perseus-editor/src/components/__docs__/locked-figures-section.stories.tsx
index e7424367bb1..eae6ee7067a 100644
--- a/packages/perseus-editor/src/components/__stories__/locked-figures-section.stories.tsx
+++ b/packages/perseus-editor/src/components/__docs__/locked-figures-section.stories.tsx
@@ -10,7 +10,7 @@ import LockedFiguresSection from "../../widgets/interactive-graph-editor/locked-
 import type {Meta, StoryObj} from "@storybook/react-vite";
 
 export default {
-    title: "PerseusEditor/Components/Locked Figures Section",
+    title: "Editors/Components/Locked Figures Section",
     component: LockedFiguresSection,
 } as Meta<typeof LockedFiguresSection>;
 
diff --git a/packages/perseus-editor/src/components/__stories__/locked-function-settings.stories.tsx b/packages/perseus-editor/src/components/__docs__/locked-function-settings.stories.tsx
similarity index 95%
rename from packages/perseus-editor/src/components/__stories__/locked-function-settings.stories.tsx
rename to packages/perseus-editor/src/components/__docs__/locked-function-settings.stories.tsx
index c56db6d01df..19c3d0f321f 100644
--- a/packages/perseus-editor/src/components/__stories__/locked-function-settings.stories.tsx
+++ b/packages/perseus-editor/src/components/__docs__/locked-function-settings.stories.tsx
@@ -6,7 +6,7 @@ import LockedFunctionSettings from "../../widgets/interactive-graph-editor/locke
 import type {Meta, StoryObj} from "@storybook/react-vite";
 
 export default {
-    title: "PerseusEditor/Components/Locked Function Settings",
+    title: "Editors/Components/Locked Function Settings",
     component: LockedFunctionSettings,
 } as Meta<typeof LockedFunctionSettings>;
 
diff --git a/packages/perseus-editor/src/components/__stories__/locked-label-settings.stories.tsx b/packages/perseus-editor/src/components/__docs__/locked-label-settings.stories.tsx
similarity index 95%
rename from packages/perseus-editor/src/components/__stories__/locked-label-settings.stories.tsx
rename to packages/perseus-editor/src/components/__docs__/locked-label-settings.stories.tsx
index c37141c45c7..7af97e456fe 100644
--- a/packages/perseus-editor/src/components/__stories__/locked-label-settings.stories.tsx
+++ b/packages/perseus-editor/src/components/__docs__/locked-label-settings.stories.tsx
@@ -6,7 +6,7 @@ import LockedLabelSettings from "../../widgets/interactive-graph-editor/locked-f
 import type {Meta, StoryObj} from "@storybook/react-vite";
 
 export default {
-    title: "PerseusEditor/Components/Locked Label Settings",
+    title: "Editors/Components/Locked Label Settings",
     component: LockedLabelSettings,
 } as Meta<typeof LockedLabelSettings>;
 
diff --git a/packages/perseus-editor/src/components/__stories__/locked-line-settings.stories.tsx b/packages/perseus-editor/src/components/__docs__/locked-line-settings.stories.tsx
similarity index 98%
rename from packages/perseus-editor/src/components/__stories__/locked-line-settings.stories.tsx
rename to packages/perseus-editor/src/components/__docs__/locked-line-settings.stories.tsx
index aa78b0e6f2e..f94f16484b7 100644
--- a/packages/perseus-editor/src/components/__stories__/locked-line-settings.stories.tsx
+++ b/packages/perseus-editor/src/components/__docs__/locked-line-settings.stories.tsx
@@ -6,7 +6,7 @@ import LockedLineSettings from "../../widgets/interactive-graph-editor/locked-fi
 import type {Meta, StoryObj} from "@storybook/react-vite";
 
 export default {
-    title: "PerseusEditor/Components/Locked Line Settings",
+    title: "Editors/Components/Locked Line Settings",
     component: LockedLineSettings,
 } as Meta<typeof LockedLineSettings>;
 
diff --git a/packages/perseus-editor/src/components/__stories__/locked-point-settings.stories.tsx b/packages/perseus-editor/src/components/__docs__/locked-point-settings.stories.tsx
similarity index 97%
rename from packages/perseus-editor/src/components/__stories__/locked-point-settings.stories.tsx
rename to packages/perseus-editor/src/components/__docs__/locked-point-settings.stories.tsx
index b2f2c631175..ad98b9f2a71 100644
--- a/packages/perseus-editor/src/components/__stories__/locked-point-settings.stories.tsx
+++ b/packages/perseus-editor/src/components/__docs__/locked-point-settings.stories.tsx
@@ -6,7 +6,7 @@ import LockedPointSettings from "../../widgets/interactive-graph-editor/locked-f
 import type {Meta, StoryObj} from "@storybook/react-vite";
 
 export default {
-    title: "PerseusEditor/Components/Locked Point Settings",
+    title: "Editors/Components/Locked Point Settings",
     component: LockedPointSettings,
 } as Meta<typeof LockedPointSettings>;
 
diff --git a/packages/perseus-editor/src/components/__stories__/locked-polygon-settings.stories.tsx b/packages/perseus-editor/src/components/__docs__/locked-polygon-settings.stories.tsx
similarity index 97%
rename from packages/perseus-editor/src/components/__stories__/locked-polygon-settings.stories.tsx
rename to packages/perseus-editor/src/components/__docs__/locked-polygon-settings.stories.tsx
index 83699ae3bd1..b1f016f0d16 100644
--- a/packages/perseus-editor/src/components/__stories__/locked-polygon-settings.stories.tsx
+++ b/packages/perseus-editor/src/components/__docs__/locked-polygon-settings.stories.tsx
@@ -6,7 +6,7 @@ import LockedPolygonSettings from "../../widgets/interactive-graph-editor/locked
 import type {Meta, StoryObj} from "@storybook/react-vite";
 
 export default {
-    title: "PerseusEditor/Components/Locked Polygon Settings",
+    title: "Editors/Components/Locked Polygon Settings",
     component: LockedPolygonSettings,
 } as Meta<typeof LockedPolygonSettings>;
 
diff --git a/packages/perseus-editor/src/components/__stories__/locked-vector-settings.stories.tsx b/packages/perseus-editor/src/components/__docs__/locked-vector-settings.stories.tsx
similarity index 97%
rename from packages/perseus-editor/src/components/__stories__/locked-vector-settings.stories.tsx
rename to packages/perseus-editor/src/components/__docs__/locked-vector-settings.stories.tsx
index 9db64af36f6..05fd90a8a8d 100644
--- a/packages/perseus-editor/src/components/__stories__/locked-vector-settings.stories.tsx
+++ b/packages/perseus-editor/src/components/__docs__/locked-vector-settings.stories.tsx
@@ -6,7 +6,7 @@ import LockedVectorSettings from "../../widgets/interactive-graph-editor/locked-
 import type {Meta, StoryObj} from "@storybook/react-vite";
 
 export default {
-    title: "PerseusEditor/Components/Locked Vector Settings",
+    title: "Editors/Components/Locked Vector Settings",
     component: LockedVectorSettings,
 } as Meta<typeof LockedVectorSettings>;
 
diff --git a/packages/perseus-editor/src/components/__stories__/scrollless-number-text-field.stories.tsx b/packages/perseus-editor/src/components/__docs__/scrollless-number-text-field.stories.tsx
similarity index 97%
rename from packages/perseus-editor/src/components/__stories__/scrollless-number-text-field.stories.tsx
rename to packages/perseus-editor/src/components/__docs__/scrollless-number-text-field.stories.tsx
index dd262d690ac..1223c84ccef 100644
--- a/packages/perseus-editor/src/components/__stories__/scrollless-number-text-field.stories.tsx
+++ b/packages/perseus-editor/src/components/__docs__/scrollless-number-text-field.stories.tsx
@@ -7,7 +7,7 @@ import ScrolllessNumberTextField from "../scrollless-number-text-field";
 import type {StoryObj, Meta} from "@storybook/react-vite";
 
 export default {
-    title: "PerseusEditor/Components/Scrollless Number Text Field",
+    title: "Editors/Components/Scrollless Number Text Field",
     component: ScrolllessNumberTextField,
 } as Meta<typeof ScrolllessNumberTextField>;
 
diff --git a/packages/perseus-editor/src/components/__stories__/section-control-button.stories.tsx b/packages/perseus-editor/src/components/__docs__/section-control-button.stories.tsx
similarity index 84%
rename from packages/perseus-editor/src/components/__stories__/section-control-button.stories.tsx
rename to packages/perseus-editor/src/components/__docs__/section-control-button.stories.tsx
index 9e628bf4ae0..2eabde1f938 100644
--- a/packages/perseus-editor/src/components/__stories__/section-control-button.stories.tsx
+++ b/packages/perseus-editor/src/components/__docs__/section-control-button.stories.tsx
@@ -3,14 +3,14 @@ import * as React from "react";
 
 import SectionControlButton from "../section-control-button";
 
-type StoryArgs = Record<any, any>;
+type StoryArgs = Record<string, unknown>;
 
 type Story = {
     title: string;
 };
 
 export default {
-    title: "PerseusEditor/Components/Section Control Button",
+    title: "Editors/Components/Section Control Button",
 } as Story;
 
 export const ButtonForEditingSectionsOfContentWithInArticleEditor = (
diff --git a/packages/perseus-editor/src/components/__stories__/toggleable-caret.stories.tsx b/packages/perseus-editor/src/components/__docs__/toggleable-caret.stories.tsx
similarity index 93%
rename from packages/perseus-editor/src/components/__stories__/toggleable-caret.stories.tsx
rename to packages/perseus-editor/src/components/__docs__/toggleable-caret.stories.tsx
index 55e59b8b2c7..c5bc966857c 100644
--- a/packages/perseus-editor/src/components/__stories__/toggleable-caret.stories.tsx
+++ b/packages/perseus-editor/src/components/__docs__/toggleable-caret.stories.tsx
@@ -8,7 +8,7 @@ import type {StoryObj, Meta} from "@storybook/react-vite";
 type Story = StoryObj<typeof ToggleableCaret>;
 
 export default {
-    title: "PerseusEditor/Components/Toggleable Caret",
+    title: "Editors/Components/Toggleable Caret",
     component: ToggleableCaret,
 } satisfies Meta;
 
diff --git a/packages/perseus-editor/src/components/__stories__/viewport-resizer.stories.tsx b/packages/perseus-editor/src/components/__docs__/viewport-resizer.stories.tsx
similarity index 93%
rename from packages/perseus-editor/src/components/__stories__/viewport-resizer.stories.tsx
rename to packages/perseus-editor/src/components/__docs__/viewport-resizer.stories.tsx
index 88ef9852425..c901b4268d8 100644
--- a/packages/perseus-editor/src/components/__stories__/viewport-resizer.stories.tsx
+++ b/packages/perseus-editor/src/components/__docs__/viewport-resizer.stories.tsx
@@ -8,7 +8,7 @@ import type {Meta, StoryFn} from "@storybook/react-vite";
 
 const meta: Meta<typeof ViewportResizer> = {
     component: ViewportResizer,
-    title: "PerseusEditor/Components/Viewport Resizer",
+    title: "Editors/Components/Viewport Resizer",
 };
 
 export default meta;
diff --git a/packages/perseus-editor/src/components/__tests__/graph-settings.test.tsx b/packages/perseus-editor/src/components/__tests__/graph-settings.test.tsx
index 29bf1fbbf96..26e3e651987 100644
--- a/packages/perseus-editor/src/components/__tests__/graph-settings.test.tsx
+++ b/packages/perseus-editor/src/components/__tests__/graph-settings.test.tsx
@@ -169,7 +169,6 @@ describe("GraphSettings", () => {
         // Assert
         expect(onChange).toHaveBeenCalledWith(
             expect.objectContaining({markings: "grid"}),
-            undefined,
         );
     });
 
@@ -192,7 +191,6 @@ describe("GraphSettings", () => {
         // Assert
         expect(onChange).toHaveBeenCalledWith(
             expect.objectContaining({rulerLabel: "cm"}),
-            undefined,
         );
     });
 
@@ -214,7 +212,6 @@ describe("GraphSettings", () => {
         // Assert
         expect(onChange).toHaveBeenCalledWith(
             expect.objectContaining({rulerTicks: 4}),
-            undefined,
         );
     });
 
@@ -245,7 +242,6 @@ describe("GraphSettings", () => {
                         url: "https://example.com/image.png",
                     }),
                 }),
-                undefined,
             ),
         );
     });
@@ -276,7 +272,6 @@ describe("GraphSettings", () => {
                 expect.objectContaining({
                     valid: "Image must be smaller than 450px x 450px.",
                 }),
-                undefined,
             ),
         );
     });
@@ -306,7 +301,6 @@ describe("GraphSettings", () => {
                         url: null,
                     }),
                 }),
-                undefined,
             ),
         );
     });
@@ -353,7 +347,6 @@ describe("GraphSettings", () => {
         // Assert
         expect(onChange).toHaveBeenCalledWith(
             expect.objectContaining({showProtractor: false}),
-            undefined,
         );
     });
 
@@ -381,7 +374,6 @@ describe("GraphSettings", () => {
                     ],
                     valid: true,
                 }),
-                undefined,
             ),
         );
     });
@@ -410,7 +402,6 @@ describe("GraphSettings", () => {
                     ],
                     valid: true,
                 }),
-                undefined,
             ),
         );
     });
@@ -433,13 +424,8 @@ describe("GraphSettings", () => {
         await waitFor(() =>
             expect(onChange).toHaveBeenCalledWith(
                 expect.objectContaining({
-                    range: [
-                        [-10, 10],
-                        [-10, 10],
-                    ],
                     valid: "Range must have a higher number on the right",
                 }),
-                undefined,
             ),
         );
     });
@@ -465,7 +451,6 @@ describe("GraphSettings", () => {
                     step: [2, 1],
                     valid: true,
                 }),
-                undefined,
             ),
         );
     });
@@ -488,10 +473,8 @@ describe("GraphSettings", () => {
         await waitFor(() =>
             expect(onChange).toHaveBeenCalledWith(
                 expect.objectContaining({
-                    step: [1, 1],
                     valid: "Step is too large, there must be at least 3 ticks.",
                 }),
-                undefined,
             ),
         );
     });
@@ -521,10 +504,8 @@ describe("GraphSettings", () => {
         await waitFor(() =>
             expect(onChange).toHaveBeenCalledWith(
                 expect.objectContaining({
-                    step: [1, 1],
                     valid: "Step is too small, there can be at most 20 ticks.",
                 }),
-                undefined,
             ),
         );
     });
@@ -554,7 +535,6 @@ describe("GraphSettings", () => {
                     snapStep: [2, 1],
                     valid: true,
                 }),
-                undefined,
             ),
         );
     });
@@ -581,10 +561,8 @@ describe("GraphSettings", () => {
         await waitFor(() =>
             expect(onChange).toHaveBeenCalledWith(
                 expect.objectContaining({
-                    snapStep: [1, 1],
                     valid: "Snap step is too large, there must be at least 5 ticks.",
                 }),
-                undefined,
             ),
         );
     });
@@ -611,7 +589,6 @@ describe("GraphSettings", () => {
                     gridStep: [2, 1],
                     valid: true,
                 }),
-                undefined,
             ),
         );
     });
@@ -635,10 +612,8 @@ describe("GraphSettings", () => {
         await waitFor(() =>
             expect(onChange).toHaveBeenCalledWith(
                 expect.objectContaining({
-                    gridStep: [1, 1],
                     valid: "Grid step is too large, there must be at least 3 ticks.",
                 }),
-                undefined,
             ),
         );
     });
@@ -664,7 +639,6 @@ describe("GraphSettings", () => {
                 expect.objectContaining({
                     labels: ["time", "y"],
                 }),
-                undefined,
             ),
         );
     });
@@ -690,7 +664,6 @@ describe("GraphSettings", () => {
                 expect.objectContaining({
                     labels: ["x", "count"],
                 }),
-                undefined,
             ),
         );
     });
@@ -719,7 +692,6 @@ describe("GraphSettings", () => {
                 expect.objectContaining({
                     box: [300, 288],
                 }),
-                undefined,
             ),
         );
     });
diff --git a/packages/perseus-editor/src/components/blur-input.tsx b/packages/perseus-editor/src/components/blur-input.tsx
index e7a71a98c45..d8603399d46 100644
--- a/packages/perseus-editor/src/components/blur-input.tsx
+++ b/packages/perseus-editor/src/components/blur-input.tsx
@@ -39,11 +39,11 @@ class BlurInput extends React.Component<Props, State> {
         this.setState({value: nextProps.value});
     }
 
-    handleChange: (e: any) => void = (e) => {
+    handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         this.setState({value: e.target.value});
     };
 
-    handleBlur: (e: any) => void = (e) => {
+    handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
         this.props.onChange(e.target.value);
     };
 
diff --git a/packages/perseus-editor/src/components/drag-target.tsx b/packages/perseus-editor/src/components/drag-target.tsx
index 956f1aea9cd..ca4b7c10054 100644
--- a/packages/perseus-editor/src/components/drag-target.tsx
+++ b/packages/perseus-editor/src/components/drag-target.tsx
@@ -13,19 +13,18 @@
  * it's a target.
  */
 
+import {View} from "@khanacademy/wonder-blocks-core";
 import * as React from "react";
 
 type Props = {
-    onDrop: (e: DragEvent) => void;
-    component?: any;
-    shouldDragHighlight: (any) => boolean;
-    style?: any;
-    children?: any;
+    onDrop: (e: React.MouseEvent) => unknown;
+    shouldDragHighlight: (e: React.MouseEvent) => boolean;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
     className?: string;
 };
 
 type DefaultProps = {
-    component: Props["component"];
     shouldDragHighlight: Props["shouldDragHighlight"];
 };
 
@@ -34,11 +33,10 @@ type State = {
 };
 class DragTarget extends React.Component<Props, State> {
     static defaultProps: DefaultProps = {
-        component: "div",
         shouldDragHighlight: () => true,
     };
 
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
         this.state = {
             dragHover: false,
@@ -51,7 +49,7 @@ class DragTarget extends React.Component<Props, State> {
         this.handleDragEnter = this.handleDragEnter.bind(this);
     }
 
-    handleDrop(e: DragEvent) {
+    handleDrop(e: React.MouseEvent) {
         e.stopPropagation();
         e.preventDefault();
         this.setState({dragHover: false});
@@ -62,7 +60,7 @@ class DragTarget extends React.Component<Props, State> {
         this.setState({dragHover: false});
     }
 
-    handleDragOver(e) {
+    handleDragOver(e: React.MouseEvent) {
         e.preventDefault();
     }
 
@@ -70,21 +68,20 @@ class DragTarget extends React.Component<Props, State> {
         this.setState({dragHover: false});
     }
 
-    handleDragEnter(e) {
+    handleDragEnter(e: React.MouseEvent) {
         this.setState({dragHover: this.props.shouldDragHighlight(e)});
     }
 
     render() {
         const opacity = this.state.dragHover ? {opacity: 0.3} : {};
         const {
-            component: Component,
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             shouldDragHighlight,
             ...forwardProps
         } = this.props;
 
         return (
-            <Component
+            <View
                 {...forwardProps}
                 style={Object.assign({}, this.props.style, opacity)}
                 onDrop={this.handleDrop}
diff --git a/packages/perseus-editor/src/components/dropdown-option.tsx b/packages/perseus-editor/src/components/dropdown-option.tsx
index aa4542ddbc4..0db64c599a3 100644
--- a/packages/perseus-editor/src/components/dropdown-option.tsx
+++ b/packages/perseus-editor/src/components/dropdown-option.tsx
@@ -63,22 +63,22 @@ class Option extends React.Component<Props> {
     // @ts-expect-error - TS2564 - Property 'node' has no initializer and is not definitely assigned in the constructor.
     node: HTMLDivElement;
 
-    handleKeyDown(event: any): void {
+    handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>): void {
         const {onDropdownClose} = this.props;
         const pressedKey = event.key;
-        const focusedElement = event.target;
+        const focusedElement = event.currentTarget;
 
-        if (pressedKey === "ArrowDown" && focusedElement.nextSibling) {
+        if (pressedKey === "ArrowDown" && focusedElement.nextElementSibling) {
             event.preventDefault();
-            focusedElement.nextSibling.focus();
+            (focusedElement.nextElementSibling as HTMLElement).focus();
         }
-        if (pressedKey === "ArrowUp" && focusedElement.previousSibling) {
+        if (pressedKey === "ArrowUp" && focusedElement.previousElementSibling) {
             event.preventDefault();
-            focusedElement.previousSibling.focus();
+            (focusedElement.previousElementSibling as HTMLElement).focus();
         }
         if (
             pressedKey === "ArrowUp" &&
-            !focusedElement.previousSibling &&
+            !focusedElement.previousElementSibling &&
             onDropdownClose
         ) {
             event.preventDefault();
diff --git a/packages/perseus-editor/src/components/form-wrapped-text-field.tsx b/packages/perseus-editor/src/components/form-wrapped-text-field.tsx
index 2831f042846..2a30189f5c2 100644
--- a/packages/perseus-editor/src/components/form-wrapped-text-field.tsx
+++ b/packages/perseus-editor/src/components/form-wrapped-text-field.tsx
@@ -120,7 +120,7 @@ class FormWrappedTextField extends React.Component<PropsWithForwardRef, State> {
         } = this.props;
         const {focused} = this.state;
 
-        const extraStyles: any = {};
+        const extraStyles: React.CSSProperties = {};
         const spanStyle = [styles.input, styles.container];
 
         // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
diff --git a/packages/perseus-editor/src/components/graph-settings.tsx b/packages/perseus-editor/src/components/graph-settings.tsx
index 5b909b115a9..38aba435063 100644
--- a/packages/perseus-editor/src/components/graph-settings.tsx
+++ b/packages/perseus-editor/src/components/graph-settings.tsx
@@ -6,7 +6,6 @@ import {KhanMath} from "@khanacademy/kmath";
 import {
     components,
     interactiveSizes,
-    Changeable,
     Dependencies,
     Util,
 } from "@khanacademy/perseus";
@@ -15,7 +14,11 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import _ from "underscore";
 
-import type {Coords, MarkingsType} from "@khanacademy/perseus-core";
+import type {
+    Coords,
+    MarkingsType,
+    PerseusImageBackground,
+} from "@khanacademy/perseus-core";
 
 const {ButtonGroup, InfoTip, RangeInput} = components;
 
@@ -25,7 +28,7 @@ const defaultBackgroundImage = {
     height: 0,
 } as const;
 
-function numSteps(range: any, step: any) {
+function numSteps(range: [number, number], step: number) {
     return Math.floor((range[1] - range[0]) / step);
 }
 type Props = {
@@ -39,14 +42,15 @@ type Props = {
     gridStep: [number, number];
     snapStep: [number, number];
     valid: boolean;
-    backgroundImage: any;
+    backgroundImage: PerseusImageBackground;
     markings: MarkingsType;
     showProtractor?: boolean;
     showRuler?: boolean;
     showTooltips?: boolean;
     rulerLabel: string;
     rulerTicks: number;
-} & Changeable.ChangeableProps;
+    onChange: (values: Record<string, unknown>) => void;
+};
 
 type DefaultProps = {
     editableSettings: Props["editableSettings"];
@@ -67,12 +71,12 @@ type DefaultProps = {
 };
 
 type State = {
-    labelsTextbox: string[];
+    labelsTextbox: readonly string[];
     gridStepTextbox: number[];
     snapStepTextbox: number[];
     stepTextbox: number[];
-    rangeTextbox: any[];
-    backgroundImage: any;
+    rangeTextbox: [number, number][];
+    backgroundImage: PerseusImageBackground;
 };
 
 class GraphSettings extends React.Component<Props, State> {
@@ -104,11 +108,10 @@ class GraphSettings extends React.Component<Props, State> {
 
     _isMounted = false;
 
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
         this.state = this.getInitialState();
 
-        this.change = this.change.bind(this);
         this.changeBackgroundUrl = this.changeBackgroundUrl.bind(this);
         this.changeGraph = this.changeGraph.bind(this);
         this.changeGridStep = this.changeGridStep.bind(this);
@@ -132,7 +135,7 @@ class GraphSettings extends React.Component<Props, State> {
         this.changeGraph = _.debounce(this.changeGraph, 300);
     }
 
-    UNSAFE_componentWillReceiveProps(nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: Props) {
         if (
             !_.isEqual(this.props.labels, nextProps.labels) ||
             !_.isEqual(this.props.gridStep, nextProps.gridStep) ||
@@ -149,7 +152,7 @@ class GraphSettings extends React.Component<Props, State> {
         this._isMounted = false;
     }
 
-    stateFromProps(props) {
+    stateFromProps(props: Props): State {
         return {
             labelsTextbox: props.labels,
             gridStepTextbox: props.gridStep,
@@ -160,29 +163,25 @@ class GraphSettings extends React.Component<Props, State> {
         };
     }
 
-    // TODO(benchristel): Refactor this component to be an ES6 class, so we can
-    // type change as ChangeFn.
-    change(...args) {
-        // TODO(LEMS-2656): remove TS suppression
-        // @ts-expect-error: Argument of type 'any[]' is not assignable to parameter of type '[newPropsOrSinglePropName: string | { [key: string]: any; }, propValue?: any, callback?: (() => unknown) | undefined]'. Target requires 1 element(s) but source may have fewer.
-        return Changeable.change.apply(this, args);
-    }
-
-    changeRulerLabel(e) {
-        this.change({rulerLabel: e.target.value});
+    changeRulerLabel(e: React.ChangeEvent<HTMLSelectElement>) {
+        this.props.onChange({rulerLabel: e.target.value});
     }
 
-    changeRulerTicks(e) {
-        this.change({rulerTicks: +e.target.value});
+    changeRulerTicks(e: React.ChangeEvent<HTMLSelectElement>) {
+        this.props.onChange({rulerTicks: +e.target.value});
     }
 
-    changeBackgroundUrl(e) {
+    changeBackgroundUrl(
+        e:
+            | React.FocusEvent<HTMLInputElement>
+            | React.KeyboardEvent<HTMLInputElement>,
+    ) {
         // Only continue on blur or "enter"
-        if (e.type === "keypress" && e.key !== "Enter") {
+        if (e.type === "keypress" && "key" in e && e.key !== "Enter") {
             return;
         }
 
-        const setUrl = (url, width: number, height: number) => {
+        const setUrl = (url: string | null, width: number, height: number) => {
             const image = _.clone(this.props.backgroundImage);
             image.url = url;
             image.width = width;
@@ -208,7 +207,7 @@ class GraphSettings extends React.Component<Props, State> {
         }
     }
 
-    renderLabelChoices(choices) {
+    renderLabelChoices(choices: ReadonlyArray<[string, string]>) {
         return _.map(choices, function ([name, value]) {
             return (
                 <option key={value} value={value}>
@@ -218,7 +217,7 @@ class GraphSettings extends React.Component<Props, State> {
         });
     }
 
-    validRange(range) {
+    validRange(range: [number, number]): string | true {
         const numbers = _.every(range, function (num) {
             return _.isFinite(num);
         });
@@ -231,7 +230,13 @@ class GraphSettings extends React.Component<Props, State> {
         return true;
     }
 
-    validateStepValue(settings) {
+    validateStepValue(settings: {
+        step: number;
+        range: [number, number];
+        name: string;
+        minTicks: number;
+        maxTicks: number;
+    }): string | true {
         const {step, range, name, minTicks, maxTicks} = settings;
 
         if (!_.isFinite(step)) {
@@ -257,7 +262,7 @@ class GraphSettings extends React.Component<Props, State> {
         return true;
     }
 
-    validSnapStep(step, range) {
+    validSnapStep(step: number, range: [number, number]) {
         return this.validateStepValue({
             step: step,
             range: range,
@@ -267,7 +272,7 @@ class GraphSettings extends React.Component<Props, State> {
         });
     }
 
-    validGridStep(step, range) {
+    validGridStep(step: number, range: [number, number]) {
         return this.validateStepValue({
             step: step,
             range: range,
@@ -277,7 +282,7 @@ class GraphSettings extends React.Component<Props, State> {
         });
     }
 
-    validStep(step, range) {
+    validStep(step: number, range: [number, number]) {
         return this.validateStepValue({
             step: step,
             range: range,
@@ -287,13 +292,14 @@ class GraphSettings extends React.Component<Props, State> {
         });
     }
 
-    validBackgroundImageSize(image) {
+    validBackgroundImageSize(image: PerseusImageBackground) {
         // Ignore empty images
         if (!image.url) {
             return true;
         }
 
-        const validSize = image.width <= 450 && image.height <= 450;
+        const validSize =
+            (image.width ?? 0) <= 450 && (image.height ?? 0) <= 450;
 
         if (!validSize) {
             return "Image must be smaller than 450px x 450px.";
@@ -301,7 +307,13 @@ class GraphSettings extends React.Component<Props, State> {
         return true;
     }
 
-    validateGraphSettings(range, step, gridStep, snapStep, image) {
+    validateGraphSettings(
+        range: Coords,
+        step: number[],
+        gridStep: number[],
+        snapStep: number[],
+        image: PerseusImageBackground,
+    ) {
         const self = this;
         let msg;
         const goodRange = _.every(range, function (range) {
@@ -340,14 +352,14 @@ class GraphSettings extends React.Component<Props, State> {
         return true;
     }
 
-    changeLabel(i, e) {
+    changeLabel(i: number, e: React.ChangeEvent<HTMLInputElement>) {
         const val = e.target.value;
         const labels = this.state.labelsTextbox.slice();
         labels[i] = val;
         this.setState({labelsTextbox: labels}, this.changeGraph);
     }
 
-    changeRange(i, values) {
+    changeRange(i: number, values: [number, number]) {
         const ranges = this.state.rangeTextbox.slice();
         ranges[i] = values;
         const step = this.state.stepTextbox.slice();
@@ -373,15 +385,15 @@ class GraphSettings extends React.Component<Props, State> {
         );
     }
 
-    changeStep(step) {
+    changeStep(step: number[]) {
         this.setState({stepTextbox: step}, this.changeGraph);
     }
 
-    changeSnapStep(snapStep) {
+    changeSnapStep(snapStep: number[]) {
         this.setState({snapStepTextbox: snapStep}, this.changeGraph);
     }
 
-    changeGridStep(gridStep) {
+    changeGridStep(gridStep: number[]) {
         this.setState(
             {
                 gridStepTextbox: gridStep,
@@ -395,9 +407,9 @@ class GraphSettings extends React.Component<Props, State> {
 
     changeGraph() {
         const labels = this.state.labelsTextbox;
-        const range = _.map(this.state.rangeTextbox, function (range) {
-            return _.map(range, Number);
-        });
+        const range = this.state.rangeTextbox.map(
+            (range) => range.map(Number) as [number, number],
+        ) as Coords;
         const step = _.map(this.state.stepTextbox, Number);
         const gridStep = this.state.gridStepTextbox;
         const snapStep = this.state.snapStepTextbox;
@@ -417,7 +429,7 @@ class GraphSettings extends React.Component<Props, State> {
 
         if (validationResult === true) {
             // either true or a string
-            this.change({
+            this.props.onChange({
                 valid: true,
                 labels: labels,
                 range: range,
@@ -427,7 +439,7 @@ class GraphSettings extends React.Component<Props, State> {
                 backgroundImage: image,
             });
         } else {
-            this.change({
+            this.props.onChange({
                 valid: validationResult, // a string message, not false
             });
         }
@@ -458,7 +470,7 @@ class GraphSettings extends React.Component<Props, State> {
                                 id="canvas-size"
                                 value={this.props.box}
                                 onChange={(box) => {
-                                    this.change({box: box});
+                                    this.props.onChange({box: box});
                                 }}
                             />
                         </div>
@@ -561,7 +573,9 @@ class GraphSettings extends React.Component<Props, State> {
                                     {value: "grid", content: "Grid"},
                                     {value: "none", content: "None"},
                                 ]}
-                                onChange={this.change("markings")}
+                                onChange={(value) =>
+                                    this.props.onChange({markings: value})
+                                }
                             />
                         </div>
                         <div className="perseus-widget-left-col">
@@ -569,7 +583,7 @@ class GraphSettings extends React.Component<Props, State> {
                                 label="Show tooltips"
                                 checked={this.props.showTooltips}
                                 onChange={(value) => {
-                                    this.change({showTooltips: value});
+                                    this.props.onChange({showTooltips: value});
                                 }}
                             />
                         </div>
@@ -617,7 +631,7 @@ class GraphSettings extends React.Component<Props, State> {
                                     label="Show ruler"
                                     checked={this.props.showRuler}
                                     onChange={(value) => {
-                                        this.change({showRuler: value});
+                                        this.props.onChange({showRuler: value});
                                     }}
                                 />
                             </div>
@@ -626,7 +640,9 @@ class GraphSettings extends React.Component<Props, State> {
                                     label="Show protractor"
                                     checked={this.props.showProtractor}
                                     onChange={(value) => {
-                                        this.change({showProtractor: value});
+                                        this.props.onChange({
+                                            showProtractor: value,
+                                        });
                                     }}
                                 />
                             </div>
diff --git a/packages/perseus-editor/src/components/json-editor.tsx b/packages/perseus-editor/src/components/json-editor.tsx
index 7360b3a7cbe..d5ea44f31c6 100644
--- a/packages/perseus-editor/src/components/json-editor.tsx
+++ b/packages/perseus-editor/src/components/json-editor.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-invalid-this */
 import {isSuccess} from "@khanacademy/perseus-core";
 import * as React from "react";
 import _ from "underscore";
@@ -21,7 +20,7 @@ type State = {
 class JsonEditor<TData> extends React.Component<Props<TData>, State> {
     static displayName: "JsonEditor";
 
-    constructor(props) {
+    constructor(props: Props<TData>) {
         super(props);
         this.state = this.getInitialState();
 
@@ -62,25 +61,29 @@ class JsonEditor<TData> extends React.Component<Props<TData>, State> {
         }
     }
 
-    handleKeyDown(e) {
+    handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
         // This handler allows the tab character to be entered by pressing
         // tab, instead of jumping to the next (non-existant) field
         if (e.key === "Tab") {
-            const cursorPos = e.target.selectionStart;
-            const v = e.target.value;
+            const textarea = e.currentTarget;
+            const cursorPos = textarea.selectionStart;
+            const v = textarea.value;
             const textBefore = v.substring(0, cursorPos);
             const textAfter = v.substring(cursorPos, v.length);
-            e.target.value = textBefore + "    " + textAfter;
-            e.target.selectionStart = textBefore.length + 4;
-            e.target.selectionEnd = textBefore.length + 4;
+            textarea.value = textBefore + "    " + textAfter;
+            textarea.selectionStart = textBefore.length + 4;
+            textarea.selectionEnd = textBefore.length + 4;
 
             e.preventDefault();
-            this.handleChange(e);
+            this.processChange(textarea.value);
         }
     }
 
-    handleChange(e) {
-        const nextString = e.target.value;
+    handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
+        this.processChange(e.target.value);
+    }
+
+    processChange(nextString: string) {
         try {
             const json = this.typesafeParseOrThrow(nextString);
             // This callback unfortunately causes multiple renders,
@@ -91,8 +94,7 @@ class JsonEditor<TData> extends React.Component<Props<TData>, State> {
                     currentValue: nextString,
                     valid: true,
                 },
-                function () {
-                    // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+                () => {
                     this.props.onChange(json);
                 },
             );
@@ -106,7 +108,7 @@ class JsonEditor<TData> extends React.Component<Props<TData>, State> {
 
     // You can type whatever you want as you're typing, but if it's not valid
     // when you blur, it will revert to the last valid value.
-    handleBlur(e) {
+    handleBlur(e: React.FocusEvent<HTMLTextAreaElement>) {
         const nextString = e.target.value;
         try {
             const json = this.typesafeParseOrThrow(nextString);
@@ -118,8 +120,7 @@ class JsonEditor<TData> extends React.Component<Props<TData>, State> {
                     currentValue: JSON.stringify(json, null, 4),
                     valid: true,
                 },
-                function () {
-                    // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+                () => {
                     this.props.onChange(json);
                 },
             );
diff --git a/packages/perseus-editor/src/components/link.ts b/packages/perseus-editor/src/components/link.ts
index 068cf559416..ee81d6e21fa 100644
--- a/packages/perseus-editor/src/components/link.ts
+++ b/packages/perseus-editor/src/components/link.ts
@@ -28,9 +28,7 @@ type Props = DefaultProps & {
     // component as its base link class.
     className?: string;
     // Additional direct styles to add.
-    inlineStyles?: {
-        [key: string]: any;
-    };
+    inlineStyles?: React.CSSProperties;
     // Optional referrer query parameter to add to the end of the URL, used
     // for analytics purposes.
     referrer?: string;
diff --git a/packages/perseus-editor/src/components/widget-editor.tsx b/packages/perseus-editor/src/components/widget-editor.tsx
index e5c3c33b6d6..3d92c58c317 100644
--- a/packages/perseus-editor/src/components/widget-editor.tsx
+++ b/packages/perseus-editor/src/components/widget-editor.tsx
@@ -42,7 +42,7 @@ const _upgradeWidgetInfo = (props: WidgetEditorProps): PerseusWidget => {
     // We can't call serialize here because this.refs.widget
     // doesn't exist before this component is mounted.
     const filteredProps = excludeDenylistKeys(props);
-    return applyDefaultsToWidget(filteredProps as any);
+    return applyDefaultsToWidget(filteredProps as PerseusWidget);
 };
 
 // This component handles upgading widget editor props via prop
@@ -87,10 +87,6 @@ class WidgetEditor extends React.Component<
         cb: () => unknown,
         silent: boolean,
     ) => {
-        // Casting to any is necessary because typescript
-        // seems confused about the type of WidgetOptions
-        // TODO (LC-1794): Fix this type so that we don't
-        // require the cast to any.
         const newWidgetInfo = {
             ...this.state.widgetInfo,
             options: {
@@ -98,7 +94,7 @@ class WidgetEditor extends React.Component<
                 ...(this.widget.current?.serialize() ?? {}),
                 ...newProps,
             },
-        } as any;
+        } as PerseusWidget;
         this.props.onChange(newWidgetInfo, cb, silent);
     };
 
@@ -106,7 +102,7 @@ class WidgetEditor extends React.Component<
         const newWidgetInfo = {
             ...this.state.widgetInfo,
             static: value,
-        } as PerseusWidget;
+        } satisfies PerseusWidget;
         this.props.onChange(newWidgetInfo);
     };
 
diff --git a/packages/perseus-editor/src/editor.tsx b/packages/perseus-editor/src/editor.tsx
index e50b414e5f2..8c1470ba58a 100644
--- a/packages/perseus-editor/src/editor.tsx
+++ b/packages/perseus-editor/src/editor.tsx
@@ -364,10 +364,13 @@ class Editor extends React.Component<Props, State> {
         });
     };
 
-    handleDrop: (e: DragEvent) => void = (e: DragEvent) => {
+    handleDrop = (e: React.MouseEvent) => {
         const {imageUploader} = this.props;
         let content = this.state.textAreaValue || "";
-        const dataTransfer = e.dataTransfer;
+        const dataTransfer =
+            "dataTransfer" in e
+                ? (e.dataTransfer as DataTransfer | null)
+                : null;
 
         if (!dataTransfer || !imageUploader) {
             return;
diff --git a/packages/perseus-editor/src/widgets/__tests__/grapher-editor.test.tsx b/packages/perseus-editor/src/widgets/__tests__/grapher-editor.test.tsx
new file mode 100644
index 00000000000..61359faef45
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/__tests__/grapher-editor.test.tsx
@@ -0,0 +1,70 @@
+import {ApiOptions, Dependencies} from "@khanacademy/perseus";
+import {grapherLogic} from "@khanacademy/perseus-core";
+import {render, screen} from "@testing-library/react";
+import {userEvent as userEventLib} from "@testing-library/user-event";
+import * as React from "react";
+
+import {testDependencies} from "../../testing/test-dependencies";
+import GrapherEditor from "../grapher-editor";
+
+import type {UserEvent} from "@testing-library/user-event";
+
+const defaultProps = {
+    ...grapherLogic.defaultWidgetOptions,
+    apiOptions: ApiOptions.defaults,
+    onChange: () => {},
+};
+
+describe("grapher-editor", () => {
+    let userEvent: UserEvent;
+    beforeEach(() => {
+        userEvent = userEventLib.setup({
+            advanceTimers: jest.advanceTimersByTime,
+        });
+
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    it("should render", async () => {
+        render(<GrapherEditor {...defaultProps} />);
+
+        expect(
+            await screen.findByText("Available functions:"),
+        ).toBeInTheDocument();
+    });
+
+    it("preserves existing graph properties when GraphSettings onChange is called", async () => {
+        const onChangeMock = jest.fn();
+        const graph = {
+            ...grapherLogic.defaultWidgetOptions.graph,
+            box: [400, 400],
+            gridStep: [1, 1],
+            snapStep: [0.5, 0.5],
+        };
+
+        render(
+            <GrapherEditor
+                {...defaultProps}
+                graph={graph}
+                onChange={onChangeMock}
+            />,
+        );
+
+        // Act - change the markings setting via GraphSettings
+        const button = screen.getByRole("button", {name: "Grid"});
+        await userEvent.click(button);
+
+        // Assert - the onChange call should include the new markings
+        // AND preserve existing graph properties like box
+        expect(onChangeMock).toHaveBeenCalledWith(
+            expect.objectContaining({
+                graph: expect.objectContaining({
+                    box: [400, 400],
+                    markings: "grid",
+                }),
+            }),
+        );
+    });
+});
diff --git a/packages/perseus-editor/src/widgets/grapher-editor.tsx b/packages/perseus-editor/src/widgets/grapher-editor.tsx
index 6635a9c3168..5cc05b6ae7a 100644
--- a/packages/perseus-editor/src/widgets/grapher-editor.tsx
+++ b/packages/perseus-editor/src/widgets/grapher-editor.tsx
@@ -1,7 +1,5 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
 import {
     components,
-    Changeable,
     GrapherUtil,
     GrapherWidget,
     containerSizeClass,
@@ -16,9 +14,11 @@ import _ from "underscore";
 
 import GraphSettings from "../components/graph-settings";
 
+import type {APIOptionsWithDefaults} from "@khanacademy/perseus";
 import type {
     GrapherAnswerTypes,
     GrapherDefaultWidgetOptions,
+    PerseusGrapherWidgetOptions,
 } from "@khanacademy/perseus-core";
 import type {PropsFor} from "@khanacademy/wonder-blocks-core";
 
@@ -27,22 +27,20 @@ const Grapher = GrapherWidget.widget;
 const {chooseType, defaultPlotProps, getEquationString, typeToButton} =
     GrapherUtil;
 
-type Props = any;
+type Props = {
+    onChange: (newProps: Record<string, unknown>) => void;
+    graph: PerseusGrapherWidgetOptions["graph"];
+    correct: GrapherAnswerTypes;
+    availableTypes: PerseusGrapherWidgetOptions["availableTypes"];
+    apiOptions: APIOptionsWithDefaults;
+};
 
 class GrapherEditor extends React.Component<Props> {
-    static propTypes = {
-        ...Changeable.propTypes,
-    };
-
     static widgetName = "grapher" as const;
 
     static defaultProps: GrapherDefaultWidgetOptions =
         grapherLogic.defaultWidgetOptions;
 
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
     handleAvailableTypesChange = (newAvailableTypes: Array<any>) => {
         let correct = this.props.correct;
 
@@ -77,7 +75,7 @@ class GrapherEditor extends React.Component<Props> {
                 graph: this.props.graph,
                 userInput: this.props.correct,
                 correct: this.props.correct,
-                handleUserInput: (userInput, cb) => {
+                handleUserInput: (userInput) => {
                     let correct = this.props.correct;
                     if (correct.type === userInput?.type) {
                         correct = _.extend({}, correct, userInput);
@@ -85,9 +83,9 @@ class GrapherEditor extends React.Component<Props> {
                         // Clear options from previous graph
                         correct = userInput;
                     }
-                    this.props.onChange({correct: correct}, cb);
+                    this.props.onChange({correct: correct});
                 },
-                availableTypes: this.props.availableTypes,
+                availableTypes: [...this.props.availableTypes],
                 trackInteraction: function () {},
                 // Set the "correct answer" graph to static when editing is disabled
                 static: this.props.apiOptions.editingDisabled,
@@ -130,14 +128,19 @@ class GrapherEditor extends React.Component<Props> {
                     step={this.props.graph.step}
                     gridStep={this.props.graph.gridStep}
                     snapStep={this.props.graph.snapStep}
-                    valid={this.props.graph.valid}
+                    valid={this.props.graph.valid === true}
                     backgroundImage={this.props.graph.backgroundImage}
                     markings={this.props.graph.markings}
                     rulerLabel={this.props.graph.rulerLabel}
                     rulerTicks={this.props.graph.rulerTicks}
                     showTooltips={this.props.graph.showTooltips}
-                    // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                    onChange={this.change("graph")}
+                    onChange={(newProps) =>
+                        // Spread existing graph props to preserve properties not included
+                        // in the GraphSettings onChange payload (e.g. box, markings).
+                        this.props.onChange({
+                            graph: {...this.props.graph, ...newProps},
+                        })
+                    }
                 />
                 <div className="perseus-widget-row">
                     {/* eslint-disable-next-line jsx-a11y/label-has-associated-control -- TODO(LEMS-2871): Address a11y error */}
diff --git a/packages/perseus-editor/src/widgets/interaction-editor/__tests__/interaction-editor.test.tsx b/packages/perseus-editor/src/widgets/interaction-editor/__tests__/interaction-editor.test.tsx
new file mode 100644
index 00000000000..db456557c2b
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/interaction-editor/__tests__/interaction-editor.test.tsx
@@ -0,0 +1,63 @@
+import {Dependencies} from "@khanacademy/perseus";
+import {interactionLogic} from "@khanacademy/perseus-core";
+import {render, screen} from "@testing-library/react";
+import {userEvent as userEventLib} from "@testing-library/user-event";
+import * as React from "react";
+
+import {testDependencies} from "../../../testing/test-dependencies";
+import InteractionEditor from "../interaction-editor";
+
+import type {UserEvent} from "@testing-library/user-event";
+
+const defaultProps = {
+    ...interactionLogic.defaultWidgetOptions,
+    onChange: () => {},
+};
+
+describe("interaction-editor", () => {
+    let userEvent: UserEvent;
+    beforeEach(() => {
+        userEvent = userEventLib.setup({
+            advanceTimers: jest.advanceTimersByTime,
+        });
+
+        Dependencies.setDependencies(testDependencies);
+    });
+
+    it("should render", async () => {
+        render(<InteractionEditor {...defaultProps} />);
+
+        expect(await screen.findByText("Grid settings")).toBeInTheDocument();
+    });
+
+    it("preserves existing graph properties when GraphSettings onChange is called", async () => {
+        const onChangeMock = jest.fn();
+        const graph = {
+            ...interactionLogic.defaultWidgetOptions.graph,
+            markings: "graph" as const,
+        };
+
+        render(
+            <InteractionEditor
+                {...defaultProps}
+                graph={graph}
+                onChange={onChangeMock}
+            />,
+        );
+
+        // Act - change the markings setting via GraphSettings
+        const button = screen.getByRole("button", {name: "Grid"});
+        await userEvent.click(button);
+
+        // Assert - the onChange call should include the new markings
+        // AND preserve existing graph properties like box
+        expect(onChangeMock).toHaveBeenCalledWith(
+            expect.objectContaining({
+                graph: expect.objectContaining({
+                    box: [400, 400],
+                    markings: "grid",
+                }),
+            }),
+        );
+    });
+});
diff --git a/packages/perseus-editor/src/widgets/interaction-editor/interaction-editor.tsx b/packages/perseus-editor/src/widgets/interaction-editor/interaction-editor.tsx
index 412dbb56162..3f67b5a070d 100644
--- a/packages/perseus-editor/src/widgets/interaction-editor/interaction-editor.tsx
+++ b/packages/perseus-editor/src/widgets/interaction-editor/interaction-editor.tsx
@@ -1,11 +1,6 @@
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 /* eslint-disable @typescript-eslint/no-invalid-this, react/no-unsafe */
-import {
-    Changeable,
-    Dependencies,
-    EditorJsonify,
-    Util,
-} from "@khanacademy/perseus";
+import {Dependencies, EditorJsonify, Util} from "@khanacademy/perseus";
 import {
     interactionLogic,
     type Coords,
@@ -40,7 +35,8 @@ type Graph = {
     valid?: boolean;
 };
 
-type Props = Changeable.ChangeableProps & {
+type Props = {
+    onChange: (newProps: Record<string, unknown>) => void;
     elements: ReadonlyArray<any>;
     graph: Graph;
 };
@@ -99,12 +95,15 @@ class InteractionEditor extends React.Component<Props, State> {
         );
     }
 
-    _updateGraphProps: (arg1: any) => any = (newProps) => {
-        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-        this.change({
-            graph: _.extend(_.omit(newProps, "step"), {
+    // Spread existing graph props to preserve properties not included
+    // in the GraphSettings onChange payload (e.g. box, markings).
+    _updateGraphProps = (newProps: Record<string, unknown>) => {
+        this.props.onChange({
+            graph: {
+                ...this.props.graph,
+                ..._.omit(newProps, "step"),
                 tickStep: newProps.step,
-            }),
+            },
         });
     };
 
@@ -170,36 +169,30 @@ class InteractionEditor extends React.Component<Props, State> {
             // @ts-expect-error - TS2339 - Property 'funcName' does not exist on type '{}'.
             newElement.options.funcName = nextLetter;
         }
-        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-        this.change({
+        this.props.onChange({
             elements: this.props.elements.concat(newElement),
         });
     };
 
     _deleteElement: (arg1: number) => void = (index) => {
         const element = this.props.elements[index];
-        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-        this.change({elements: _.without(this.props.elements, element)});
+        this.props.onChange({
+            elements: _.without(this.props.elements, element),
+        });
     };
 
     _moveElementUp: (arg1: number) => void = (index) => {
         const element = this.props.elements[index];
         const newElements = _.without(this.props.elements, element);
         newElements.splice(index - 1, 0, element);
-        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-        this.change({elements: newElements});
+        this.props.onChange({elements: newElements});
     };
 
     _moveElementDown: (arg1: number) => void = (index) => {
         const element = this.props.elements[index];
         const newElements = _.without(this.props.elements, element);
         newElements.splice(index + 1, 0, element);
-        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-        this.change({elements: newElements});
-    };
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
+        this.props.onChange({elements: newElements});
     };
 
     serialize: () => any = () => {
@@ -286,7 +279,9 @@ class InteractionEditor extends React.Component<Props, State> {
                                                 newProps,
                                             );
                                             // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-                                            this.change({elements: elements});
+                                            this.props.onChange({
+                                                elements: elements,
+                                            });
                                         }}
                                     />
                                 </ElementContainer>
@@ -357,7 +352,9 @@ class InteractionEditor extends React.Component<Props, State> {
                                                 newProps,
                                             );
                                             // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-                                            this.change({elements: elements});
+                                            this.props.onChange({
+                                                elements: elements,
+                                            });
                                         }}
                                     />
                                 </ElementContainer>
@@ -416,7 +413,9 @@ class InteractionEditor extends React.Component<Props, State> {
                                                 newProps,
                                             );
                                             // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-                                            this.change({elements: elements});
+                                            this.props.onChange({
+                                                elements: elements,
+                                            });
                                         }}
                                     />
                                 </ElementContainer>
@@ -483,7 +482,9 @@ class InteractionEditor extends React.Component<Props, State> {
                                                 newProps,
                                             );
                                             // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-                                            this.change({elements: elements});
+                                            this.props.onChange({
+                                                elements: elements,
+                                            });
                                         }}
                                     />
                                 </ElementContainer>
@@ -539,7 +540,9 @@ class InteractionEditor extends React.Component<Props, State> {
                                                 newProps,
                                             );
                                             // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-                                            this.change({elements: elements});
+                                            this.props.onChange({
+                                                elements: elements,
+                                            });
                                         }}
                                     />
                                 </ElementContainer>
@@ -586,7 +589,9 @@ class InteractionEditor extends React.Component<Props, State> {
                                                 newProps,
                                             );
                                             // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-                                            this.change({elements: elements});
+                                            this.props.onChange({
+                                                elements: elements,
+                                            });
                                         }}
                                     />
                                 </ElementContainer>
@@ -642,7 +647,9 @@ class InteractionEditor extends React.Component<Props, State> {
                                                 newProps,
                                             );
                                             // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-                                            this.change({elements: elements});
+                                            this.props.onChange({
+                                                elements: elements,
+                                            });
                                         }}
                                     />
                                 </ElementContainer>
@@ -706,7 +713,9 @@ class InteractionEditor extends React.Component<Props, State> {
                                                 newProps,
                                             );
                                             // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-                                            this.change({elements: elements});
+                                            this.props.onChange({
+                                                elements: elements,
+                                            });
                                         }}
                                     />
                                 </ElementContainer>