diff --git a/web/packages/common/src/components/form/ControlledSwitch/index.tsx b/web/packages/common/src/components/form/ControlledSwitch/index.tsx
index b31618ec66..997518a686 100644
--- a/web/packages/common/src/components/form/ControlledSwitch/index.tsx
+++ b/web/packages/common/src/components/form/ControlledSwitch/index.tsx
@@ -14,6 +14,10 @@ interface Props
   attributes?: {
     Flex?: ComponentProps<typeof Flex>;
   };
+  /** Converts the stored form value to the switch's boolean checked state. */
+  toChecked?: (value: unknown) => boolean;
+  /** Converts the switch's boolean value before storing it in the form. */
+  toFormValue?: (checked: boolean) => unknown;
 }
 
 export const ControlledSwitch: FC<Props> = ({
@@ -21,13 +25,15 @@ export const ControlledSwitch: FC<Props> = ({
   formFieldProps,
   onChange,
   attributes,
+  toChecked,
+  toFormValue,
   ...props
 }) => {
   const { field } = useController(useControllerProps);
 
   const wrappedOnChange = (checked: boolean) => {
     onChange?.(checked);
-    field.onChange(checked);
+    field.onChange(toFormValue ? toFormValue(checked) : checked);
   };
 
   return (
@@ -39,7 +45,7 @@ export const ControlledSwitch: FC<Props> = ({
             name={field.name}
             ref={field.ref}
             onBlur={field.onBlur}
-            checked={field.value}
+            checked={toChecked ? toChecked(field.value) : Boolean(field.value)}
             onCheckedChange={wrappedOnChange}
             {...props}
           />
diff --git a/web/packages/studio/src/components/ColumnConfigPanel/SeedDatasetConfig.tsx b/web/packages/studio/src/components/ColumnConfigPanel/SeedDatasetConfig.tsx
index cd529bf66f..8fe513fca0 100644
--- a/web/packages/studio/src/components/ColumnConfigPanel/SeedDatasetConfig.tsx
+++ b/web/packages/studio/src/components/ColumnConfigPanel/SeedDatasetConfig.tsx
@@ -1,9 +1,10 @@
 // SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import { ControlledSelect } from '@nemo/common/src/components/form/ControlledSelect';
 import { getPartsFromReference } from '@nemo/common/src/namedEntity';
 import { useFilesListFilesetFiles } from '@nemo/sdk/generated/platform/api';
-import { Flex, FormField, Select, Tag, Text } from '@nvidia/foundations-react-core';
+import { Flex, FormField, Tag, Text } from '@nvidia/foundations-react-core';
 import { useDatasetFileContent } from '@studio/api/datasets/useDatasetFileContent';
 import { useWorkspaceFromPath } from '@studio/hooks/useWorkspaceFromPath';
 import {
@@ -13,20 +14,14 @@ import {
   SEED_FILESET_REF_KEY,
   SEED_SAMPLING_STRATEGY_KEY,
 } from '@studio/routes/DataDesignerJobBuildRoute/columns';
+import type { JobBuilderFormValues } from '@studio/routes/DataDesignerJobBuildRoute/useJobBuilder';
 import { FilesetSearchableSelect } from '@studio/routes/DeploymentsListRoute/CreateDeploymentSidePanel/FilesetSearchableSelect';
 import { getContentColumns, getFileExtension } from '@studio/util/files';
-import { type FC, useEffect, useMemo } from 'react';
-import { useForm } from 'react-hook-form';
+import { type FC, useEffect, useMemo, useRef } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
 
 export interface SeedDatasetConfigProps {
-  /** The seed-dataset column's current field values. */
-  values: Record<string, string>;
-  /** Merges the given keys into the column's values (parent spreads onto the rest). */
-  onPatch: (patch: Record<string, string>) => void;
-}
-
-interface SeedFilesetForm {
-  [SEED_FILESET_REF_KEY]: string;
+  columnIndex: number;
 }
 
 /**
@@ -37,31 +32,32 @@ interface SeedFilesetForm {
  * fileset and the in-fileset file as separate picks (stored under {@link SEED_FILESET_REF_KEY} /
  * {@link SEED_FILE_PATH_KEY}). `buildSeedConfig` assembles them into the composite path at submit.
  *
- * The fileset uses {@link FilesetSearchableSelect} for server-side `$like` search + paging. It is
- * react-hook-form based, so a local form holds its value and pushes changes up via `onPatch`.
- * The panel keys this component by column id, so each column mounts a form seeded from its values.
+ * Every control is registered directly on the build form. This keeps the fileset controls in the
+ * same state tree as the rest of the column and isolates updates to their own subscribers.
  */
-export const SeedDatasetConfig: FC<SeedDatasetConfigProps> = ({ values, onPatch }) => {
+export const SeedDatasetConfig: FC<SeedDatasetConfigProps> = ({ columnIndex }) => {
   const workspace = useWorkspaceFromPath();
-  const filesetRef = values[SEED_FILESET_REF_KEY] ?? '';
-  const filePath = values[SEED_FILE_PATH_KEY] ?? '';
-  const samplingStrategy = values[SEED_SAMPLING_STRATEGY_KEY] ?? '';
-
-  const { control, watch } = useForm<SeedFilesetForm>({
-    defaultValues: { [SEED_FILESET_REF_KEY]: filesetRef },
+  const { control, setValue } = useFormContext<JobBuilderFormValues>();
+  const filesetRefPath = `columns.${columnIndex}.values.${SEED_FILESET_REF_KEY}` as const;
+  const filePathPath = `columns.${columnIndex}.values.${SEED_FILE_PATH_KEY}` as const;
+  const samplingStrategyPath =
+    `columns.${columnIndex}.values.${SEED_SAMPLING_STRATEGY_KEY}` as const;
+  const availableColumnsPath =
+    `columns.${columnIndex}.values.${SEED_AVAILABLE_COLUMNS_KEY}` as const;
+  const filesetRef = useWatch({ control, name: filesetRefPath }) ?? '';
+  const filePath = useWatch({ control, name: filePathPath }) ?? '';
+  const availableColumnsValue = useWatch({
+    control,
+    name: availableColumnsPath,
   });
 
+  const previousFilesetRef = useRef(filesetRef);
   useEffect(() => {
-    const subscription = watch((formValues, { name }) => {
-      if (name !== SEED_FILESET_REF_KEY) return;
-      onPatch({
-        [SEED_FILESET_REF_KEY]: formValues[SEED_FILESET_REF_KEY] ?? '',
-        [SEED_FILE_PATH_KEY]: '',
-        [SEED_AVAILABLE_COLUMNS_KEY]: '',
-      });
-    });
-    return () => subscription.unsubscribe();
-  }, [watch, onPatch]);
+    if (previousFilesetRef.current === filesetRef) return;
+    previousFilesetRef.current = filesetRef;
+    setValue(filePathPath, '');
+    setValue(availableColumnsPath, '');
+  }, [availableColumnsPath, filePathPath, filesetRef, setValue]);
 
   const { workspace: filesetWorkspace, name: filesetName } = getPartsFromReference(filesetRef);
   const { data: filesResponse, isLoading: isLoadingFiles } = useFilesListFilesetFiles(
@@ -95,21 +91,16 @@ export const SeedDatasetConfig: FC<SeedDatasetConfigProps> = ({ values, onPatch
 
   useEffect(() => {
     const joined = availableColumns.join(',');
-    if ((values[SEED_AVAILABLE_COLUMNS_KEY] ?? '') !== joined) {
-      onPatch({ [SEED_AVAILABLE_COLUMNS_KEY]: joined });
+    if (availableColumnsValue !== joined) {
+      setValue(availableColumnsPath, joined);
     }
-  }, [availableColumns, values, onPatch]);
-
-  const samplingItems = SAMPLING_STRATEGY_OPTIONS.map((option) => ({
-    children: option.label,
-    value: option.value,
-  }));
+  }, [availableColumns, availableColumnsPath, availableColumnsValue, setValue]);
 
   return (
     <>
       <FilesetSearchableSelect
         workspace={workspace}
-        useControllerProps={{ control, name: SEED_FILESET_REF_KEY }}
+        useControllerProps={{ control, name: filesetRefPath }}
         formFieldProps={{
           slotLabel: 'Fileset',
           slotInfo: 'The platform fileset to seed rows from.',
@@ -117,31 +108,25 @@ export const SeedDatasetConfig: FC<SeedDatasetConfigProps> = ({ values, onPatch
         triggerPlaceholder="Select a fileset"
       />
 
-      <FormField
-        slotLabel="File"
-        required
-        slotInfo="The file within the fileset to read rows from."
-      >
-        <Select
-          aria-label="Seed file"
-          disabled={!filesetRef}
-          items={fileItems}
-          value={filePath || undefined}
-          onValueChange={(value) =>
-            onPatch({
-              [SEED_FILE_PATH_KEY]: value ?? '',
-              [SEED_AVAILABLE_COLUMNS_KEY]: '',
-            })
-          }
-          placeholder={
-            !filesetRef
-              ? 'Select a fileset first'
-              : isLoadingFiles
-                ? 'Loading files…'
-                : 'Select a file'
-          }
-        />
-      </FormField>
+      <ControlledSelect
+        aria-label="Seed file"
+        disabled={!filesetRef}
+        items={fileItems}
+        useControllerProps={{ name: filePathPath }}
+        formFieldProps={{
+          slotLabel: 'File',
+          required: true,
+          slotInfo: 'The file within the fileset to read rows from.',
+        }}
+        onChange={() => setValue(availableColumnsPath, '')}
+        placeholder={
+          !filesetRef
+            ? 'Select a fileset first'
+            : isLoadingFiles
+              ? 'Loading files…'
+              : 'Select a file'
+        }
+      />
 
       {filePath && (
         <FormField
@@ -172,18 +157,19 @@ export const SeedDatasetConfig: FC<SeedDatasetConfigProps> = ({ values, onPatch
         </FormField>
       )}
 
-      <FormField
-        slotLabel="Sampling strategy"
-        slotInfo="How rows are read from the seed dataset. Defaults to ordered."
-      >
-        <Select
-          aria-label="Sampling strategy"
-          items={samplingItems}
-          value={samplingStrategy || undefined}
-          onValueChange={(value) => onPatch({ [SEED_SAMPLING_STRATEGY_KEY]: value ?? '' })}
-          placeholder="Ordered"
-        />
-      </FormField>
+      <ControlledSelect
+        aria-label="Sampling strategy"
+        items={SAMPLING_STRATEGY_OPTIONS.map((option) => ({
+          children: option.label,
+          value: option.value,
+        }))}
+        useControllerProps={{ name: samplingStrategyPath }}
+        formFieldProps={{
+          slotLabel: 'Sampling strategy',
+          slotInfo: 'How rows are read from the seed dataset. Defaults to ordered.',
+        }}
+        placeholder="Ordered"
+      />
     </>
   );
 };
diff --git a/web/packages/studio/src/components/ColumnConfigPanel/index.tsx b/web/packages/studio/src/components/ColumnConfigPanel/index.tsx
index e6f3013e3f..e3c9e774fa 100644
--- a/web/packages/studio/src/components/ColumnConfigPanel/index.tsx
+++ b/web/packages/studio/src/components/ColumnConfigPanel/index.tsx
@@ -1,118 +1,121 @@
 // SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import { ControlledSelect } from '@nemo/common/src/components/form/ControlledSelect';
+import { ControlledSwitch } from '@nemo/common/src/components/form/ControlledSwitch';
+import { ControlledTextArea } from '@nemo/common/src/components/form/ControlledTextArea';
+import { ControlledTextInput } from '@nemo/common/src/components/form/ControlledTextInput';
 import { SamplerType } from '@nemo/sdk/generated/data-designer/schema';
-import {
-  Banner,
-  Button,
-  Flex,
-  FormField,
-  SelectContent,
-  SelectItem,
-  SelectListbox,
-  SelectRoot,
-  SelectTrigger,
-  Stack,
-  Switch,
-  Text,
-  TextArea,
-  TextInput,
-} from '@nvidia/foundations-react-core';
+import { Banner, Button, Flex, Stack, Text } from '@nvidia/foundations-react-core';
 import { ICON_COLOR_CLASS } from '@studio/components/AddColumnPalette/constants';
 import { SeedDatasetConfig } from '@studio/components/ColumnConfigPanel/SeedDatasetConfig';
 import { CardIconBadge } from '@studio/components/common/SelectableCard';
 import {
-  type BuilderColumn,
   type ColumnField,
   getColumnFields,
   validateColumnName,
 } from '@studio/routes/DataDesignerJobBuildRoute/columns';
+import type { JobBuilderFormValues } from '@studio/routes/DataDesignerJobBuildRoute/useJobBuilder';
 import { Trash2, X } from 'lucide-react';
 import type { FC } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
 
-/** Renders one config field as the appropriate control, wrapped in a `FormField`. */
-const FieldControl: FC<{
+interface FieldControlProps {
+  columnIndex: number;
   field: ColumnField;
-  value: string;
-  onChange: (value: string) => void;
-}> = ({ field, value, onChange }) => {
-  const control = () => {
-    switch (field.kind) {
-      case 'textarea':
-        return (
-          <TextArea
-            value={value}
-            onValueChange={onChange}
-            placeholder={field.placeholder}
-            resizeable="auto"
-          />
-        );
-      case 'select':
-        return (
-          <SelectRoot value={value || undefined} onValueChange={onChange}>
-            <SelectTrigger className="w-full" placeholder="Select…" />
-            <SelectContent className="w-(--radix-popper-anchor-width)">
-              <SelectListbox>
-                {field.options?.map((opt) => (
-                  <SelectItem key={opt.value} value={opt.value}>
-                    {opt.label}
-                  </SelectItem>
-                ))}
-              </SelectListbox>
-            </SelectContent>
-          </SelectRoot>
-        );
-      case 'number':
-        return (
-          <TextInput
-            value={value}
-            onValueChange={onChange}
-            placeholder={field.placeholder}
-            attributes={{ Input: { type: 'number', inputMode: 'decimal' } }}
-          />
-        );
-      default:
-        return <TextInput value={value} onValueChange={onChange} placeholder={field.placeholder} />;
-    }
-  };
+}
 
-  // A boolean toggle reads better as an inline switch than a stacked FormField control.
-  if (field.kind === 'switch') {
-    return (
-      <FormField slotLabel={field.label} slotInfo={field.helperText}>
-        <Switch
-          checked={value === 'true'}
-          onCheckedChange={(checked) => onChange(checked ? 'true' : 'false')}
+/** A field-level RHF subscription; editing it leaves the route, list, and other fields alone. */
+const FieldControl: FC<FieldControlProps> = ({ columnIndex, field }) => {
+  const fieldPath = `columns.${columnIndex}.values.${field.key}` as const;
+  const useControllerProps = { name: fieldPath };
+  const formFieldProps = { slotInfo: field.helperText };
+
+  switch (field.kind) {
+    case 'textarea':
+      return (
+        <ControlledTextArea
+          label={field.label}
+          required={field.required}
+          useControllerProps={useControllerProps}
+          formFieldProps={formFieldProps}
+          placeholder={field.placeholder}
+          resizeable="auto"
+        />
+      );
+    case 'select':
+      return (
+        <ControlledSelect
+          items={
+            field.options?.map((option) => ({ children: option.label, value: option.value })) ?? []
+          }
+          useControllerProps={useControllerProps}
+          formFieldProps={{ ...formFieldProps, slotLabel: field.label, required: field.required }}
+          placeholder="Select…"
         />
-      </FormField>
-    );
+      );
+    case 'switch':
+      return (
+        <ControlledSwitch
+          useControllerProps={useControllerProps}
+          formFieldProps={{ ...formFieldProps, slotLabel: field.label }}
+          toChecked={(value) => value === 'true'}
+          toFormValue={(checked) => (checked ? 'true' : 'false')}
+        />
+      );
+    default:
+      return (
+        <ControlledTextInput
+          label={field.label}
+          required={field.required}
+          useControllerProps={useControllerProps}
+          formFieldProps={formFieldProps}
+          placeholder={field.placeholder}
+          type={field.kind === 'number' ? 'text' : undefined}
+          attributes={field.kind === 'number' ? { Input: { inputMode: 'decimal' } } : undefined}
+        />
+      );
   }
+};
+
+interface ColumnNameControlProps {
+  columnIndex: number;
+}
+
+const ColumnNameControl: FC<ColumnNameControlProps> = ({ columnIndex }) => {
+  const { control, getValues } = useFormContext<JobBuilderFormValues>();
+  const namePath = `columns.${columnIndex}.name` as const;
+  const columnCount = getValues('columns').length;
+  const value = useWatch({ control, name: namePath }) ?? '';
+  const names = useWatch({
+    control,
+    name: Array.from({ length: columnCount }, (_, index) => `columns.${index}.name` as const),
+  });
+  const takenNames = new Set(names.filter((name, index) => index !== columnIndex && Boolean(name)));
+  const nameError = validateColumnName(value, takenNames);
 
   return (
-    <FormField slotLabel={field.label} required={field.required} slotInfo={field.helperText}>
-      {control()}
-    </FormField>
+    <ControlledTextInput
+      label="Column name"
+      required
+      useControllerProps={{ name: namePath }}
+      formFieldProps={{
+        slotInfo: 'Other columns reference this via {{ name }}.',
+        status: value && nameError ? 'error' : undefined,
+        slotError: value ? (nameError ?? undefined) : undefined,
+      }}
+      placeholder="e.g. topic"
+      aria-label="Column name"
+    />
   );
 };
 
 export interface ColumnConfigPanelProps {
-  /** The column currently being edited. */
-  column: BuilderColumn;
-  /** Names used by other columns, for the uniqueness check. */
-  takenNames: Set<string>;
-  /** Fired live as the user edits the name or any field. */
-  onChange: (patch: { name?: string; values?: Record<string, string> }) => void;
-  /** Removes this column from the canvas. */
+  columnId: string;
   onRemove: () => void;
-  /** Closes the panel (deselects the column). */
   onClose: () => void;
 }
 
-/**
- * Setup note shown for the managed `person` sampler. Unlike the other samplers, it reads
- * from downloaded Nemotron Personas datasets, so it fails at preview/build time (with
- * "Failed to access Nemotron personas filesets") until those are available for the locale.
- */
 const PersonSamplerNote: FC = () => (
   <Banner kind="inline" status="info" title="Requires a managed dataset">
     <Text kind="body/regular/sm">
@@ -121,42 +124,24 @@ const PersonSamplerNote: FC = () => (
     </Text>
     <ol className="list-decimal pl-density-lg">
       <li>
-        Download the Nemotron Personas dataset for your locale into the Data Designer service's
-        managed assets directory.
+        Download the Nemotron Personas dataset for your locale into the managed assets directory.
       </li>
       <li>
         Set <Text kind="body/bold/sm">Locale</Text> below to a supported value (e.g. en_US, en_IN,
         fr_FR, ja_JP, ko_KR, pt_BR).
       </li>
     </ol>
-    <Text kind="body/regular/sm">
-      Without the managed dataset, use a different sampler for local previews.
-    </Text>
   </Banner>
 );
 
-/**
- * Right-hand config panel for the selected column on the build canvas.
- *
- * Renders as an inline pane (not an overlay) so the canvas stays visible while editing.
- * Edits are applied live via {@link ColumnConfigPanelProps.onChange} — as the user types
- * Jinja2 `{{ column_name }}` references, the canvas re-derives its dependency edges. The
- * fields shown are derived from the column type via {@link getColumnFields}.
- */
-export const ColumnConfigPanel: FC<ColumnConfigPanelProps> = ({
-  column,
-  takenNames,
-  onChange,
-  onRemove,
-  onClose,
-}) => {
-  const { option, name, values } = column;
+/** Right-hand config panel for one selected column. */
+export const ColumnConfigPanel: FC<ColumnConfigPanelProps> = ({ columnId, onRemove, onClose }) => {
+  const { getValues } = useFormContext<JobBuilderFormValues>();
+  const columnIndex = getValues('columns').findIndex((column) => column.id === columnId);
+  const column = getValues(`columns.${columnIndex}`);
+  const { option } = column;
   const { icon: Icon, label, description, color } = option;
   const fields = getColumnFields(option);
-  const nameError = validateColumnName(name, takenNames);
-
-  const setValue = (key: string, value: string) =>
-    onChange({ values: { ...values, [key]: value } });
 
   return (
     <aside
@@ -194,36 +179,13 @@ export const ColumnConfigPanel: FC<ColumnConfigPanelProps> = ({
       </Flex>
 
       <Stack gap="density-lg" padding="density-lg" className="min-h-0 flex-1 overflow-y-auto">
-        {option.samplerType === SamplerType.person && <PersonSamplerNote />}
-        <FormField
-          slotLabel="Column name"
-          required
-          slotInfo="Other columns reference this via {{ name }}."
-          status={name && nameError ? 'error' : undefined}
-          slotError={name ? (nameError ?? undefined) : undefined}
-        >
-          <TextInput
-            value={name}
-            onValueChange={(value) => onChange({ name: value })}
-            placeholder="e.g. topic"
-            attributes={{ Input: { 'aria-label': 'Column name' } }}
-          />
-        </FormField>
-
+        {option.samplerType === SamplerType.person ? <PersonSamplerNote /> : null}
+        <ColumnNameControl columnIndex={columnIndex} />
         {option.columnType === 'seed-dataset' ? (
-          <SeedDatasetConfig
-            key={column.id}
-            values={values}
-            onPatch={(patch) => onChange({ values: { ...values, ...patch } })}
-          />
+          <SeedDatasetConfig columnIndex={columnIndex} />
         ) : (
           fields.map((field) => (
-            <FieldControl
-              key={field.key}
-              field={field}
-              value={values[field.key] ?? ''}
-              onChange={(value) => setValue(field.key, value)}
-            />
+            <FieldControl key={field.key} columnIndex={columnIndex} field={field} />
           ))
         )}
       </Stack>
diff --git a/web/packages/studio/src/components/ModelConfigPanel/index.tsx b/web/packages/studio/src/components/ModelConfigPanel/index.tsx
index 4506f9d5eb..40c07b2913 100644
--- a/web/packages/studio/src/components/ModelConfigPanel/index.tsx
+++ b/web/packages/studio/src/components/ModelConfigPanel/index.tsx
@@ -2,51 +2,71 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { ModelWorkspaceGroup } from '@nemo/common/src/api/models/useModels';
+import { ControlledTextInput } from '@nemo/common/src/components/form/ControlledTextInput';
 import { ModelSelectV2 } from '@nemo/common/src/components/ModelSelectV2/ModelSelectV2';
 import type { ModelSelection } from '@nemo/common/src/components/ModelSelectV2/types';
 import type { InferenceParams } from '@nemo/sdk/generated/platform/schema';
-import { Button, Flex, FormField, Stack, Text, TextInput } from '@nvidia/foundations-react-core';
+import { Button, Flex, FormField, Stack, Text } from '@nvidia/foundations-react-core';
 import { CardIconBadge } from '@studio/components/common/SelectableCard';
 import {
-  type BuilderModel,
-  type BuilderModelPatch,
   providerForModel,
   validateModelAlias,
 } from '@studio/routes/DataDesignerJobBuildRoute/models';
+import type { JobBuilderFormValues } from '@studio/routes/DataDesignerJobBuildRoute/useJobBuilder';
 import { Cpu, Trash2, X } from 'lucide-react';
 import type { FC } from 'react';
+import { useController, useFormContext, useWatch } from 'react-hook-form';
+
+const EMPTY_INFERENCE_PARAMS: Partial<InferenceParams> = {};
 
 export interface ModelConfigPanelProps {
-  model: BuilderModel;
-  takenAliases: Set<string>;
+  modelId: string;
   modelGroups: ModelWorkspaceGroup[];
   isLoadingModels?: boolean;
-  onChange: (patch: BuilderModelPatch) => void;
   onRemove: () => void;
   onClose: () => void;
 }
 
-/** Right-hand config panel for a model — sibling of ColumnConfigPanel, same inline layout. */
+/** Right-hand config panel for a model, with subscriptions scoped to its individual fields. */
 export const ModelConfigPanel: FC<ModelConfigPanelProps> = ({
-  model,
-  takenAliases,
+  modelId,
   modelGroups,
   isLoadingModels,
-  onChange,
   onRemove,
   onClose,
 }) => {
-  const aliasError = validateModelAlias(model.alias, takenAliases);
-  const modelValue: ModelSelection | null = model.model ? { model: model.model } : null;
+  const { control, getValues } = useFormContext<JobBuilderFormValues>();
+  const modelIndex = getValues('models').findIndex((model) => model.id === modelId);
+  const aliasPath = `models.${modelIndex}.alias` as const;
+  const { field: modelField } = useController({ control, name: `models.${modelIndex}.model` });
+  const { field: providerField } = useController({
+    control,
+    name: `models.${modelIndex}.provider`,
+  });
+  const { field: inferenceParamsField } = useController({
+    control,
+    name: `models.${modelIndex}.inferenceParams`,
+  });
+  const modelCount = getValues('models').length;
+  const aliases = useWatch({
+    control,
+    name: Array.from({ length: modelCount }, (_, index) => `models.${index}.alias` as const),
+  });
+  const alias = useWatch({ control, name: aliasPath }) ?? '';
+  const aliasError = validateModelAlias(
+    alias,
+    new Set(aliases.filter((value, index) => index !== modelIndex && Boolean(value)))
+  );
+  const modelValue: ModelSelection | null = modelField.value ? { model: modelField.value } : null;
 
-  const handleModelChange = (selection: ModelSelection) =>
-    onChange({ model: selection.model, provider: providerForModel(modelGroups, selection.model) });
-  const handleParamsChange = (params: Partial<InferenceParams>) =>
-    onChange({ inferenceParams: params });
+  const handleModelChange = (selection: ModelSelection) => {
+    modelField.onChange(selection.model);
+    providerField.onChange(providerForModel(modelGroups, selection.model));
+  };
 
   return (
     <aside
-      aria-label={`Configure ${model.alias || 'model'}`}
+      aria-label={`Configure ${alias || 'model'}`}
       className="flex h-full w-full flex-col bg-surface-base"
     >
       <Flex
@@ -80,20 +100,18 @@ export const ModelConfigPanel: FC<ModelConfigPanelProps> = ({
       </Flex>
 
       <Stack gap="density-lg" padding="density-lg" className="min-h-0 flex-1 overflow-y-auto">
-        <FormField
-          slotLabel="Alias"
+        <ControlledTextInput
+          label="Alias"
           required
-          slotInfo="LLM columns reference this model via their model alias."
-          status={model.alias && aliasError ? 'error' : undefined}
-          slotError={model.alias ? (aliasError ?? undefined) : undefined}
-        >
-          <TextInput
-            value={model.alias}
-            onValueChange={(value) => onChange({ alias: value })}
-            placeholder="e.g. default"
-            attributes={{ Input: { 'aria-label': 'Model alias' } }}
-          />
-        </FormField>
+          useControllerProps={{ name: aliasPath }}
+          formFieldProps={{
+            slotInfo: 'LLM columns reference this model via their model alias.',
+            status: alias && aliasError ? 'error' : undefined,
+            slotError: alias ? (aliasError ?? undefined) : undefined,
+          }}
+          placeholder="e.g. default"
+          aria-label="Model alias"
+        />
 
         <FormField slotLabel="Model" required slotInfo="Model and inference parameters.">
           <ModelSelectV2
@@ -105,8 +123,8 @@ export const ModelConfigPanel: FC<ModelConfigPanelProps> = ({
             showParams
             fullWidth
             dropdownSide="bottom"
-            inferenceParams={model.inferenceParams}
-            onInferenceParamsChange={handleParamsChange}
+            inferenceParams={inferenceParamsField.value ?? EMPTY_INFERENCE_PARAMS}
+            onInferenceParamsChange={inferenceParamsField.onChange}
             aria-label="Model selector"
           />
         </FormField>
diff --git a/web/packages/studio/src/components/NewDataDesignerJobForm/usePreview.test.tsx b/web/packages/studio/src/components/NewDataDesignerJobForm/usePreview.test.tsx
new file mode 100644
index 0000000000..784808bbe9
--- /dev/null
+++ b/web/packages/studio/src/components/NewDataDesignerJobForm/usePreview.test.tsx
@@ -0,0 +1,62 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { DataDesignerConfig } from '@nemo/sdk/generated/data-designer/schema';
+import { usePreview } from '@studio/components/NewDataDesignerJobForm/usePreview';
+import { act, renderHook, waitFor } from '@testing-library/react';
+
+const streamPreviewMock = vi.fn();
+vi.mock('@studio/components/NewDataDesignerJobForm/previewApi', async () => {
+  const actual = await vi.importActual<
+    typeof import('@studio/components/NewDataDesignerJobForm/previewApi')
+  >('@studio/components/NewDataDesignerJobForm/previewApi');
+  return { ...actual, streamPreview: (...a: unknown[]) => streamPreviewMock(...a) };
+});
+
+const CONFIG = { columns: [] } as unknown as DataDesignerConfig;
+
+describe('usePreview', () => {
+  beforeEach(() => streamPreviewMock.mockReset());
+
+  it('surfaces an error when building the config throws (e.g. invalid JSON field)', async () => {
+    const { result } = renderHook(() =>
+      usePreview({
+        workspace: 'ws',
+        accessToken: 'token',
+        getCurrentConfig: () => {
+          throw new SyntaxError('Unexpected token n in JSON at position 2');
+        },
+      })
+    );
+
+    await act(async () => {
+      await result.current.runPreview();
+    });
+
+    // A thrown config-build error must be shown to the user, not silently swallowed.
+    await waitFor(() => {
+      expect(result.current.previewLogs).not.toBe('');
+    });
+    expect(result.current.previewLogs).toMatch(/JSON|error|preview/i);
+    expect(result.current.isPreviewing).toBe(false);
+    expect(streamPreviewMock).not.toHaveBeenCalled();
+  });
+
+  it('streams normally when the config builds', async () => {
+    streamPreviewMock.mockImplementation(async (...args: unknown[]) => {
+      const onLine = args.find((a) => typeof a === 'function') as ((l: string) => void) | undefined;
+      onLine?.('a log line');
+    });
+    const { result } = renderHook(() =>
+      usePreview({ workspace: 'ws', accessToken: 'token', getCurrentConfig: () => CONFIG })
+    );
+
+    await act(async () => {
+      await result.current.runPreview();
+    });
+
+    expect(streamPreviewMock).toHaveBeenCalled();
+    expect(result.current.previewLogs).toContain('a log line');
+    expect(result.current.isPreviewing).toBe(false);
+  });
+});
diff --git a/web/packages/studio/src/components/NewDataDesignerJobForm/usePreview.ts b/web/packages/studio/src/components/NewDataDesignerJobForm/usePreview.ts
index d61a4acc87..e69f6d84e2 100644
--- a/web/packages/studio/src/components/NewDataDesignerJobForm/usePreview.ts
+++ b/web/packages/studio/src/components/NewDataDesignerJobForm/usePreview.ts
@@ -42,7 +42,13 @@ export function usePreview({
   }, []);
 
   const runPreview = useCallback(async () => {
-    const config = getCurrentConfig();
+    let config: DataDesignerConfig | undefined;
+    try {
+      config = getCurrentConfig();
+    } catch (err) {
+      setPreviewLogs(getErrorMessage(err, 'Could not build a preview config from the recipe.'));
+      return;
+    }
     if (!config) {
       setPreviewLogs('Generate a job spec first, then run Preview.');
       return;
diff --git a/web/packages/studio/src/routes/DataDesignerJobBuildRoute/BuilderCanvas.tsx b/web/packages/studio/src/routes/DataDesignerJobBuildRoute/BuilderCanvas.tsx
new file mode 100644
index 0000000000..0694ff1b29
--- /dev/null
+++ b/web/packages/studio/src/routes/DataDesignerJobBuildRoute/BuilderCanvas.tsx
@@ -0,0 +1,46 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Flex, Text } from '@nvidia/foundations-react-core';
+import { DagCanvas } from '@studio/components/DagCanvas';
+import { buildGraph } from '@studio/routes/DataDesignerJobBuildRoute/columns';
+import type { JobBuilderFormValues } from '@studio/routes/DataDesignerJobBuildRoute/useJobBuilder';
+import { type FC, useMemo } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+
+export interface BuilderCanvasProps {
+  focusNodeId: string | null;
+  onNodeClick: (id: string | null) => void;
+  onNodeDelete: (id: string) => void;
+}
+
+/** The graph is the sole subscriber for prompt/reference edits in canvas view. */
+export const BuilderCanvas: FC<BuilderCanvasProps> = ({
+  focusNodeId,
+  onNodeClick,
+  onNodeDelete,
+}) => {
+  const { control } = useFormContext<JobBuilderFormValues>();
+  const columnRecord = useWatch({ control, name: 'columns' });
+  const { nodes, edges } = useMemo(() => buildGraph(columnRecord), [columnRecord]);
+
+  if (nodes.length === 0) {
+    return (
+      <Flex align="center" justify="center" className="h-full">
+        <Text kind="body/regular/md" className="text-secondary">
+          Empty canvas — add a column from the left to get started.
+        </Text>
+      </Flex>
+    );
+  }
+
+  return (
+    <DagCanvas
+      nodes={nodes}
+      edges={edges}
+      onNodeClick={onNodeClick}
+      onNodeDelete={onNodeDelete}
+      focusNodeId={focusNodeId}
+    />
+  );
+};
diff --git a/web/packages/studio/src/routes/DataDesignerJobBuildRoute/BuilderConfigPane.tsx b/web/packages/studio/src/routes/DataDesignerJobBuildRoute/BuilderConfigPane.tsx
index 6c2a101797..4cb9911460 100644
--- a/web/packages/studio/src/routes/DataDesignerJobBuildRoute/BuilderConfigPane.tsx
+++ b/web/packages/studio/src/routes/DataDesignerJobBuildRoute/BuilderConfigPane.tsx
@@ -5,58 +5,41 @@ import type { ModelWorkspaceGroup } from '@nemo/common/src/api/models/useModels'
 import { Flex, Text } from '@nvidia/foundations-react-core';
 import { ColumnConfigPanel } from '@studio/components/ColumnConfigPanel';
 import { ModelConfigPanel } from '@studio/components/ModelConfigPanel';
-import type { BuilderColumn } from '@studio/routes/DataDesignerJobBuildRoute/columns';
-import type {
-  BuilderModel,
-  BuilderModelPatch,
-} from '@studio/routes/DataDesignerJobBuildRoute/models';
 import type { FC } from 'react';
 
 export interface BuilderConfigPaneProps {
-  selectedColumn: BuilderColumn | null;
-  selectedModel: BuilderModel | null;
-  takenNames: Set<string>;
-  takenAliases: Set<string>;
+  selectedColumnId: string | null;
+  selectedModelId: string | null;
   modelGroups: ModelWorkspaceGroup[];
   isLoadingModels: boolean;
-  onColumnChange: (patch: { name?: string; values?: Record<string, string> }) => void;
   onColumnRemove: () => void;
   onColumnClose: () => void;
-  onModelChange: (patch: BuilderModelPatch) => void;
   onModelRemove: () => void;
   onModelClose: () => void;
 }
 
 export const BuilderConfigPane: FC<BuilderConfigPaneProps> = ({
-  selectedColumn,
-  selectedModel,
-  takenNames,
-  takenAliases,
+  selectedColumnId,
+  selectedModelId,
   modelGroups,
   isLoadingModels,
-  onColumnChange,
   onColumnRemove,
   onColumnClose,
-  onModelChange,
   onModelRemove,
   onModelClose,
 }) => (
   <div className="w-[240px] shrink-0 border-l border-base bg-surface-base">
-    {selectedColumn ? (
+    {selectedColumnId ? (
       <ColumnConfigPanel
-        column={selectedColumn}
-        takenNames={takenNames}
-        onChange={onColumnChange}
+        columnId={selectedColumnId}
         onRemove={onColumnRemove}
         onClose={onColumnClose}
       />
-    ) : selectedModel ? (
+    ) : selectedModelId ? (
       <ModelConfigPanel
-        model={selectedModel}
-        takenAliases={takenAliases}
+        modelId={selectedModelId}
         modelGroups={modelGroups}
         isLoadingModels={isLoadingModels}
-        onChange={onModelChange}
         onRemove={onModelRemove}
         onClose={onModelClose}
       />
diff --git a/web/packages/studio/src/routes/DataDesignerJobBuildRoute/BuilderPalette.tsx b/web/packages/studio/src/routes/DataDesignerJobBuildRoute/BuilderPalette.tsx
index f286700063..d749515416 100644
--- a/web/packages/studio/src/routes/DataDesignerJobBuildRoute/BuilderPalette.tsx
+++ b/web/packages/studio/src/routes/DataDesignerJobBuildRoute/BuilderPalette.tsx
@@ -7,19 +7,20 @@ import { SegmentedControl } from '@nvidia/foundations-react-core';
 import { AddColumnPalette } from '@studio/components/AddColumnPalette';
 import type { AddColumnSelection } from '@studio/components/AddColumnPalette/types';
 import { AddModelPalette } from '@studio/components/AddModelPalette';
-import type { BuilderModel } from '@studio/routes/DataDesignerJobBuildRoute/models';
-import type { PaletteTab } from '@studio/routes/DataDesignerJobBuildRoute/useJobBuilder';
+import type {
+  JobBuilderFormValues,
+  PaletteTab,
+} from '@studio/routes/DataDesignerJobBuildRoute/useJobBuilder';
 import type { FC } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
 
 export interface BuilderPaletteProps {
   tab: PaletteTab;
   onTabChange: (tab: PaletteTab) => void;
-  models: BuilderModel[];
   selectedModelId: string | null;
   modelGroups: ModelWorkspaceGroup[];
   isLoadingModels?: boolean;
   onAddColumn: (selection: AddColumnSelection) => void;
-  disabledColumnReasons?: Partial<Record<string, string>>;
   onAddModel: (selection: ModelSelection, provider: string) => void;
   onSelectModel: (id: string | null) => void;
 }
@@ -28,39 +29,48 @@ export interface BuilderPaletteProps {
 export const BuilderPalette: FC<BuilderPaletteProps> = ({
   tab,
   onTabChange,
-  models,
   selectedModelId,
   modelGroups,
   isLoadingModels,
   onAddColumn,
-  disabledColumnReasons,
   onAddModel,
   onSelectModel,
-}) => (
-  <aside className="flex w-[240px] shrink-0 flex-col gap-density-lg border-r border-base p-density-lg">
-    <SegmentedControl
-      size="tiny"
-      className="w-full shrink-0"
-      value={tab}
-      onValueChange={(value) => onTabChange(value as PaletteTab)}
-      items={[
-        { value: 'columns', children: 'Columns' },
-        { value: 'models', children: 'Models' },
-      ]}
-    />
-    <div className="min-h-0 flex-1">
-      {tab === 'columns' ? (
-        <AddColumnPalette onAddColumn={onAddColumn} disabledReasons={disabledColumnReasons} />
-      ) : (
-        <AddModelPalette
-          models={models}
-          selectedId={selectedModelId}
-          modelGroups={modelGroups}
-          isLoadingModels={isLoadingModels}
-          onAddModel={onAddModel}
-          onSelectModel={onSelectModel}
-        />
-      )}
-    </div>
-  </aside>
-);
+}) => {
+  const { control, getValues } = useFormContext<JobBuilderFormValues>();
+  const models = useWatch({ control, name: 'models' });
+  const hasSeedColumn = getValues('columns').some(
+    (column) => column.option.columnType === 'seed-dataset'
+  );
+  const disabledColumnReasons = hasSeedColumn
+    ? { 'seed-dataset': 'Only one seed dataset is supported per recipe.' }
+    : undefined;
+
+  return (
+    <aside className="flex w-[240px] shrink-0 flex-col gap-density-lg border-r border-base p-density-lg">
+      <SegmentedControl
+        size="tiny"
+        className="w-full shrink-0"
+        value={tab}
+        onValueChange={(value) => onTabChange(value as PaletteTab)}
+        items={[
+          { value: 'columns', children: 'Columns' },
+          { value: 'models', children: 'Models' },
+        ]}
+      />
+      <div className="min-h-0 flex-1">
+        {tab === 'columns' ? (
+          <AddColumnPalette onAddColumn={onAddColumn} disabledReasons={disabledColumnReasons} />
+        ) : (
+          <AddModelPalette
+            models={models}
+            selectedId={selectedModelId}
+            modelGroups={modelGroups}
+            isLoadingModels={isLoadingModels}
+            onAddModel={onAddModel}
+            onSelectModel={onSelectModel}
+          />
+        )}
+      </div>
+    </aside>
+  );
+};
diff --git a/web/packages/studio/src/routes/DataDesignerJobBuildRoute/BuilderToolbar.tsx b/web/packages/studio/src/routes/DataDesignerJobBuildRoute/BuilderToolbar.tsx
index b6e17695e0..20c1b34f57 100644
--- a/web/packages/studio/src/routes/DataDesignerJobBuildRoute/BuilderToolbar.tsx
+++ b/web/packages/studio/src/routes/DataDesignerJobBuildRoute/BuilderToolbar.tsx
@@ -1,23 +1,19 @@
 // SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import { ControlledTextInput } from '@nemo/common/src/components/form/ControlledTextInput';
 import { LoadingButton } from '@nemo/common/src/components/LoadingButton';
-import { Button, Flex, Tag, Text, TextInput } from '@nvidia/foundations-react-core';
+import { Button, Flex, Tag, Text } from '@nvidia/foundations-react-core';
 import type { StartOptionTag } from '@studio/components/CreateFilesetStart/types';
+import type { JobBuilderFormValues } from '@studio/routes/DataDesignerJobBuildRoute/useJobBuilder';
 import { FileJson, Pencil } from 'lucide-react';
 import { type FC, useState } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
 
 export interface BuilderToolbarProps {
-  /** The fileset name; shown read-only until the pencil icon is clicked. */
-  name: string;
-  onNameChange: (name: string) => void;
-  /** Number of columns currently on the canvas. */
-  columnCount: number;
   /** The template's badge (recipe use case), shown when building from a template. */
   templateTag?: StartOptionTag;
-  /** Full-run record count, as a raw digit string (no thousands separators). */
-  rows: string;
-  onRowsChange: (rows: string) => void;
+  columnCount: number;
   onPreview: () => void;
   isPreviewing: boolean;
   onSubmit: () => void;
@@ -25,18 +21,17 @@ export interface BuilderToolbarProps {
 }
 
 export const BuilderToolbar: FC<BuilderToolbarProps> = ({
-  name,
-  onNameChange,
-  columnCount,
   templateTag,
-  rows,
-  onRowsChange,
+  columnCount,
   onPreview,
   isPreviewing,
   onSubmit,
   isSubmitting,
 }) => {
   const [isEditingName, setIsEditingName] = useState(false);
+  const { control } = useFormContext<JobBuilderFormValues>();
+  const name = useWatch({ control, name: 'name' }) ?? '';
+  const rows = useWatch({ control, name: 'rows' }) ?? '';
   const previewRows = Number(rows) > 0 ? Math.min(Number(rows), 10) : 10;
 
   return (
@@ -49,12 +44,12 @@ export const BuilderToolbar: FC<BuilderToolbarProps> = ({
       <Flex align="center" gap="density-sm" className="min-w-0">
         <FileJson size={20} className="shrink-0 text-secondary" aria-hidden />
         {isEditingName ? (
-          <TextInput
+          <ControlledTextInput
             autoFocus
-            value={name}
-            onValueChange={onNameChange}
+            useControllerProps={{ name: 'name' }}
             onBlur={() => setIsEditingName(false)}
-            attributes={{ Input: { 'aria-label': 'Fileset name', className: 'w-[220px]' } }}
+            formFieldProps={{ className: 'w-[220px]' }}
+            attributes={{ Input: { 'aria-label': 'Fileset name' } }}
           />
         ) : (
           <Text kind="label/bold/md" className="whitespace-nowrap">
@@ -88,13 +83,17 @@ export const BuilderToolbar: FC<BuilderToolbarProps> = ({
           <Text kind="body/regular/sm" className="text-secondary whitespace-nowrap">
             Rows
           </Text>
-          <TextInput
-            type="number"
-            min={1}
-            step={1}
-            value={rows}
-            onValueChange={onRowsChange}
-            attributes={{ Input: { 'aria-label': 'Records to generate', className: 'w-[96px]' } }}
+          <ControlledTextInput
+            useControllerProps={{ name: 'rows' }}
+            formFieldProps={{ className: 'w-[96px]' }}
+            attributes={{
+              Input: {
+                'aria-label': 'Records to generate',
+                min: 1,
+                step: 1,
+                type: 'number',
+              },
+            }}
           />
         </Flex>
         <LoadingButton
diff --git a/web/packages/studio/src/routes/DataDesignerJobBuildRoute/index.tsx b/web/packages/studio/src/routes/DataDesignerJobBuildRoute/index.tsx
index d7bab26749..f1d7a76bfa 100644
--- a/web/packages/studio/src/routes/DataDesignerJobBuildRoute/index.tsx
+++ b/web/packages/studio/src/routes/DataDesignerJobBuildRoute/index.tsx
@@ -6,14 +6,14 @@ import { DEFAULT_LARGE_PAGE_SIZE } from '@nemo/common/src/constants/api';
 import { groupModelsByWorkspace } from '@nemo/common/src/utils/models';
 import { useDataDesignerCreateJob } from '@nemo/sdk/generated/data-designer/api';
 import { useModelsListProviders } from '@nemo/sdk/generated/platform/api';
-import { Flex, Stack, Text } from '@nvidia/foundations-react-core';
+import { Flex, Stack } from '@nvidia/foundations-react-core';
 import { getErrorMessage } from '@studio/api/common/utils';
 import { AccessibleTitle } from '@studio/components/AccessibleTitle';
 import { findTemplate } from '@studio/components/CreateFilesetStart/templates';
-import { DagCanvas } from '@studio/components/DagCanvas';
 import { usePreview } from '@studio/components/NewDataDesignerJobForm/usePreview';
 import { useWorkspaceFromPath } from '@studio/hooks/useWorkspaceFromPath';
 import { useBreadcrumbs } from '@studio/providers/breadcrumbs/useBreadcrumbs';
+import { BuilderCanvas } from '@studio/routes/DataDesignerJobBuildRoute/BuilderCanvas';
 import { BuilderConfigPane } from '@studio/routes/DataDesignerJobBuildRoute/BuilderConfigPane';
 import { BuilderDetailsPanel } from '@studio/routes/DataDesignerJobBuildRoute/BuilderDetailsPanel';
 import { BuilderPalette } from '@studio/routes/DataDesignerJobBuildRoute/BuilderPalette';
@@ -33,6 +33,7 @@ import {
   getNewDataDesignerJobRoute,
 } from '@studio/routes/utils';
 import { type FC, useCallback, useMemo, useState } from 'react';
+import { FormProvider } from 'react-hook-form';
 import { useAuth } from 'react-oidc-context';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
@@ -88,16 +89,11 @@ export const DataDesignerJobBuildRoute: FC = () => {
     [providersPage?.data]
   );
 
-  const { columns, models } = builder;
-
-  const [name, setName] = useState(() => template?.id ?? 'untitled-dataset');
-  const [rows, setRows] = useState('100');
   const [validationErrors, setValidationErrors] = useState<string[]>([]);
-  // Whether the errors/preview panel below the toolbar is expanded. Runs that produce
-  // output re-open it; the user can collapse it again to focus on the canvas.
   const [isDetailsOpen, setIsDetailsOpen] = useState(false);
 
   const validateAndCollectErrors = useCallback(() => {
+    const { columns, models, name, rows } = builder.getBuilderValues();
     const numRecords = Number(rows);
     const errors = [...validateColumns(columns), ...validateModels(models)];
     if (!name.trim()) {
@@ -109,15 +105,14 @@ export const DataDesignerJobBuildRoute: FC = () => {
     setValidationErrors(errors);
     setIsDetailsOpen(true);
     return errors;
-  }, [columns, models, rows, name]);
-
-  const getCurrentConfig = useCallback(
-    () =>
-      validateColumns(columns).length === 0 && validateModels(models).length === 0
-        ? buildDataDesignerConfig(columns, models, servedModelNames)
-        : undefined,
-    [columns, models, servedModelNames]
-  );
+  }, [builder]);
+
+  const getCurrentConfig = useCallback(() => {
+    const { columns, models } = builder.getBuilderValues();
+    return validateColumns(columns).length === 0 && validateModels(models).length === 0
+      ? buildDataDesignerConfig(columns, models, servedModelNames)
+      : undefined;
+  }, [builder, servedModelNames]);
   const { previewLogs, isPreviewing, runPreview } = usePreview({
     workspace,
     accessToken: user?.access_token ?? undefined,
@@ -135,6 +130,7 @@ export const DataDesignerJobBuildRoute: FC = () => {
 
   const handleSubmit = async () => {
     if (validateAndCollectErrors().length > 0) return;
+    const { columns, models, name, rows } = builder.getBuilderValues();
 
     try {
       const created = await createJob.mutateAsync({
@@ -160,84 +156,62 @@ export const DataDesignerJobBuildRoute: FC = () => {
 
   return (
     <AccessibleTitle title={heading}>
-      <Stack className=" h-full">
-        <BuilderToolbar
-          name={name}
-          onNameChange={setName}
-          columnCount={columns.length}
-          templateTag={template?.tag}
-          rows={rows}
-          onRowsChange={setRows}
-          onPreview={handlePreview}
-          isPreviewing={isPreviewing}
-          onSubmit={handleSubmit}
-          isSubmitting={createJob.isPending}
-        />
-
-        <BuilderDetailsPanel
-          validationErrors={validationErrors}
-          submitError={submitError}
-          previewLogs={previewLogs}
-          isOpen={isDetailsOpen}
-          onToggle={() => setIsDetailsOpen((open) => !open)}
-        />
-
-        <Flex className="min-h-0 border-t border-base h-full">
-          <BuilderPalette
-            tab={builder.paletteTab}
-            onTabChange={builder.setPaletteTab}
-            models={models}
-            selectedModelId={builder.selectedModelId}
-            modelGroups={modelGroups}
-            isLoadingModels={isLoadingModels}
-            onAddColumn={builder.handleAddColumn}
-            disabledColumnReasons={builder.disabledColumnReasons}
-            onAddModel={builder.handleAddModel}
-            onSelectModel={builder.selectModel}
+      <FormProvider {...builder.form}>
+        <Stack className=" h-full">
+          <BuilderToolbar
+            templateTag={template?.tag}
+            columnCount={builder.columnCount}
+            onPreview={handlePreview}
+            isPreviewing={isPreviewing}
+            onSubmit={handleSubmit}
+            isSubmitting={createJob.isPending}
           />
 
-          <div className="relative min-w-0 flex-1">
-            {columns.length === 0 ? (
-              <Flex align="center" justify="center" className="h-full">
-                <Text kind="body/regular/md" className="text-secondary">
-                  Empty canvas — add a column from the left to get started.
-                </Text>
-              </Flex>
-            ) : (
-              <DagCanvas
-                nodes={builder.nodes}
-                edges={builder.edges}
+          <BuilderDetailsPanel
+            validationErrors={validationErrors}
+            submitError={submitError}
+            previewLogs={previewLogs}
+            isOpen={isDetailsOpen}
+            onToggle={() => setIsDetailsOpen((open) => !open)}
+          />
+
+          <Flex className="min-h-0 border-t border-base h-full">
+            <BuilderPalette
+              tab={builder.paletteTab}
+              onTabChange={builder.setPaletteTab}
+              selectedModelId={builder.selectedModelId}
+              modelGroups={modelGroups}
+              isLoadingModels={isLoadingModels}
+              onAddColumn={builder.handleAddColumn}
+              onAddModel={builder.handleAddModel}
+              onSelectModel={builder.selectModel}
+            />
+
+            <div className="relative min-w-0 flex-1">
+              <BuilderCanvas
+                focusNodeId={builder.focusId}
                 onNodeClick={builder.selectColumn}
                 onNodeDelete={builder.removeColumn}
-                focusNodeId={builder.focusId}
               />
-            )}
-          </div>
-
-          <BuilderConfigPane
-            selectedColumn={builder.selectedColumn}
-            selectedModel={builder.selectedModel}
-            takenNames={builder.takenNames}
-            takenAliases={builder.takenAliases}
-            modelGroups={modelGroups}
-            isLoadingModels={isLoadingModels}
-            onColumnChange={(patch) =>
-              builder.selectedColumn && builder.patchColumn(builder.selectedColumn.id, patch)
-            }
-            onColumnRemove={() =>
-              builder.selectedColumn && builder.removeColumn(builder.selectedColumn.id)
-            }
-            onColumnClose={() => builder.selectColumn(null)}
-            onModelChange={(patch) =>
-              builder.selectedModel && builder.patchModel(builder.selectedModel.id, patch)
-            }
-            onModelRemove={() =>
-              builder.selectedModel && builder.removeModel(builder.selectedModel.id)
-            }
-            onModelClose={() => builder.selectModel(null)}
-          />
-        </Flex>
-      </Stack>
+            </div>
+
+            <BuilderConfigPane
+              selectedColumnId={builder.selectedColumnId}
+              selectedModelId={builder.selectedModelId}
+              modelGroups={modelGroups}
+              isLoadingModels={isLoadingModels}
+              onColumnRemove={() =>
+                builder.selectedColumnId && builder.removeColumn(builder.selectedColumnId)
+              }
+              onColumnClose={() => builder.selectColumn(null)}
+              onModelRemove={() =>
+                builder.selectedModelId && builder.removeModel(builder.selectedModelId)
+              }
+              onModelClose={() => builder.selectModel(null)}
+            />
+          </Flex>
+        </Stack>
+      </FormProvider>
     </AccessibleTitle>
   );
 };
diff --git a/web/packages/studio/src/routes/DataDesignerJobBuildRoute/useJobBuilder.ts b/web/packages/studio/src/routes/DataDesignerJobBuildRoute/useJobBuilder.ts
index 6fbead5d73..345f2b838b 100644
--- a/web/packages/studio/src/routes/DataDesignerJobBuildRoute/useJobBuilder.ts
+++ b/web/packages/studio/src/routes/DataDesignerJobBuildRoute/useJobBuilder.ts
@@ -8,22 +8,36 @@ import type { FilesetTemplate } from '@studio/components/CreateFilesetStart/type
 import {
   type BuilderColumn,
   buildColumnsFromTemplate,
-  buildGraph,
   defaultColumnName,
   findColumnOption,
 } from '@studio/routes/DataDesignerJobBuildRoute/columns';
 import {
   type BuilderModel,
-  type BuilderModelPatch,
   buildModelsFromTemplate,
   builderModelFromSelection,
   resolveTemplateModel,
 } from '@studio/routes/DataDesignerJobBuildRoute/models';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { type UseFormReturn, useFieldArray, useForm } from 'react-hook-form';
 
 /** Which palette the left aside shows. */
 export type PaletteTab = 'columns' | 'models';
 
+/** All mutable values in the build route, owned by React Hook Form. */
+export interface JobBuilderFormValues {
+  name: string;
+  rows: string;
+  columns: BuilderColumn[];
+  models: BuilderModel[];
+}
+
+export interface JobBuilderValues {
+  columns: BuilderColumn[];
+  models: BuilderModel[];
+  name: string;
+  rows: string;
+}
+
 /**
  * Column/model state for the recipe builder. Selecting a column and selecting a model are
  * mutually exclusive — only one config panel shows at a time.
@@ -39,143 +53,145 @@ export const useJobBuilder = (
   modelGroups: ModelWorkspaceGroup[],
   modelsSettled: boolean
 ) => {
-  // Seed once from the template (if any). `useState` initializer runs a single time, so
-  // navigating with a template preloads its columns without re-seeding on every render.
-  const [columns, setColumns] = useState<BuilderColumn[]>(() =>
-    template ? buildColumnsFromTemplate(template.columns) : []
-  );
+  // Seed once from the template (if any). `useForm` keeps these values outside the route's
+  // render cycle, so a field edit notifies only components that subscribe to that field.
+  const initialColumns = useRef(template ? buildColumnsFromTemplate(template.columns) : []);
+  const initialModels = useRef(buildModelsFromTemplate(template?.models));
+  const form = useForm<JobBuilderFormValues>({
+    defaultValues: {
+      name: template?.id ?? 'untitled-dataset',
+      rows: '100',
+      columns: initialColumns.current,
+      models: initialModels.current,
+    },
+  });
+  const { getValues, setValue } = form;
+  const {
+    fields: columnFields,
+    append: appendColumn,
+    remove: removeColumnField,
+  } = useFieldArray({
+    control: form.control,
+    name: 'columns',
+    keyName: 'fieldId',
+  });
+
   const [selectedId, setSelectedId] = useState<string | null>(null);
   // Set only when a column is added, so the canvas centers new nodes but not clicked ones.
   const [focusId, setFocusId] = useState<string | null>(null);
   // Continue numbering after any preloaded template columns so ids stay unique.
-  const nextId = useRef(columns.length);
+  const nextId = useRef(initialColumns.current.length);
 
   // The models referenced by LLM columns via `model_alias`; part of the same job config.
   // Seeded once from the template (if any); providers/models are auto-filled below.
-  const [models, setModels] = useState<BuilderModel[]>(() =>
-    buildModelsFromTemplate(template?.models)
-  );
   const [selectedModelId, setSelectedModelId] = useState<string | null>(null);
-  const nextModelId = useRef(models.length);
+  const nextModelId = useRef(initialModels.current.length);
   const [paletteTab, setPaletteTab] = useState<PaletteTab>('columns');
 
   const autoFilled = useRef(false);
   useEffect(() => {
     if (autoFilled.current || !modelsSettled || modelGroups.length === 0) return;
     autoFilled.current = true;
-    setModels((prev) => {
-      let changed = false;
-      const next = prev.map((model) => {
-        if (model.provider) return model;
-        const resolved = resolveTemplateModel(modelGroups, model.model || undefined);
-        changed = true;
-        return resolved ? { ...model, ...resolved } : { ...model, model: '' };
-      });
-      return changed ? next : prev;
+    const models = getValues('models');
+    const nextModels = models.map((model) => {
+      if (model.provider) return model;
+      const resolved = resolveTemplateModel(modelGroups, model.model || undefined);
+      return resolved ? { ...model, ...resolved } : { ...model, model: '' };
     });
-  }, [modelGroups, modelsSettled]);
-
-  const selectedColumn = columns.find((column) => column.id === selectedId) ?? null;
-  const selectedModel = models.find((model) => model.id === selectedModelId) ?? null;
-
-  // Model aliases used by models other than the selected one (uniqueness check).
-  const takenAliases = useMemo(
-    () =>
-      new Set(
-        models.filter((model) => model.id !== selectedModelId).map((model) => model.alias.trim())
-      ),
-    [models, selectedModelId]
-  );
-
-  // Names taken by columns other than the selected one (uniqueness check).
-  const takenNames = useMemo(
-    () =>
-      new Set(columns.filter((column) => column.id !== selectedId).map((column) => column.name)),
-    [columns, selectedId]
-  );
+    setValue('models', nextModels);
+  }, [getValues, modelGroups, modelsSettled, setValue]);
 
-  const { nodes, edges } = useMemo(() => buildGraph(columns), [columns]);
-
-  const selectColumn = (id: string | null) => {
+  const selectColumn = useCallback((id: string | null) => {
     setSelectedId(id);
     if (id !== null) setSelectedModelId(null);
-  };
-  const selectModel = (id: string | null) => {
+  }, []);
+  const selectModel = useCallback((id: string | null) => {
     setSelectedModelId(id);
     if (id !== null) setSelectedId(null);
-  };
-
-  const hasSeedColumn = columns.some((column) => column.option.columnType === 'seed-dataset');
-  const disabledColumnReasons = hasSeedColumn
-    ? { 'seed-dataset': 'Only one seed dataset is supported per recipe.' }
-    : undefined;
-
-  const handleAddColumn = (selection: AddColumnSelection) => {
-    if (selection.columnType === 'seed-dataset' && hasSeedColumn) return;
-    const option = findColumnOption(selection);
-    if (!option) return;
-    const id = `col-${nextId.current++}`;
-    setColumns((prev) => {
-      const name = defaultColumnName(option, new Set(prev.map((column) => column.name)));
-      return [...prev, { id, option, name, values: {} }];
-    });
-    selectColumn(id);
-    setFocusId(id);
-  };
-
-  const patchColumn = (id: string, patch: { name?: string; values?: Record<string, string> }) =>
-    setColumns((prev) =>
-      prev.map((column) => (column.id === id ? { ...column, ...patch } : column))
-    );
+  }, []);
+
+  const handleAddColumn = useCallback(
+    (selection: AddColumnSelection) => {
+      const columns = getValues('columns');
+      if (
+        selection.columnType === 'seed-dataset' &&
+        columns.some((column) => column.option.columnType === 'seed-dataset')
+      ) {
+        return;
+      }
+      const option = findColumnOption(selection);
+      if (!option) return;
+      const id = `col-${nextId.current++}`;
+      const name = defaultColumnName(option, new Set(columns.map((column) => column.name)));
+      appendColumn({ id, option, name, values: {} });
+      selectColumn(id);
+      setFocusId(id);
+    },
+    [appendColumn, getValues, selectColumn]
+  );
 
-  const removeColumn = (id: string) => {
-    setColumns((prev) => prev.filter((column) => column.id !== id));
-    setSelectedId((current) => (current === id ? null : current));
-  };
+  const removeColumn = useCallback(
+    (id: string) => {
+      const index = getValues('columns').findIndex((column) => column.id === id);
+      if (index >= 0) removeColumnField(index);
+      setSelectedId((current) => (current === id ? null : current));
+    },
+    [getValues, removeColumnField]
+  );
 
-  const handleAddModel = (selection: ModelSelection, provider: string) => {
-    const id = `model-${nextModelId.current++}`;
-    setModels((prev) => [
-      ...prev,
-      builderModelFromSelection(
-        id,
-        selection,
-        provider,
-        new Set(prev.map((model) => model.alias.trim()))
-      ),
-    ]);
-    selectModel(id);
-  };
+  const handleAddModel = useCallback(
+    (selection: ModelSelection, provider: string) => {
+      const id = `model-${nextModelId.current++}`;
+      const models = getValues('models');
+      setValue('models', [
+        ...models,
+        builderModelFromSelection(
+          id,
+          selection,
+          provider,
+          new Set(models.map((model) => model.alias.trim()))
+        ),
+      ]);
+      selectModel(id);
+    },
+    [getValues, selectModel, setValue]
+  );
 
-  const patchModel = (id: string, patch: BuilderModelPatch) =>
-    setModels((prev) => prev.map((model) => (model.id === id ? { ...model, ...patch } : model)));
+  const removeModel = useCallback(
+    (id: string) => {
+      setValue(
+        'models',
+        getValues('models').filter((model) => model.id !== id)
+      );
+      setSelectedModelId((current) => (current === id ? null : current));
+    },
+    [getValues, setValue]
+  );
 
-  const removeModel = (id: string) => {
-    setModels((prev) => prev.filter((model) => model.id !== id));
-    setSelectedModelId((current) => (current === id ? null : current));
-  };
+  const getBuilderValues = useCallback((): JobBuilderValues => {
+    const values = getValues();
+    return {
+      name: values.name,
+      rows: values.rows,
+      columns: values.columns,
+      models: values.models,
+    };
+  }, [getValues]);
 
   return {
-    columns,
-    models,
-    selectedColumn,
-    selectedModel,
+    form: form as UseFormReturn<JobBuilderFormValues>,
+    getBuilderValues,
+    columnCount: columnFields.length,
+    selectedColumnId: selectedId,
     selectedModelId,
     focusId,
     paletteTab,
     setPaletteTab,
-    nodes,
-    edges,
-    takenNames,
-    takenAliases,
-    disabledColumnReasons,
     selectColumn,
     selectModel,
     handleAddColumn,
-    patchColumn,
     removeColumn,
     handleAddModel,
-    patchModel,
     removeModel,
   };
 };