diff --git a/src/plugins.ts b/src/plugins.ts
index 5e6fe4b..dc13155 100644
--- a/src/plugins.ts
+++ b/src/plugins.ts
@@ -1,7 +1,9 @@
-import { IPluginDefinition } from "./types";
+import { stepperPlugin } from "./plugins/stepper";
+import type { IPluginDefinition } from "./types";
 import { generatePluginMap } from "./util";
 
 export const plugins: IPluginDefinition[] = [
+    stepperPlugin,
 ];
 
 export const pluginMap: Map<string, IPluginDefinition> = /*#__PURE__*/ generatePluginMap(plugins);
diff --git a/src/plugins/stepper.ts b/src/plugins/stepper.ts
new file mode 100644
index 0000000..0e42a4c
--- /dev/null
+++ b/src/plugins/stepper.ts
@@ -0,0 +1,18 @@
+import { type IPluginDefinition, PluginType } from "../types";
+
+/**
+ * The Stepper (substitution visualizer) host plugin.
+ *
+ * Only a WEB resolution is provided: the runner half is bundled into each language's evaluator (it
+ * extends `@sourceacademy/runner-stepper`), and the evaluator pulls in this web half by calling
+ * `hostLoadPlugin("stepper")`. The id must match `STEPPER_DIRECTORY_ID` from
+ * `@sourceacademy/common-stepper`.
+ */
+export const stepperPlugin: IPluginDefinition = {
+    id: "stepper",
+    name: "Stepper",
+    description: "Visualises the step-by-step substitution evaluation of a program.",
+    resolutions: {
+        [PluginType.WEB]: "https://source-academy.github.io/plugins/web/stepper/dist/index.mjs",
+    },
+};
diff --git a/src/util.ts b/src/util.ts
index 2165c6b..4b8e17c 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -1,4 +1,4 @@
-import { IPluginDefinition } from "./types";
+import type { IPluginDefinition } from "./types";
 
 export function generatePluginMap(plugins: IPluginDefinition[]): Map<string, IPluginDefinition> {
     return new Map(plugins.map(plugin => [plugin.id, plugin]));