diff --git a/mcp-server/src/state.js b/mcp-server/src/state.js
index d71ac7c..abadc65 100644
--- a/mcp-server/src/state.js
+++ b/mcp-server/src/state.js
@@ -330,7 +330,7 @@ export class FlowState {
   // ── Connection Operations ───────────────────
 
   addConnection(options) {
-    const { fromScreenId, toScreenId, label, action, hotspotId, connectionPath, condition, conditionGroupId, transitionType, transitionLabel } = options;
+    const { fromScreenId, toScreenId, label, action, hotspotId, connectionPath, condition, conditionGroupId, transitionType, transitionLabel, dataFlow } = options;
 
     if (!this.getScreen(fromScreenId)) throw new Error(`Source screen not found: ${fromScreenId}`);
     if (!this.getScreen(toScreenId)) throw new Error(`Target screen not found: ${toScreenId}`);
@@ -355,6 +355,7 @@ export class FlowState {
       conditionGroupId: conditionGroupId || null,
       transitionType: transitionType || null,
       transitionLabel: transitionLabel || "",
+      dataFlow: dataFlow || [],
     };
 
     this.connections.push(conn);
@@ -368,7 +369,7 @@ export class FlowState {
     const allowed = [
       "label", "action", "fromScreenId", "toScreenId",
       "connectionPath", "condition", "conditionGroupId",
-      "transitionType", "transitionLabel",
+      "transitionType", "transitionLabel", "dataFlow",
     ];
     for (const key of allowed) {
       if (updates[key] !== undefined) {
diff --git a/mcp-server/src/tools/connection-tools.js b/mcp-server/src/tools/connection-tools.js
index 86b9bcc..d1041fa 100644
--- a/mcp-server/src/tools/connection-tools.js
+++ b/mcp-server/src/tools/connection-tools.js
@@ -12,6 +12,19 @@ export const connectionTools = [
         condition: { type: "string", description: "Condition text for conditional connections" },
         conditionGroupId: { type: "string", description: "Group ID for conditional branch connections" },
         transitionType: { type: "string", description: "Transition animation type" },
+        data_flow: {
+          type: "array",
+          description: "Data items passed along this connection",
+          items: {
+            type: "object",
+            properties: {
+              name: { type: "string", description: "Parameter name (e.g. 'productId')" },
+              type: { type: "string", description: "Data type (String, Int, Bool, Object, Array, Date, ID, or custom)" },
+              description: { type: "string", description: "What this parameter represents" },
+            },
+            required: ["name"],
+          },
+        },
       },
       required: ["fromScreenId", "toScreenId"],
     },
@@ -28,6 +41,19 @@ export const connectionTools = [
         condition: { type: "string" },
         transitionType: { type: "string" },
         transitionLabel: { type: "string" },
+        data_flow: {
+          type: "array",
+          description: "Data items passed along this connection",
+          items: {
+            type: "object",
+            properties: {
+              name: { type: "string", description: "Parameter name" },
+              type: { type: "string", description: "Data type" },
+              description: { type: "string", description: "What this parameter represents" },
+            },
+            required: ["name"],
+          },
+        },
       },
       required: ["connectionId"],
     },
@@ -53,16 +79,29 @@ export const connectionTools = [
   },
 ];
 
+function convertDataFlow(dataFlowSnake) {
+  if (!Array.isArray(dataFlowSnake)) return undefined;
+  return dataFlowSnake.map(item => ({
+    id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+    name: item.name || "",
+    type: item.type || "String",
+    description: item.description || "",
+  }));
+}
+
 export function handleConnectionTool(name, args, state) {
   switch (name) {
     case "create_connection": {
-      const conn = state.addConnection(args);
+      const { data_flow, ...rest } = args;
+      const dataFlow = convertDataFlow(data_flow);
+      const conn = state.addConnection({ ...rest, ...(dataFlow ? { dataFlow } : {}) });
       return { connectionId: conn.id, fromScreenId: conn.fromScreenId, toScreenId: conn.toScreenId };
     }
 
     case "update_connection": {
-      const { connectionId, ...updates } = args;
-      const conn = state.updateConnection(connectionId, updates);
+      const { connectionId, data_flow, ...updates } = args;
+      const dataFlow = convertDataFlow(data_flow);
+      const conn = state.updateConnection(connectionId, { ...updates, ...(dataFlow ? { dataFlow } : {}) });
       return { success: true, connectionId: conn.id };
     }
 
diff --git a/src/components/ConnectionEditModal.jsx b/src/components/ConnectionEditModal.jsx
index 84f6f54..984d81a 100644
--- a/src/components/ConnectionEditModal.jsx
+++ b/src/components/ConnectionEditModal.jsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { COLORS, styles } from "../styles/theme";
 import { generateId } from "../utils/generateId";
+import { DataFlowEditor } from "./DataFlowEditor";
 
 export function ConnectionEditModal({ connection, groupConnections, screens, fromScreen, onSave, onDelete, onClose }) {
   const isConditional = groupConnections.length > 1 || !!connection.conditionGroupId;
@@ -10,6 +11,7 @@ export function ConnectionEditModal({ connection, groupConnections, screens, fro
   const [targetId, setTargetId] = useState(connection.toScreenId || "");
   const [transitionType, setTransitionType] = useState(connection.transitionType || "");
   const [transitionLabel, setTransitionLabel] = useState(connection.transitionLabel || "");
+  const [dataFlow, setDataFlow] = useState(connection.dataFlow || []);
 
   const [conditions, setConditions] = useState(() => {
     if (isConditional) {
@@ -17,9 +19,10 @@ export function ConnectionEditModal({ connection, groupConnections, screens, fro
         id: c.id,
         label: c.condition || c.label || "",
         targetScreenId: c.toScreenId || "",
+        dataFlow: c.dataFlow || [],
       }));
     }
-    return [{ id: generateId(), label: "", targetScreenId: connection.toScreenId || "" }];
+    return [{ id: generateId(), label: "", targetScreenId: connection.toScreenId || "", dataFlow: [] }];
   });
 
   const otherScreens = screens.filter((s) => s.id !== fromScreen.id);
@@ -35,6 +38,7 @@ export function ConnectionEditModal({ connection, groupConnections, screens, fro
       conditionGroupId: connection.conditionGroupId || null,
       transitionType: transitionType || null,
       transitionLabel: transitionType === "custom" ? transitionLabel : "",
+      dataFlow: mode === "navigate" ? dataFlow : [],
     });
   };
 
@@ -103,6 +107,8 @@ export function ConnectionEditModal({ connection, groupConnections, screens, fro
                     ))}
                   </select>
                 </label>
+
+                <DataFlowEditor items={dataFlow} onChange={setDataFlow} />
               </>
             )}
 
@@ -126,65 +132,76 @@ export function ConnectionEditModal({ connection, groupConnections, screens, fro
                 </div>
 
                 {conditions.map((cond, i) => (
-                  <div key={cond.id} style={{
-                    display: "flex",
-                    gap: 8,
-                    marginBottom: 8,
-                    alignItems: "flex-end",
-                  }}>
-                    <label style={{ ...styles.monoLabel, flex: 1 }}>
-                      {i === 0 ? "CONDITION" : ""}
-                      <input
-                        value={cond.label}
-                        onChange={(e) => {
+                  <div key={cond.id} style={{ marginBottom: 8 }}>
+                    <div style={{
+                      display: "flex",
+                      gap: 8,
+                      alignItems: "flex-end",
+                    }}>
+                      <label style={{ ...styles.monoLabel, flex: 1 }}>
+                        {i === 0 ? "CONDITION" : ""}
+                        <input
+                          value={cond.label}
+                          onChange={(e) => {
+                            const updated = [...conditions];
+                            updated[i] = { ...updated[i], label: e.target.value };
+                            setConditions(updated);
+                          }}
+                          placeholder={i === conditions.length - 1 ? "e.g. otherwise" : "e.g. user is subscriber"}
+                          style={styles.input}
+                        />
+                      </label>
+                      <label style={{ ...styles.monoLabel, flex: 1 }}>
+                        {i === 0 ? "TARGET SCREEN" : ""}
+                        <select
+                          value={cond.targetScreenId || ""}
+                          onChange={(e) => {
+                            const updated = [...conditions];
+                            updated[i] = { ...updated[i], targetScreenId: e.target.value || "" };
+                            setConditions(updated);
+                          }}
+                          style={styles.select}
+                        >
+                          <option value="">-- Select --</option>
+                          {otherScreens.map((s) => (
+                            <option key={s.id} value={s.id}>{s.name}</option>
+                          ))}
+                        </select>
+                      </label>
+                      {conditions.length > 1 && (
+                        <button
+                          type="button"
+                          onClick={() => setConditions(conditions.filter((_, j) => j !== i))}
+                          style={{
+                            background: "none",
+                            border: "none",
+                            color: COLORS.danger,
+                            cursor: "pointer",
+                            fontSize: 16,
+                            padding: "6px",
+                            marginBottom: 6,
+                          }}
+                        >
+                          &#10005;
+                        </button>
+                      )}
+                    </div>
+                    <div style={{ marginTop: 6, marginLeft: 8 }}>
+                      <DataFlowEditor
+                        items={cond.dataFlow || []}
+                        onChange={(newDataFlow) => {
                           const updated = [...conditions];
-                          updated[i] = { ...updated[i], label: e.target.value };
+                          updated[i] = { ...updated[i], dataFlow: newDataFlow };
                           setConditions(updated);
                         }}
-                        placeholder={i === conditions.length - 1 ? "e.g. otherwise" : "e.g. user is subscriber"}
-                        style={styles.input}
                       />
-                    </label>
-                    <label style={{ ...styles.monoLabel, flex: 1 }}>
-                      {i === 0 ? "TARGET SCREEN" : ""}
-                      <select
-                        value={cond.targetScreenId || ""}
-                        onChange={(e) => {
-                          const updated = [...conditions];
-                          updated[i] = { ...updated[i], targetScreenId: e.target.value || "" };
-                          setConditions(updated);
-                        }}
-                        style={styles.select}
-                      >
-                        <option value="">-- Select --</option>
-                        {otherScreens.map((s) => (
-                          <option key={s.id} value={s.id}>{s.name}</option>
-                        ))}
-                      </select>
-                    </label>
-                    {conditions.length > 1 && (
-                      <button
-                        type="button"
-                        onClick={() => setConditions(conditions.filter((_, j) => j !== i))}
-                        style={{
-                          background: "none",
-                          border: "none",
-                          color: COLORS.danger,
-                          cursor: "pointer",
-                          fontSize: 16,
-                          padding: "6px",
-                          marginBottom: 6,
-                        }}
-                      >
-                        &#10005;
-                      </button>
-                    )}
+                    </div>
                   </div>
                 ))}
 
                 <button
                   type="button"
-                  onClick={() => setConditions([...conditions, { id: generateId(), label: "", targetScreenId: "" }])}
+                  onClick={() => setConditions([...conditions, { id: generateId(), label: "", targetScreenId: "", dataFlow: [] }])}
                   style={{
                     width: "100%",
                     padding: "6px 0",
diff --git a/src/components/ConnectionLines.jsx b/src/components/ConnectionLines.jsx
index 8eb207d..87896d9 100644
--- a/src/components/ConnectionLines.jsx
+++ b/src/components/ConnectionLines.jsx
@@ -249,6 +249,41 @@ export function ConnectionLines({
                 </g>
               );
             })()}
+            {/* Data flow badge */}
+            {conn.dataFlow?.length > 0 && (() => {
+              const mx = (fromX + toX) / 2;
+              const hasLabel = conn.label || conn.condition;
+              const hasTransition = conn.transitionType;
+              let badgeY = (fromY + toY) / 2 + (hasLabel ? 12 : 0) + (hasTransition ? 16 : 0);
+              const dataLabel = conn.dataFlow.length === 1
+                ? conn.dataFlow[0].name || "1 param"
+                : `${conn.dataFlow.length} params`;
+              const dataBadgeW = dataLabel.length * 5.5 + 10;
+              return (
+                <g>
+                  <rect
+                    x={mx - dataBadgeW / 2}
+                    y={badgeY - 8}
+                    width={dataBadgeW}
+                    height={14}
+                    rx={4}
+                    fill="rgba(0,210,211,0.18)"
+                    stroke="rgba(0,210,211,0.35)"
+                    strokeWidth={1}
+                  />
+                  <text
+                    x={mx}
+                    y={badgeY + 2}
+                    fill="#00d2d3"
+                    fontSize={9}
+                    fontFamily={FONTS.mono}
+                    textAnchor="middle"
+                  >
+                    {dataLabel}
+                  </text>
+                </g>
+              );
+            })()}
             {/* Endpoint handles when selected */}
             {isSelected && (
               <>
diff --git a/src/components/DataFlowEditor.jsx b/src/components/DataFlowEditor.jsx
new file mode 100644
index 0000000..c7457a2
--- /dev/null
+++ b/src/components/DataFlowEditor.jsx
@@ -0,0 +1,136 @@
+import { COLORS, styles } from "../styles/theme";
+import { generateId } from "../utils/generateId";
+
+const DATA_TYPES = ["String", "Int", "Bool", "Object", "Array", "Date", "ID"];
+const ACCENT = "#00d2d3";
+
+export function DataFlowEditor({ items, onChange }) {
+  const updateItem = (index, patch) => {
+    const updated = [...items];
+    updated[index] = { ...updated[index], ...patch };
+    onChange(updated);
+  };
+
+  const removeItem = (index) => {
+    onChange(items.filter((_, i) => i !== index));
+  };
+
+  const addItem = () => {
+    onChange([...items, { id: generateId(), name: "", type: "String", description: "" }]);
+  };
+
+  return (
+    <div style={{
+      border: `1px solid ${COLORS.border}`,
+      borderRadius: 8,
+      padding: 12,
+      background: "rgba(255,255,255,0.02)",
+    }}>
+      <div style={{
+        fontSize: 10,
+        fontWeight: 700,
+        letterSpacing: "0.08em",
+        color: ACCENT,
+        marginBottom: 10,
+        textTransform: "uppercase",
+      }}>
+        Data Passed
+      </div>
+
+      {items.map((item, i) => (
+        <div key={item.id} style={{
+          display: "flex",
+          gap: 8,
+          marginBottom: 8,
+          alignItems: "flex-end",
+        }}>
+          <label style={{ ...styles.monoLabel, flex: 1 }}>
+            {i === 0 ? "NAME" : ""}
+            <input
+              value={item.name}
+              onChange={(e) => updateItem(i, { name: e.target.value })}
+              placeholder="e.g. productId"
+              style={styles.input}
+            />
+          </label>
+          <label style={{ ...styles.monoLabel, flex: 0, minWidth: 90 }}>
+            {i === 0 ? "TYPE" : ""}
+            {item.type === "custom" ? (
+              <input
+                value={item.customType || ""}
+                onChange={(e) => updateItem(i, { customType: e.target.value })}
+                placeholder="Custom type"
+                style={styles.input}
+                autoFocus
+                onBlur={(e) => {
+                  if (e.target.value) {
+                    updateItem(i, { type: e.target.value, customType: undefined });
+                  } else {
+                    updateItem(i, { type: "String", customType: undefined });
+                  }
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") e.target.blur();
+                }}
+              />
+            ) : (
+              <select
+                value={item.type || "String"}
+                onChange={(e) => updateItem(i, e.target.value === "custom" ? { type: "custom", customType: "" } : { type: e.target.value })}
+                style={styles.select}
+              >
+                {DATA_TYPES.map((t) => (
+                  <option key={t} value={t}>{t}</option>
+                ))}
+                <option value="custom">Custom...</option>
+              </select>
+            )}
+          </label>
+          <label style={{ ...styles.monoLabel, flex: 1 }}>
+            {i === 0 ? "DESCRIPTION" : ""}
+            <input
+              value={item.description}
+              onChange={(e) => updateItem(i, { description: e.target.value })}
+              placeholder="e.g. Selected product identifier"
+              style={styles.input}
+            />
+          </label>
+          <button
+            type="button"
+            onClick={() => removeItem(i)}
+            style={{
+              background: "none",
+              border: "none",
+              color: COLORS.danger,
+              cursor: "pointer",
+              fontSize: 16,
+              padding: "6px",
+              marginBottom: 6,
+            }}
+          >
+            &#10005;
+          </button>
+        </div>
+      ))}
+
+      <button
+        type="button"
+        onClick={addItem}
+        style={{
+          width: "100%",
+          padding: "6px 0",
+          marginTop: 4,
+          background: `${ACCENT}0d`,
+          border: `1px dashed ${ACCENT}4d`,
+          borderRadius: 6,
+          color: ACCENT,
+          fontSize: 11,
+          cursor: "pointer",
+          fontFamily: "inherit",
+        }}
+      >
+        + Add Data
+      </button>
+    </div>
+  );
+}
diff --git a/src/components/HotspotModal.jsx b/src/components/HotspotModal.jsx
index 4265e19..0ce96f6 100644
--- a/src/components/HotspotModal.jsx
+++ b/src/components/HotspotModal.jsx
@@ -1,9 +1,10 @@
 import { useState, useEffect } from "react";
 import { COLORS, FONTS, styles } from "../styles/theme";
 import { generateId } from "../utils/generateId";
+import { DataFlowEditor } from "./DataFlowEditor";
 
 function FollowUpSection({ title, titleColor, action, setAction, targetId, setTargetId,
-                           customDesc, setCustomDesc, otherScreens }) {
+                           customDesc, setCustomDesc, otherScreens, dataFlow, onDataFlowChange }) {
   return (
     <div style={{
       border: `1px solid ${COLORS.border}`,
@@ -34,15 +35,22 @@ function FollowUpSection({ title, titleColor, action, setAction, targetId, setTa
       </label>
 
       {(action === "navigate" || action === "modal") && (
-        <label style={{ ...styles.monoLabel, marginTop: 10 }}>
-          TARGET SCREEN
-          <select value={targetId} onChange={(e) => setTargetId(e.target.value)} style={styles.select}>
-            <option value="">— Select screen —</option>
-            {otherScreens.map((s) => (
-              <option key={s.id} value={s.id}>{s.name}</option>
-            ))}
-          </select>
-        </label>
+        <>
+          <label style={{ ...styles.monoLabel, marginTop: 10 }}>
+            TARGET SCREEN
+            <select value={targetId} onChange={(e) => setTargetId(e.target.value)} style={styles.select}>
+              <option value="">— Select screen —</option>
+              {otherScreens.map((s) => (
+                <option key={s.id} value={s.id}>{s.name}</option>
+              ))}
+            </select>
+          </label>
+          {dataFlow && onDataFlowChange && (
+            <div style={{ marginTop: 10 }}>
+              <DataFlowEditor items={dataFlow} onChange={onDataFlowChange} />
+            </div>
+          )}
+        </>
       )}
 
       {action === "custom" && (
@@ -105,6 +113,11 @@ export function HotspotModal({ screen, hotspot, connection, screens, documents =
   const [onErrorTargetId, setOnErrorTargetId] = useState(hotspot?.onErrorTargetId || "");
   const [onErrorCustomDesc, setOnErrorCustomDesc] = useState(hotspot?.onErrorCustomDesc || "");
 
+  // Data flow fields
+  const [dataFlow, setDataFlow] = useState(hotspot?.dataFlow || []);
+  const [onSuccessDataFlow, setOnSuccessDataFlow] = useState(hotspot?.onSuccessDataFlow || []);
+  const [onErrorDataFlow, setOnErrorDataFlow] = useState(hotspot?.onErrorDataFlow || []);
+
   // Conditional branching fields
   const [conditions, setConditions] = useState(
     hotspot?.conditions?.length > 0
@@ -276,6 +289,9 @@ export function HotspotModal({ screen, hotspot, connection, screens, documents =
             onErrorAction,
             onErrorTargetId: onErrorTargetId || null,
             onErrorCustomDesc,
+            dataFlow: (action === "navigate" || action === "modal") ? dataFlow : [],
+            onSuccessDataFlow: action === "api" ? onSuccessDataFlow : [],
+            onErrorDataFlow: action === "api" ? onErrorDataFlow : [],
             conditions: action === "conditional" ? conditions : [],
             x, y, w, h,
             transitionType,
@@ -365,65 +381,76 @@ export function HotspotModal({ screen, hotspot, connection, screens, documents =
                 </div>
 
                 {conditions.map((cond, i) => (
-                  <div key={cond.id} style={{
-                    display: "flex",
-                    gap: 8,
-                    marginBottom: 8,
-                    alignItems: "flex-end",
-                  }}>
-                    <label style={{ ...styles.monoLabel, flex: 1 }}>
-                      {i === 0 ? "CONDITION" : ""}
-                      <input
-                        value={cond.label}
-                        onChange={(e) => {
+                  <div key={cond.id} style={{ marginBottom: 8 }}>
+                    <div style={{
+                      display: "flex",
+                      gap: 8,
+                      alignItems: "flex-end",
+                    }}>
+                      <label style={{ ...styles.monoLabel, flex: 1 }}>
+                        {i === 0 ? "CONDITION" : ""}
+                        <input
+                          value={cond.label}
+                          onChange={(e) => {
+                            const updated = [...conditions];
+                            updated[i] = { ...updated[i], label: e.target.value };
+                            setConditions(updated);
+                          }}
+                          placeholder={i === conditions.length - 1 ? "e.g. otherwise" : "e.g. user is subscriber"}
+                          style={styles.input}
+                        />
+                      </label>
+                      <label style={{ ...styles.monoLabel, flex: 1 }}>
+                        {i === 0 ? "TARGET SCREEN" : ""}
+                        <select
+                          value={cond.targetScreenId || ""}
+                          onChange={(e) => {
+                            const updated = [...conditions];
+                            updated[i] = { ...updated[i], targetScreenId: e.target.value || "" };
+                            setConditions(updated);
+                          }}
+                          style={styles.select}
+                        >
+                          <option value="">-- Select --</option>
+                          {otherScreens.map((s) => (
+                            <option key={s.id} value={s.id}>{s.name}</option>
+                          ))}
+                        </select>
+                      </label>
+                      {conditions.length > 1 && (
+                        <button
+                          type="button"
+                          onClick={() => setConditions(conditions.filter((_, j) => j !== i))}
+                          style={{
+                            background: "none",
+                            border: "none",
+                            color: COLORS.danger,
+                            cursor: "pointer",
+                            fontSize: 16,
+                            padding: "6px",
+                            marginBottom: 6,
+                          }}
+                        >
+                          &#10005;
+                        </button>
+                      )}
+                    </div>
+                    <div style={{ marginTop: 6, marginLeft: 8 }}>
+                      <DataFlowEditor
+                        items={cond.dataFlow || []}
+                        onChange={(newDataFlow) => {
                           const updated = [...conditions];
-                          updated[i] = { ...updated[i], label: e.target.value };
+                          updated[i] = { ...updated[i], dataFlow: newDataFlow };
                           setConditions(updated);
                         }}
-                        placeholder={i === conditions.length - 1 ? "e.g. otherwise" : "e.g. user is subscriber"}
-                        style={styles.input}
                       />
-                    </label>
-                    <label style={{ ...styles.monoLabel, flex: 1 }}>
-                      {i === 0 ? "TARGET SCREEN" : ""}
-                      <select
-                        value={cond.targetScreenId || ""}
-                        onChange={(e) => {
-                          const updated = [...conditions];
-                          updated[i] = { ...updated[i], targetScreenId: e.target.value || "" };
-                          setConditions(updated);
-                        }}
-                        style={styles.select}
-                      >
-                        <option value="">-- Select --</option>
-                        {otherScreens.map((s) => (
-                          <option key={s.id} value={s.id}>{s.name}</option>
-                        ))}
-                      </select>
-                    </label>
-                    {conditions.length > 1 && (
-                      <button
-                        type="button"
-                        onClick={() => setConditions(conditions.filter((_, j) => j !== i))}
-                        style={{
-                          background: "none",
-                          border: "none",
-                          color: COLORS.danger,
-                          cursor: "pointer",
-                          fontSize: 16,
-                          padding: "6px",
-                          marginBottom: 6,
-                        }}
-                      >
-                        &#10005;
-                      </button>
-                    )}
+                    </div>
                   </div>
                 ))}
 
                 <button
                   type="button"
-                  onClick={() => setConditions([...conditions, { id: generateId(), label: "", targetScreenId: "" }])}
+                  onClick={() => setConditions([...conditions, { id: generateId(), label: "", targetScreenId: "", dataFlow: [] }])}
                   style={{
                     width: "100%",
                     padding: "6px 0",
@@ -548,6 +575,8 @@ export function HotspotModal({ screen, hotspot, connection, screens, documents =
                   customDesc={onSuccessCustomDesc}
                   setCustomDesc={setOnSuccessCustomDesc}
                   otherScreens={otherScreens}
+                  dataFlow={onSuccessDataFlow}
+                  onDataFlowChange={setOnSuccessDataFlow}
                 />
 
                 <FollowUpSection
@@ -560,6 +589,8 @@ export function HotspotModal({ screen, hotspot, connection, screens, documents =
                   customDesc={onErrorCustomDesc}
                   setCustomDesc={setOnErrorCustomDesc}
                   otherScreens={otherScreens}
+                  dataFlow={onErrorDataFlow}
+                  onDataFlowChange={setOnErrorDataFlow}
                 />
               </>
             )}
@@ -578,15 +609,19 @@ export function HotspotModal({ screen, hotspot, connection, screens, documents =
             )}
 
             {(action === "navigate" || action === "modal") && (
-              <label style={styles.monoLabel}>
-                TARGET SCREEN
-                <select value={targetId} onChange={(e) => setTargetId(e.target.value)} style={styles.select}>
-                  <option value="">— Select screen —</option>
-                  {otherScreens.map((s) => (
-                    <option key={s.id} value={s.id}>{s.name}</option>
-                  ))}
-                </select>
-              </label>
+              <>
+                <label style={styles.monoLabel}>
+                  TARGET SCREEN
+                  <select value={targetId} onChange={(e) => setTargetId(e.target.value)} style={styles.select}>
+                    <option value="">— Select screen —</option>
+                    {otherScreens.map((s) => (
+                      <option key={s.id} value={s.id}>{s.name}</option>
+                    ))}
+                  </select>
+                </label>
+
+                <DataFlowEditor items={dataFlow} onChange={setDataFlow} />
+              </>
             )}
 
             {/* Validation rules (text-input only) */}
diff --git a/src/constants.js b/src/constants.js
index 3621536..1b0d0ff 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -5,7 +5,7 @@ export const GITHUB_URL = "https://github.com/codeflow-studio/drawd";
 export const DOMAIN = "drawd.app";
 
 // ── File Format ──────────────────────────────
-export const FILE_VERSION = 10;
+export const FILE_VERSION = 11;
 export const FILE_EXTENSION = ".drawd";
 export const LEGACY_FILE_EXTENSION = ".flowforge";
 export const DEFAULT_EXPORT_FILENAME = "flow-export";
diff --git a/src/hooks/useScreenManager.js b/src/hooks/useScreenManager.js
index 918fbe6..a6a84ba 100644
--- a/src/hooks/useScreenManager.js
+++ b/src/hooks/useScreenManager.js
@@ -362,7 +362,7 @@ export function useScreenManager(pan, zoom, canvasRef) {
         if (exists) {
           return cleaned.map((c) =>
             c.fromScreenId === screenId && c.hotspotId === hotspot.id
-              ? { ...c, toScreenId: hotspot.targetScreenId, label: hotspot.label, connectionPath: "default" }
+              ? { ...c, toScreenId: hotspot.targetScreenId, label: hotspot.label, connectionPath: "default", dataFlow: hotspot.dataFlow || [] }
               : c
           );
         }
@@ -378,6 +378,7 @@ export function useScreenManager(pan, zoom, canvasRef) {
             connectionPath: "default",
             transitionType: null,
             transitionLabel: "",
+            dataFlow: hotspot.dataFlow || [],
           },
         ];
       });
@@ -406,6 +407,7 @@ export function useScreenManager(pan, zoom, canvasRef) {
             connectionPath: "api-success",
             transitionType: null,
             transitionLabel: "",
+            dataFlow: hotspot.onSuccessDataFlow || [],
           });
         }
 
@@ -421,6 +423,7 @@ export function useScreenManager(pan, zoom, canvasRef) {
             connectionPath: "api-error",
             transitionType: null,
             transitionLabel: "",
+            dataFlow: hotspot.onErrorDataFlow || [],
           });
         }
 
@@ -446,6 +449,7 @@ export function useScreenManager(pan, zoom, canvasRef) {
               condition: cond.label || "",
               transitionType: null,
               transitionLabel: "",
+              dataFlow: cond.dataFlow || [],
             });
           }
         });
@@ -589,6 +593,7 @@ export function useScreenManager(pan, zoom, canvasRef) {
           action: "navigate",
           transitionType: null,
           transitionLabel: "",
+          dataFlow: [],
         },
       ];
     });
@@ -633,6 +638,7 @@ export function useScreenManager(pan, zoom, canvasRef) {
           conditionGroupId: null,
           transitionType: payload.transitionType || null,
           transitionLabel: payload.transitionLabel || "",
+          dataFlow: payload.dataFlow || [],
         }];
       }
 
@@ -652,6 +658,7 @@ export function useScreenManager(pan, zoom, canvasRef) {
             conditionGroupId: groupId,
             transitionType: payload.transitionType || null,
             transitionLabel: payload.transitionLabel || "",
+            dataFlow: cond.dataFlow || [],
           }));
         return [...cleaned, ...newConns];
       }
@@ -686,6 +693,7 @@ export function useScreenManager(pan, zoom, canvasRef) {
         conditionGroupId: groupId,
         transitionType: null,
         transitionLabel: "",
+        dataFlow: [],
       }];
     });
     return groupId;
@@ -711,6 +719,7 @@ export function useScreenManager(pan, zoom, canvasRef) {
         conditionGroupId,
         transitionType: null,
         transitionLabel: "",
+        dataFlow: [],
       }];
     });
   }, [screens, connections, documents, pushHistory]);
@@ -731,6 +740,7 @@ export function useScreenManager(pan, zoom, canvasRef) {
         action: "navigate",
         transitionType: null,
         transitionLabel: "",
+        dataFlow: [],
       }];
     });
   }, [screens, connections, documents, pushHistory]);
diff --git a/src/pages/docs/userGuide.md b/src/pages/docs/userGuide.md
index 26134ab..a7cdd14 100644
--- a/src/pages/docs/userGuide.md
+++ b/src/pages/docs/userGuide.md
@@ -161,6 +161,19 @@ Plain connections can have a label (e.g., "Tap submit"). Labels appear as small
 > [!NOTE]
 > Deleting a connection removes only the arrow — the hotspot that created it remains on the screen.
 
+### Data flow annotations
+
+Annotate what data passes between screens along a connection. For example, "productId: String" flows from a product list to a product detail screen.
+
+- Double-click a connection line to open the edit modal. A "Data Passed" section lets you add data items, each with a name, type, and optional description.
+- For hotspot-backed connections, the same editor appears in the hotspot modal after the target screen selector.
+- For API hotspots, each follow-up path (On Success / On Error) has its own data flow editor.
+- Connections with data annotations show a teal badge on the canvas (e.g., "productId" or "3 params").
+- Generated instructions include an "Input Parameters" table per screen listing all incoming data, and the navigation table includes a "Data" column.
+
+> [!TIP]
+> Data flow annotations are the bridge between "where users go" and "what information each screen needs". They prevent AI agents from generating screens that lack required parameters.
+
 ## Conditional Branching
 
 Conditional branching lets you model flows where a single action leads to different screens depending on a condition — for example, different outcomes based on whether a user is authenticated.
diff --git a/src/utils/buildPayload.test.js b/src/utils/buildPayload.test.js
index a8e3574..49530e7 100644
--- a/src/utils/buildPayload.test.js
+++ b/src/utils/buildPayload.test.js
@@ -6,9 +6,9 @@ describe("buildPayload", () => {
   const connections = [{ id: "c1" }];
   const documents = [{ id: "d1" }, { id: "d2" }, { id: "d3" }];
 
-  it("sets version to 10", () => {
+  it("sets version to 11", () => {
     const payload = buildPayload([], [], { x: 0, y: 0 }, 1);
-    expect(payload.version).toBe(10);
+    expect(payload.version).toBe(11);
   });
 
   it("sets metadata.screenCount to screens.length", () => {
diff --git a/src/utils/generateInstructionFiles.js b/src/utils/generateInstructionFiles.js
index d2067a4..7ab1b69 100644
--- a/src/utils/generateInstructionFiles.js
+++ b/src/utils/generateInstructionFiles.js
@@ -393,7 +393,7 @@ export function mostCommon(arr) {
   return Object.entries(counts).sort((a, b) => b[1] - a[1])[0][0];
 }
 
-function generateScreenDetailMd(s, screens, images, documents = []) {
+function generateScreenDetailMd(s, screens, connections, images, documents = []) {
   let md = "";
 
   if (s.description) {
@@ -404,6 +404,22 @@ function generateScreenDetailMd(s, screens, images, documents = []) {
     md += `**File:** \`${s.codeRef}\`\n\n`;
   }
 
+  // Input Parameters from incoming connections
+  const incoming = (connections || []).filter(c => c.toScreenId === s.id && c.dataFlow?.length > 0);
+  if (incoming.length > 0) {
+    md += `#### Input Parameters\n\n`;
+    md += `| Parameter | Type | From Screen | Via | Description |\n`;
+    md += `|-----------|------|-------------|-----|-------------|\n`;
+    for (const conn of incoming) {
+      const fromScreen = screens.find(fs => fs.id === conn.fromScreenId);
+      const trigger = resolveHotspotLabel(conn, screens) || conn.label || "\u2014";
+      for (const d of conn.dataFlow) {
+        md += `| ${d.name} | ${d.type || "Any"} | ${fromScreen?.name || "?"} | ${trigger} | ${d.description || "\u2014"} |\n`;
+      }
+    }
+    md += `\n`;
+  }
+
   if (s.acceptanceCriteria && s.acceptanceCriteria.length > 0) {
     md += `**Acceptance Criteria:**\n\n`;
     s.acceptanceCriteria.forEach((c) => { md += `- [ ] ${c}\n`; });
@@ -541,7 +557,7 @@ function generateScreensMd(screens, connections, images, documents = []) {
       group.forEach((gs) => {
         output.add(gs.id);
         md += `### State: ${gs.stateName || gs.name}\n\n`;
-        md += generateScreenDetailMd(gs, screens, images, documents);
+        md += generateScreenDetailMd(gs, screens, connections, images, documents);
       });
 
       md += `---\n\n`;
@@ -551,7 +567,7 @@ function generateScreensMd(screens, connections, images, documents = []) {
       if (s.tbd && s.tbdNote) {
         md += `> ⚠️ **TBD:** ${s.tbdNote}\n\n`;
       }
-      md += generateScreenDetailMd(s, screens, images, documents);
+      md += generateScreenDetailMd(s, screens, connections, images, documents);
       md += `---\n\n`;
     }
   });
@@ -624,8 +640,8 @@ function generateNavigationMd(screens, connections, navAnalysis) {
   if (connections.length === 0) {
     md += `No connections defined yet.\n\n`;
   } else {
-    md += `| # | ID | From | To | Trigger | Action | Transition | Condition |\n`;
-    md += `|---|-------|------|----|---------|--------|------------|-----------|\n`;
+    md += `| # | ID | From | To | Trigger | Action | Transition | Condition | Data |\n`;
+    md += `|---|-------|------|----|---------|--------|------------|-----------|------|\n`;
     connections.forEach((c, i) => {
       const reqId = connectionReqId(c);
       const from = screens.find(s => s.id === c.fromScreenId);
@@ -639,7 +655,10 @@ function generateNavigationMd(screens, connections, navAnalysis) {
         ? (c.transitionType === "custom" ? (c.transitionLabel || "custom") : c.transitionType)
         : "\u2014";
       const conditionCol = c.condition || "\u2014";
-      md += `| ${i + 1} | \`${reqId}\` | ${from?.name || "?"} | ${to?.name || "?"} | ${label || "\u2014"} | ${actionCol} | ${transitionCol} | ${conditionCol} |\n`;
+      const dataCol = c.dataFlow?.length > 0
+        ? c.dataFlow.map(d => `${d.name}: ${d.type || "Any"}`).join(", ")
+        : "\u2014";
+      md += `| ${i + 1} | \`${reqId}\` | ${from?.name || "?"} | ${to?.name || "?"} | ${label || "\u2014"} | ${actionCol} | ${transitionCol} | ${conditionCol} | ${dataCol} |\n`;
     });
     md += `\n`;
   }
@@ -773,7 +792,10 @@ function generateTasksMd(screens, connections, options) {
       const toScreen = allScreens.find(ts => ts.id === conn.toScreenId);
       const label = conn.label || resolveHotspotLabel(conn, allScreens) || "tap";
       if (toScreen) {
-        md += `- [ ] Wire: ${label} → ${toScreen.name}\n`;
+        const dataSuffix = conn.dataFlow?.length > 0
+          ? ` (pass: ${conn.dataFlow.map(d => `${d.name}: ${d.type || "Any"}`).join(", ")})`
+          : "";
+        md += `- [ ] Wire: ${label} → ${toScreen.name}${dataSuffix}\n`;
       }
     });
 
diff --git a/src/utils/importFlow.js b/src/utils/importFlow.js
index 117e013..e6f7a4f 100644
--- a/src/utils/importFlow.js
+++ b/src/utils/importFlow.js
@@ -63,6 +63,9 @@ export function importFlow(fileText) {
         if (!hs.onErrorAction) hs.onErrorAction = "";
         if (!hs.onErrorTargetId) hs.onErrorTargetId = "";
         if (!hs.onErrorCustomDesc) hs.onErrorCustomDesc = "";
+        if (!Array.isArray(hs.dataFlow)) hs.dataFlow = [];
+        if (!Array.isArray(hs.onSuccessDataFlow)) hs.onSuccessDataFlow = [];
+        if (!Array.isArray(hs.onErrorDataFlow)) hs.onErrorDataFlow = [];
 
         // v4 -> v5 migration: promote inline apiDocs to a document
         if (data.version < 5) {
@@ -96,6 +99,7 @@ export function importFlow(fileText) {
     if (conn.conditionGroupId === undefined) conn.conditionGroupId = null;
     if (conn.transitionType === undefined) conn.transitionType = null;
     if (conn.transitionLabel === undefined) conn.transitionLabel = "";
+    if (!Array.isArray(conn.dataFlow)) conn.dataFlow = [];
   }
 
   // Backward compat: featureBrief
diff --git a/src/utils/importFlow.test.js b/src/utils/importFlow.test.js
index 9facb9f..71047ef 100644
--- a/src/utils/importFlow.test.js
+++ b/src/utils/importFlow.test.js
@@ -24,9 +24,9 @@ describe("importFlow", () => {
     );
   });
 
-  it("throws for future version > 10", () => {
+  it("throws for future version > 11", () => {
     expect(() =>
-      importFlow(JSON.stringify({ version: 11, screens: [], connections: [] }))
+      importFlow(JSON.stringify({ version: 12, screens: [], connections: [] }))
     ).toThrow("Unsupported file version");
   });