diff --git a/.changeset/swift-pets-hammer.md b/.changeset/swift-pets-hammer.md
new file mode 100644
index 0000000000..0932a4e87c
--- /dev/null
+++ b/.changeset/swift-pets-hammer.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": patch
+---
+
+Restructure interaction-editor subcomponents
diff --git a/packages/perseus-editor/src/widgets/interaction/constraint-editor.tsx b/packages/perseus-editor/src/widgets/interaction-editor/constraint-editor.tsx
similarity index 100%
rename from packages/perseus-editor/src/widgets/interaction/constraint-editor.tsx
rename to packages/perseus-editor/src/widgets/interaction-editor/constraint-editor.tsx
diff --git a/packages/perseus-editor/src/widgets/interaction-editor/function-editor.tsx b/packages/perseus-editor/src/widgets/interaction-editor/function-editor.tsx
new file mode 100644
index 0000000000..fcd3594ad0
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/interaction-editor/function-editor.tsx
@@ -0,0 +1,111 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+    KhanColors,
+    ColorPicker,
+    DashPicker,
+} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+const {MathInput, NumberInput} = components;
+const {getDependencies} = Dependencies;
+
+type FunctionEditorProps = any;
+
+//
+// Editor for function plots
+//
+// TODO(eater): Factor this out
+//
+class FunctionEditor extends React.Component<FunctionEditorProps> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        value: PropTypes.string,
+        rangeMin: PropTypes.string,
+        rangeMax: PropTypes.string,
+        color: PropTypes.string,
+        strokeDashArray: PropTypes.string,
+        strokeWidth: PropTypes.number,
+    };
+
+    static defaultProps = {
+        value: "x",
+        rangeMin: "-10",
+        rangeMax: "10",
+        color: KhanColors.BLUE,
+        strokeDasharray: "",
+        strokeWidth: 2,
+    };
+
+    change: (arg1: any, arg2?: any, arg3?: any) => any = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.ReactNode {
+        const {TeX} = getDependencies();
+        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
+
+        return (
+            <div className="graph-settings">
+                <div className="perseus-widget-row">
+                    <TeX>{this.props.funcName + "(x)="}</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.value}
+                        onChange={this.change("value")}
+                        analytics={analyticsStub}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    Range: <TeX>\Large(</TeX>
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.rangeMin}
+                        onChange={this.change("rangeMin")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.rangeMax}
+                        onChange={this.change("rangeMax")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    <ColorPicker
+                        value={this.props.color}
+                        onChange={this.change("color")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    <DashPicker
+                        value={this.props.strokeDasharray}
+                        onChange={this.change("strokeDasharray")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    <div className="perseus-widget-left-col">
+                        Width:{" "}
+                        <NumberInput
+                            value={this.props.strokeWidth}
+                            placeholder={2}
+                            onChange={this.change("strokeWidth")}
+                        />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default FunctionEditor;
diff --git a/packages/perseus-editor/src/widgets/interaction-editor/index.ts b/packages/perseus-editor/src/widgets/interaction-editor/index.ts
new file mode 100644
index 0000000000..00c8f5909a
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/interaction-editor/index.ts
@@ -0,0 +1,3 @@
+import InteractionEditor from "./interaction-editor";
+
+export default InteractionEditor;
diff --git a/packages/perseus-editor/src/widgets/interaction-editor.tsx b/packages/perseus-editor/src/widgets/interaction-editor/interaction-editor.tsx
similarity index 61%
rename from packages/perseus-editor/src/widgets/interaction-editor.tsx
rename to packages/perseus-editor/src/widgets/interaction-editor/interaction-editor.tsx
index 7c0b553c1b..0fceaeb790 100644
--- a/packages/perseus-editor/src/widgets/interaction-editor.tsx
+++ b/packages/perseus-editor/src/widgets/interaction-editor/interaction-editor.tsx
@@ -1,26 +1,27 @@
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
-/* eslint-disable @babel/no-invalid-this, react/no-unsafe, react/sort-comp */
+/* eslint-disable @babel/no-invalid-this, react/no-unsafe */
 import {
-    components,
     Changeable,
     Dependencies,
     EditorJsonify,
-    KhanColors,
     Util,
-    ArrowPicker,
-    ColorPicker,
-    DashPicker,
     ElementContainer,
 } from "@khanacademy/perseus";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-import GraphSettings from "../components/graph-settings";
+import GraphSettings from "../../components/graph-settings";
 
-import ConstraintEditor from "./interaction/constraint-editor";
+import FunctionEditor from "./function-editor";
+import LabelEditor from "./label-editor";
+import LineEditor from "./line-editor";
+import MovableLineEditor from "./movable-line-editor";
+import MovablePointEditor from "./movable-point-editor";
+import ParametricEditor from "./parametric-editor";
+import PointEditor from "./point-editor";
+import RectangleEditor from "./rectangle-editor";
 
-const {MathInput, NumberInput, TextInput} = components;
 const {getDependencies} = Dependencies;
 const {unescapeMathMode} = Util;
 
@@ -39,761 +40,6 @@ const defaultInteractionProps = {
     elements: [],
 } as const;
 
-type PointEditorProps = any;
-
-//
-// Editor for non-interactive points
-//
-// TODO(eater): Factor this out
-//
-class PointEditor extends React.Component<PointEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        coordX: PropTypes.string,
-        coordY: PropTypes.string,
-        color: PropTypes.string,
-    };
-
-    static defaultProps = {
-        coordX: "0",
-        coordY: "0",
-        color: KhanColors.BLACK,
-    };
-
-    render(): React.ReactNode {
-        const {TeX} = getDependencies();
-        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
-
-        return (
-            <div className="graph-settings">
-                <div className="perseus-widget-row">
-                    Coordinate: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.coordX}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("coordX")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.coordY}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("coordY")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>\Large)</TeX>
-                </div>
-                <div className="perseus-widget-row">
-                    <ColorPicker
-                        value={this.props.color}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("color")}
-                    />
-                </div>
-            </div>
-        );
-    }
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-type LineEditorProps = any;
-
-//
-// Editor for non-interactive line segments
-//
-// TODO(eater): Factor this out
-//
-class LineEditor extends React.Component<LineEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        startX: PropTypes.string,
-        startY: PropTypes.string,
-        endX: PropTypes.string,
-        endY: PropTypes.string,
-        color: PropTypes.string,
-        strokeDasharray: PropTypes.string,
-        arrows: PropTypes.string,
-        strokeWidth: PropTypes.number,
-    };
-
-    static defaultProps = {
-        startX: "-5",
-        startY: "5",
-        endX: "5",
-        endY: "5",
-        color: KhanColors.BLACK,
-        strokeDasharray: "",
-        arrows: "",
-        strokeWidth: 2,
-    };
-
-    render(): React.ReactNode {
-        const {TeX} = getDependencies();
-        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
-
-        return (
-            <div className="graph-settings">
-                <div className="perseus-widget-row">
-                    Start: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.startX}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("startX")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.startY}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("startY")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>\Large)</TeX>
-                </div>
-                <div className="perseus-widget-row">
-                    End: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.endX}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("endX")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.endY}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("endY")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>\Large)</TeX>
-                </div>
-                <div className="perseus-widget-row">
-                    <ColorPicker
-                        value={this.props.color}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("color")}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    <DashPicker
-                        value={this.props.strokeDasharray}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("strokeDasharray")}
-                    />
-                    &nbsp; &nbsp;
-                    <ArrowPicker
-                        value={this.props.arrows}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("arrows")}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    <div className="perseus-widget-left-col">
-                        Width:{" "}
-                        <NumberInput
-                            value={this.props.strokeWidth}
-                            placeholder={2}
-                            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                            onChange={this.change("strokeWidth")}
-                        />
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-type MovablePointEditorProps = any;
-
-//
-// Editor for interactive movable points
-//
-// TODO(eater): Factor this out
-// TODO(eater): Rethink how constraints are represented
-//
-class MovablePointEditor extends React.Component<MovablePointEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        startX: PropTypes.string,
-        startY: PropTypes.string,
-        constraint: PropTypes.string,
-        snap: PropTypes.number,
-        constraintFn: PropTypes.string,
-    };
-
-    static defaultProps = {
-        startX: "0",
-        startY: "0",
-        constraint: "none",
-        snap: 0.5,
-        constraintFn: "0",
-        constraintXMin: "-10",
-        constraintXMax: "10",
-        constraintYMin: "-10",
-        constraintYMax: "10",
-    };
-
-    render(): React.ReactNode {
-        const {TeX} = getDependencies();
-        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
-
-        return (
-            <div className="graph-settings">
-                <div className="perseus-widget-row">
-                    Start: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.startX}
-                        onChange={this.change("startX")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.startY}
-                        onChange={this.change("startY")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>\Large)</TeX>
-                </div>
-                <div className="perseus-widget-row">
-                    Update <TeX>(x_n, y_n)</TeX> for <TeX>n =</TeX>{" "}
-                    <NumberInput
-                        value={this.props.varSubscript}
-                        placeholder={0}
-                        onChange={this.change("varSubscript")}
-                    />
-                </div>
-                {/* @ts-expect-error - TS2769 - No overload matches this call. */}
-                <ConstraintEditor {...this.props} />
-            </div>
-        );
-    }
-
-    change = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-type MovableLineEditorProps = any;
-
-//
-// Editor for interactive movable line segments
-//
-// TODO(eater): Factor this out
-// TODO(eater): Rethink how constraints are represented
-//
-class MovableLineEditor extends React.Component<MovableLineEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        startX: PropTypes.string,
-        startY: PropTypes.string,
-        endX: PropTypes.string,
-        endY: PropTypes.string,
-        constraint: PropTypes.string,
-        snap: PropTypes.number,
-        constraintFn: PropTypes.string,
-    };
-
-    static defaultProps = {
-        startX: "-5",
-        startY: "5",
-        endX: "5",
-        endY: "5",
-        constraint: "none",
-        snap: 0.5,
-        constraintFn: "0",
-        constraintXMin: "-10",
-        constraintXMax: "10",
-        constraintYMin: "-10",
-        constraintYMax: "10",
-    };
-
-    render(): React.ReactNode {
-        const {TeX} = getDependencies();
-        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
-
-        return (
-            <div className="graph-settings">
-                Initial position:
-                <div className="perseus-widget-row">
-                    Start: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.startX}
-                        onChange={this.change("startX")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.startY}
-                        onChange={this.change("startY")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>\Large)</TeX>
-                </div>
-                <div className="perseus-widget-row">
-                    End: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.endX}
-                        onChange={this.change("endX")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.endY}
-                        onChange={this.change("endY")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>\Large)</TeX>
-                </div>
-                <div className="perseus-widget-row">
-                    Start updates <TeX>(x_n, y_n)</TeX> for <TeX>n =</TeX>
-                    <NumberInput
-                        value={this.props.startSubscript}
-                        placeholder={0}
-                        onChange={this.change("startSubscript")}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    End updates <TeX>(x_m, y_m)</TeX> for <TeX>m =</TeX>
-                    <NumberInput
-                        value={this.props.endSubscript}
-                        placeholder={0}
-                        onChange={this.change("endSubscript")}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    All constraints are applied to the start point.
-                </div>
-                {/* @ts-expect-error - TS2769 - No overload matches this call. */}
-                <ConstraintEditor {...this.props} />
-            </div>
-        );
-    }
-
-    change = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-type FunctionEditorProps = any;
-
-//
-// Editor for function plots
-//
-// TODO(eater): Factor this out
-//
-class FunctionEditor extends React.Component<FunctionEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        value: PropTypes.string,
-        rangeMin: PropTypes.string,
-        rangeMax: PropTypes.string,
-        color: PropTypes.string,
-        strokeDashArray: PropTypes.string,
-        strokeWidth: PropTypes.number,
-    };
-
-    static defaultProps = {
-        value: "x",
-        rangeMin: "-10",
-        rangeMax: "10",
-        color: KhanColors.BLUE,
-        strokeDasharray: "",
-        strokeWidth: 2,
-    };
-
-    render(): React.ReactNode {
-        const {TeX} = getDependencies();
-        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
-
-        return (
-            <div className="graph-settings">
-                <div className="perseus-widget-row">
-                    <TeX>{this.props.funcName + "(x)="}</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.value}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("value")}
-                        analytics={analyticsStub}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    Range: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.rangeMin}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("rangeMin")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.rangeMax}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("rangeMax")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>\Large)</TeX>
-                </div>
-                <div className="perseus-widget-row">
-                    <ColorPicker
-                        value={this.props.color}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("color")}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    <DashPicker
-                        value={this.props.strokeDasharray}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("strokeDasharray")}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    <div className="perseus-widget-left-col">
-                        Width:{" "}
-                        <NumberInput
-                            value={this.props.strokeWidth}
-                            placeholder={2}
-                            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                            onChange={this.change("strokeWidth")}
-                        />
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-type ParametricEditorProps = any;
-
-//
-// Editor for parametric plots
-//
-// TODO(eater): Factor this out
-//
-class ParametricEditor extends React.Component<ParametricEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        x: PropTypes.string,
-        y: PropTypes.string,
-        rangeMin: PropTypes.string,
-        rangeMax: PropTypes.string,
-        color: PropTypes.string,
-        strokeDashArray: PropTypes.string,
-        strokeWidth: PropTypes.number,
-    };
-
-    static defaultProps = {
-        x: "cos(t)",
-        y: "sin(t)",
-        rangeMin: "0",
-        rangeMax: "2\\pi",
-        color: KhanColors.BLUE,
-        strokeDasharray: "",
-        strokeWidth: 2,
-    };
-
-    render(): React.ReactNode {
-        const {TeX} = getDependencies();
-        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
-
-        return (
-            <div className="graph-settings">
-                <div className="perseus-widget-row">
-                    <TeX>X(t) =</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.x}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("x")}
-                        analytics={analyticsStub}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    <TeX>Y(t) =</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.y}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("y")}
-                        analytics={analyticsStub}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    Range: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.rangeMin}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("rangeMin")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.rangeMax}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("rangeMax")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>\Large)</TeX>
-                </div>
-                <div className="perseus-widget-row">
-                    <ColorPicker
-                        value={this.props.color}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("color")}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    <DashPicker
-                        value={this.props.strokeDasharray}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("strokeDasharray")}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    <div className="perseus-widget-left-col">
-                        Width:{" "}
-                        <NumberInput
-                            value={this.props.strokeWidth}
-                            placeholder={2}
-                            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                            onChange={this.change("strokeWidth")}
-                        />
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-type LabelEditorProps = any;
-
-//
-// Editor for labels
-//
-// TODO(eater): Factor this out maybe?
-// TODO(eater): Add text direction
-//
-class LabelEditor extends React.Component<LabelEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        color: PropTypes.string,
-        coordX: PropTypes.string,
-        coordY: PropTypes.string,
-        label: PropTypes.string,
-    };
-
-    static defaultProps = {
-        coordX: "0",
-        coordY: "0",
-        color: KhanColors.BLACK,
-        label: "\\phi",
-    };
-
-    render(): React.ReactNode {
-        const {TeX} = getDependencies();
-        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
-
-        return (
-            <div className="graph-settings">
-                <div className="perseus-widget-row">
-                    <TextInput
-                        value={this.props.label}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("label")}
-                        style={{
-                            width: "100%",
-                        }}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    Location: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.coordX}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("coordX")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.coordY}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("coordY")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>\Large)</TeX>
-                </div>
-                <div className="perseus-widget-row">
-                    <ColorPicker
-                        value={this.props.color}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("color")}
-                    />
-                </div>
-            </div>
-        );
-    }
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-type RectangleEditorProps = any;
-
-//
-// Editor for rectangles
-//
-// TODO(eater): Factor this out maybe?
-//
-class RectangleEditor extends React.Component<RectangleEditorProps> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        color: PropTypes.string,
-        coordX: PropTypes.string,
-        coordY: PropTypes.string,
-        height: PropTypes.string,
-        width: PropTypes.string,
-    };
-
-    static defaultProps = {
-        coordX: "-5",
-        coordY: "5",
-        width: "2",
-        height: "3",
-        color: KhanColors.LIGHT_BLUE,
-    };
-
-    render(): React.ReactNode {
-        const {TeX} = getDependencies();
-        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
-
-        return (
-            <div className="graph-settings">
-                <div className="perseus-widget-row">
-                    Bottom left: <TeX>\Large(</TeX>
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.coordX}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("coordX")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>,</TeX>{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.coordY}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("coordY")}
-                        analytics={analyticsStub}
-                    />
-                    <TeX>\Large)</TeX>
-                </div>
-                <div className="perseus-widget-row">
-                    Width:{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.width}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("width")}
-                        analytics={analyticsStub}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    Height:{" "}
-                    <MathInput
-                        buttonsVisible="never"
-                        value={this.props.height}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("height")}
-                        analytics={analyticsStub}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    <ColorPicker
-                        value={this.props.color}
-                        lightColors={true}
-                        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                        onChange={this.change("color")}
-                    />
-                </div>
-                <div className="perseus-widget-row">
-                    You want a border? Sorry, draw your own.
-                </div>
-            </div>
-        );
-    }
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
 type InteractionEditorProps = any;
 type InteractionEditorState = any;
 
@@ -956,6 +202,10 @@ class InteractionEditor extends React.Component<
         return Changeable.change.apply(this, args);
     };
 
+    serialize: () => any = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
     render(): React.ReactNode {
         const {TeX} = getDependencies();
 
@@ -1487,10 +737,6 @@ class InteractionEditor extends React.Component<
         );
         /* eslint-enable max-len */
     }
-
-    serialize: () => any = () => {
-        return EditorJsonify.serialize.call(this);
-    };
 }
 
 export default InteractionEditor;
diff --git a/packages/perseus-editor/src/widgets/interaction-editor/label-editor.tsx b/packages/perseus-editor/src/widgets/interaction-editor/label-editor.tsx
new file mode 100644
index 0000000000..c2d457d96b
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/interaction-editor/label-editor.tsx
@@ -0,0 +1,91 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+    KhanColors,
+    ColorPicker,
+} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+const {MathInput, TextInput} = components;
+const {getDependencies} = Dependencies;
+
+type LabelEditorProps = any;
+
+//
+// Editor for labels
+//
+// TODO(eater): Factor this out maybe?
+// TODO(eater): Add text direction
+//
+class LabelEditor extends React.Component<LabelEditorProps> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        color: PropTypes.string,
+        coordX: PropTypes.string,
+        coordY: PropTypes.string,
+        label: PropTypes.string,
+    };
+
+    static defaultProps = {
+        coordX: "0",
+        coordY: "0",
+        color: KhanColors.BLACK,
+        label: "\\phi",
+    };
+
+    change: (arg1: any, arg2?: any, arg3?: any) => any = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.ReactNode {
+        const {TeX} = getDependencies();
+        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
+
+        return (
+            <div className="graph-settings">
+                <div className="perseus-widget-row">
+                    <TextInput
+                        value={this.props.label}
+                        onChange={this.change("label")}
+                        style={{
+                            width: "100%",
+                        }}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    Location: <TeX>\Large(</TeX>
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.coordX}
+                        onChange={this.change("coordX")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.coordY}
+                        onChange={this.change("coordY")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    <ColorPicker
+                        value={this.props.color}
+                        onChange={this.change("color")}
+                    />
+                </div>
+            </div>
+        );
+    }
+}
+
+export default LabelEditor;
diff --git a/packages/perseus-editor/src/widgets/interaction-editor/line-editor.tsx b/packages/perseus-editor/src/widgets/interaction-editor/line-editor.tsx
new file mode 100644
index 0000000000..5a78e50339
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/interaction-editor/line-editor.tsx
@@ -0,0 +1,129 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+    KhanColors,
+    ArrowPicker,
+    ColorPicker,
+    DashPicker,
+} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+const {MathInput, NumberInput} = components;
+const {getDependencies} = Dependencies;
+
+type LineEditorProps = any;
+
+//
+// Editor for non-interactive line segments
+//
+// TODO(eater): Factor this out
+//
+class LineEditor extends React.Component<LineEditorProps> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        startX: PropTypes.string,
+        startY: PropTypes.string,
+        endX: PropTypes.string,
+        endY: PropTypes.string,
+        color: PropTypes.string,
+        strokeDasharray: PropTypes.string,
+        arrows: PropTypes.string,
+        strokeWidth: PropTypes.number,
+    };
+
+    static defaultProps = {
+        startX: "-5",
+        startY: "5",
+        endX: "5",
+        endY: "5",
+        color: KhanColors.BLACK,
+        strokeDasharray: "",
+        arrows: "",
+        strokeWidth: 2,
+    };
+
+    change: (arg1: any, arg2?: any, arg3?: any) => any = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.ReactNode {
+        const {TeX} = getDependencies();
+        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
+
+        return (
+            <div className="graph-settings">
+                <div className="perseus-widget-row">
+                    Start: <TeX>\Large(</TeX>
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.startX}
+                        onChange={this.change("startX")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.startY}
+                        onChange={this.change("startY")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    End: <TeX>\Large(</TeX>
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.endX}
+                        onChange={this.change("endX")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.endY}
+                        onChange={this.change("endY")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    <ColorPicker
+                        value={this.props.color}
+                        onChange={this.change("color")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    <DashPicker
+                        value={this.props.strokeDasharray}
+                        onChange={this.change("strokeDasharray")}
+                    />
+                    &nbsp; &nbsp;
+                    <ArrowPicker
+                        value={this.props.arrows}
+                        onChange={this.change("arrows")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    <div className="perseus-widget-left-col">
+                        Width:{" "}
+                        <NumberInput
+                            value={this.props.strokeWidth}
+                            placeholder={2}
+                            onChange={this.change("strokeWidth")}
+                        />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default LineEditor;
diff --git a/packages/perseus-editor/src/widgets/interaction-editor/movable-line-editor.tsx b/packages/perseus-editor/src/widgets/interaction-editor/movable-line-editor.tsx
new file mode 100644
index 0000000000..dbe1fa0985
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/interaction-editor/movable-line-editor.tsx
@@ -0,0 +1,125 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+import ConstraintEditor from "./constraint-editor";
+
+const {MathInput, NumberInput} = components;
+const {getDependencies} = Dependencies;
+
+type MovableLineEditorProps = any;
+
+//
+// Editor for interactive movable line segments
+//
+// TODO(eater): Factor this out
+// TODO(eater): Rethink how constraints are represented
+//
+class MovableLineEditor extends React.Component<MovableLineEditorProps> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        startX: PropTypes.string,
+        startY: PropTypes.string,
+        endX: PropTypes.string,
+        endY: PropTypes.string,
+        constraint: PropTypes.string,
+        snap: PropTypes.number,
+        constraintFn: PropTypes.string,
+    };
+
+    static defaultProps = {
+        startX: "-5",
+        startY: "5",
+        endX: "5",
+        endY: "5",
+        constraint: "none",
+        snap: 0.5,
+        constraintFn: "0",
+        constraintXMin: "-10",
+        constraintXMax: "10",
+        constraintYMin: "-10",
+        constraintYMax: "10",
+    };
+
+    change = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.ReactNode {
+        const {TeX} = getDependencies();
+        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
+
+        return (
+            <div className="graph-settings">
+                Initial position:
+                <div className="perseus-widget-row">
+                    Start: <TeX>\Large(</TeX>
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.startX}
+                        onChange={this.change("startX")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.startY}
+                        onChange={this.change("startY")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    End: <TeX>\Large(</TeX>
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.endX}
+                        onChange={this.change("endX")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.endY}
+                        onChange={this.change("endY")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    Start updates <TeX>(x_n, y_n)</TeX> for <TeX>n =</TeX>
+                    <NumberInput
+                        value={this.props.startSubscript}
+                        placeholder={0}
+                        onChange={this.change("startSubscript")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    End updates <TeX>(x_m, y_m)</TeX> for <TeX>m =</TeX>
+                    <NumberInput
+                        value={this.props.endSubscript}
+                        placeholder={0}
+                        onChange={this.change("endSubscript")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    All constraints are applied to the start point.
+                </div>
+                {/* @ts-expect-error - TS2769 - No overload matches this call. */}
+                <ConstraintEditor {...this.props} />
+            </div>
+        );
+    }
+}
+
+export default MovableLineEditor;
diff --git a/packages/perseus-editor/src/widgets/interaction-editor/movable-point-editor.tsx b/packages/perseus-editor/src/widgets/interaction-editor/movable-point-editor.tsx
new file mode 100644
index 0000000000..8f8b71e9cc
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/interaction-editor/movable-point-editor.tsx
@@ -0,0 +1,92 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+import ConstraintEditor from "./constraint-editor";
+
+const {MathInput, NumberInput} = components;
+const {getDependencies} = Dependencies;
+
+type MovablePointEditorProps = any;
+
+//
+// Editor for interactive movable points
+//
+// TODO(eater): Factor this out
+// TODO(eater): Rethink how constraints are represented
+//
+class MovablePointEditor extends React.Component<MovablePointEditorProps> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        startX: PropTypes.string,
+        startY: PropTypes.string,
+        constraint: PropTypes.string,
+        snap: PropTypes.number,
+        constraintFn: PropTypes.string,
+    };
+
+    static defaultProps = {
+        startX: "0",
+        startY: "0",
+        constraint: "none",
+        snap: 0.5,
+        constraintFn: "0",
+        constraintXMin: "-10",
+        constraintXMax: "10",
+        constraintYMin: "-10",
+        constraintYMax: "10",
+    };
+
+    change = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.ReactNode {
+        const {TeX} = getDependencies();
+        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
+
+        return (
+            <div className="graph-settings">
+                <div className="perseus-widget-row">
+                    Start: <TeX>\Large(</TeX>
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.startX}
+                        onChange={this.change("startX")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.startY}
+                        onChange={this.change("startY")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    Update <TeX>(x_n, y_n)</TeX> for <TeX>n =</TeX>{" "}
+                    <NumberInput
+                        value={this.props.varSubscript}
+                        placeholder={0}
+                        onChange={this.change("varSubscript")}
+                    />
+                </div>
+                {/* @ts-expect-error - TS2769 - No overload matches this call. */}
+                <ConstraintEditor {...this.props} />
+            </div>
+        );
+    }
+}
+
+export default MovablePointEditor;
diff --git a/packages/perseus-editor/src/widgets/interaction-editor/parametric-editor.tsx b/packages/perseus-editor/src/widgets/interaction-editor/parametric-editor.tsx
new file mode 100644
index 0000000000..dea79f31f5
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/interaction-editor/parametric-editor.tsx
@@ -0,0 +1,122 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+    KhanColors,
+    ColorPicker,
+    DashPicker,
+} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+const {MathInput, NumberInput} = components;
+const {getDependencies} = Dependencies;
+
+type ParametricEditorProps = any;
+
+//
+// Editor for parametric plots
+//
+// TODO(eater): Factor this out
+//
+class ParametricEditor extends React.Component<ParametricEditorProps> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        x: PropTypes.string,
+        y: PropTypes.string,
+        rangeMin: PropTypes.string,
+        rangeMax: PropTypes.string,
+        color: PropTypes.string,
+        strokeDashArray: PropTypes.string,
+        strokeWidth: PropTypes.number,
+    };
+
+    static defaultProps = {
+        x: "cos(t)",
+        y: "sin(t)",
+        rangeMin: "0",
+        rangeMax: "2\\pi",
+        color: KhanColors.BLUE,
+        strokeDasharray: "",
+        strokeWidth: 2,
+    };
+
+    change: (arg1: any, arg2?: any, arg3?: any) => any = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.ReactNode {
+        const {TeX} = getDependencies();
+        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
+
+        return (
+            <div className="graph-settings">
+                <div className="perseus-widget-row">
+                    <TeX>X(t) =</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.x}
+                        onChange={this.change("x")}
+                        analytics={analyticsStub}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    <TeX>Y(t) =</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.y}
+                        onChange={this.change("y")}
+                        analytics={analyticsStub}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    Range: <TeX>\Large(</TeX>
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.rangeMin}
+                        onChange={this.change("rangeMin")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.rangeMax}
+                        onChange={this.change("rangeMax")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    <ColorPicker
+                        value={this.props.color}
+                        onChange={this.change("color")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    <DashPicker
+                        value={this.props.strokeDasharray}
+                        onChange={this.change("strokeDasharray")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    <div className="perseus-widget-left-col">
+                        Width:{" "}
+                        <NumberInput
+                            value={this.props.strokeWidth}
+                            placeholder={2}
+                            onChange={this.change("strokeWidth")}
+                        />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default ParametricEditor;
diff --git a/packages/perseus-editor/src/widgets/interaction-editor/point-editor.tsx b/packages/perseus-editor/src/widgets/interaction-editor/point-editor.tsx
new file mode 100644
index 0000000000..3e49d15e4f
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/interaction-editor/point-editor.tsx
@@ -0,0 +1,79 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+    KhanColors,
+    ColorPicker,
+} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+const {MathInput} = components;
+const {getDependencies} = Dependencies;
+
+type PointEditorProps = any;
+
+//
+// Editor for non-interactive points
+//
+// TODO(eater): Factor this out
+//
+class PointEditor extends React.Component<PointEditorProps> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        coordX: PropTypes.string,
+        coordY: PropTypes.string,
+        color: PropTypes.string,
+    };
+
+    static defaultProps = {
+        coordX: "0",
+        coordY: "0",
+        color: KhanColors.BLACK,
+    };
+
+    change: (arg1: any, arg2?: any, arg3?: any) => any = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.ReactNode {
+        const {TeX} = getDependencies();
+        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
+
+        return (
+            <div className="graph-settings">
+                <div className="perseus-widget-row">
+                    Coordinate: <TeX>\Large(</TeX>
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.coordX}
+                        onChange={this.change("coordX")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.coordY}
+                        onChange={this.change("coordY")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    <ColorPicker
+                        value={this.props.color}
+                        onChange={this.change("color")}
+                    />
+                </div>
+            </div>
+        );
+    }
+}
+
+export default PointEditor;
diff --git a/packages/perseus-editor/src/widgets/interaction-editor/rectangle-editor.tsx b/packages/perseus-editor/src/widgets/interaction-editor/rectangle-editor.tsx
new file mode 100644
index 0000000000..ba876dbeec
--- /dev/null
+++ b/packages/perseus-editor/src/widgets/interaction-editor/rectangle-editor.tsx
@@ -0,0 +1,105 @@
+import {
+    components,
+    Changeable,
+    Dependencies,
+    EditorJsonify,
+    KhanColors,
+    ColorPicker,
+} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+const {MathInput} = components;
+const {getDependencies} = Dependencies;
+
+type RectangleEditorProps = any;
+
+//
+// Editor for rectangles
+//
+// TODO(eater): Factor this out maybe?
+//
+class RectangleEditor extends React.Component<RectangleEditorProps> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        color: PropTypes.string,
+        coordX: PropTypes.string,
+        coordY: PropTypes.string,
+        height: PropTypes.string,
+        width: PropTypes.string,
+    };
+
+    static defaultProps = {
+        coordX: "-5",
+        coordY: "5",
+        width: "2",
+        height: "3",
+        color: KhanColors.LIGHT_BLUE,
+    };
+
+    change: (arg1: any, arg2?: any, arg3?: any) => any = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    serialize = () => {
+        return EditorJsonify.serialize.call(this);
+    };
+
+    render(): React.ReactNode {
+        const {TeX} = getDependencies();
+        const analyticsStub = {onAnalyticsEvent: () => Promise.resolve()};
+
+        return (
+            <div className="graph-settings">
+                <div className="perseus-widget-row">
+                    Bottom left: <TeX>\Large(</TeX>
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.coordX}
+                        onChange={this.change("coordX")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>,</TeX>{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.coordY}
+                        onChange={this.change("coordY")}
+                        analytics={analyticsStub}
+                    />
+                    <TeX>\Large)</TeX>
+                </div>
+                <div className="perseus-widget-row">
+                    Width:{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.width}
+                        onChange={this.change("width")}
+                        analytics={analyticsStub}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    Height:{" "}
+                    <MathInput
+                        buttonsVisible="never"
+                        value={this.props.height}
+                        onChange={this.change("height")}
+                        analytics={analyticsStub}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    <ColorPicker
+                        value={this.props.color}
+                        lightColors={true}
+                        onChange={this.change("color")}
+                    />
+                </div>
+                <div className="perseus-widget-row">
+                    You want a border? Sorry, draw your own.
+                </div>
+            </div>
+        );
+    }
+}
+
+export default RectangleEditor;