diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte
index 2dc5672d25d0c..93771508026b2 100644
--- a/frontend/src/lib/components/InputTransformForm.svelte
+++ b/frontend/src/lib/components/InputTransformForm.svelte
@@ -41,6 +41,7 @@
 	import S3ArrayHelperButton from './S3ArrayHelperButton.svelte'
 	import { inputBorderClass } from './text_input/TextInput.svelte'
 	import FakeMonacoPlaceHolder from './FakeMonacoPlaceHolder.svelte'
+	import SchemaFormTransform from './SchemaFormTransform.svelte'
 
 	// We add 'ai' for ai agent tools. 'ai' means the field will be filled by the AI agent dynamically.
 	type PropertyType = InputTransform['type'] | 'ai'
@@ -160,6 +161,52 @@
 		})
 	}
 
+	// Try to parse JavaScript expression back to static object/array for visual editing
+	function tryParseJsToStatic(expr: string, schemaType: string): any | null {
+		if (!expr || typeof expr !== 'string') return null
+
+		try {
+			// Remove wrapping parentheses if present
+			let code = expr.trim()
+			if (code.startsWith('(') && code.endsWith(')')) {
+				code = code.slice(1, -1).trim()
+			}
+
+			// Try to parse as object literal or array
+			// This is a simple heuristic - check if it looks like a static structure
+			if (schemaType === 'object' && code.startsWith('{') && code.endsWith('}')) {
+				// Try to evaluate it safely
+				// For now, use a simple regex-based approach to extract static-looking values
+				// If the object contains only simple expressions, convert it
+				const hasComplexLogic = /\bif\b|\bfor\b|\bwhile\b|\bfunction\b|\breturn\b/.test(code)
+				if (!hasComplexLogic) {
+					// Attempt to parse it
+					try {
+						const parsed = new Function(`return ${code}`)()
+						return parsed
+					} catch {
+						return null
+					}
+				}
+			} else if (schemaType === 'array' && code.startsWith('[') && code.endsWith(']')) {
+				// Similar for arrays
+				const hasComplexLogic = /\bif\b|\bfor\b|\bwhile\b|\bfunction\b|\breturn\b/.test(code)
+				if (!hasComplexLogic) {
+					try {
+						const parsed = new Function(`return ${code}`)()
+						return parsed
+					} catch {
+						return null
+					}
+				}
+			}
+		} catch (e) {
+			return null
+		}
+
+		return null
+	}
+
 	function getPropertyType(arg: InputTransform | any): PropertyType {
 		// For agent tools, if static with undefined/empty value, treat as 'ai', meaning the field will be filled by the AI agent dynamically.
 		if (
@@ -186,6 +233,16 @@
 			}
 		}
 
+		// Try to parse javascript expressions for objects/arrays back to static for visual editing
+		if (type == 'javascript' && (inputCat === 'object' || inputCat === 'list')) {
+			const parsed = tryParseJsToStatic(arg.expr, inputCat === 'object' ? 'object' : 'array')
+			if (parsed !== null) {
+				type = 'static'
+				arg.value = parsed
+				// Keep the expr for reference but switch to static mode for UI
+			}
+		}
+
 		return type
 	}
 
@@ -763,62 +820,278 @@
 								{/if}
 							</div>
 						{:else if (propertyType === undefined || propertyType == 'static') && schema?.properties?.[argName]}
-							<ArgInput
-								{resourceTypes}
-								noMargin
-								compact
-								on:focus={onFocus}
-								on:blur={() => {
-									focused = false
-								}}
-								shouldDispatchChanges
-								on:change={() => {
-									dispatch('change', { argName, arg })
-								}}
-								label={argName}
-								bind:editor={monaco}
-								bind:description={schema.properties[argName].description}
-								bind:value={arg.value}
-								type={schema.properties[argName].type}
-								oneOf={schema.properties[argName].oneOf}
-								required={schema.required?.includes(argName)}
-								bind:pattern={schema.properties[argName].pattern}
-								bind:valid={inputCheck}
-								defaultValue={schema.properties[argName].default}
-								bind:enum_={schema.properties[argName].enum}
-								bind:format={schema.properties[argName].format}
-								contentEncoding={schema.properties[argName].contentEncoding}
-								bind:itemsType={schema.properties[argName].items}
-								properties={schema.properties[argName].properties}
-								nestedRequired={schema.properties[argName].required}
-								displayHeader={false}
-								extra={argExtra}
-								{variableEditor}
-								{itemPicker}
-								bind:pickForField
-								showSchemaExplorer
-								nullable={schema.properties[argName].nullable}
-								bind:title={schema.properties[argName].title}
-								bind:placeholder={schema.properties[argName].placeholder}
-								{helperScript}
-								{s3StorageConfigured}
-								otherArgs={Object.fromEntries(
-									Object.entries(otherArgs).map(([key, transform]) => [
-										key,
-										transform?.type === 'static' ? transform.value : transform?.expr
-									])
-								)}
-							>
-								{#snippet innerBottomSnippet()}
-									{#if shouldShowS3ArrayHelper}
-										<S3ArrayHelperButton
-											{connecting}
-											onClick={() =>
-												switchToJsAndConnect((path) => appendPathToArrayExpr(arg.expr, path))}
-										/>
-									{/if}
-								{/snippet}
-							</ArgInput>
+							{@const schemaProperty = schema.properties[argName]}
+							{@const isObjectWithProperties =
+								(schemaProperty.type === 'object' && schemaProperty.properties) ||
+								(schemaProperty.type === 'array' &&
+									schemaProperty.items?.type === 'object' &&
+									schemaProperty.items?.properties)}
+
+							{#if isObjectWithProperties}
+								<!-- Use recursive InputTransformForm for nested objects/arrays with properties -->
+								{#if schemaProperty.type === 'object' && schemaProperty.properties}
+									<!-- Direct object with properties -->
+									<div class="border rounded-md px-4 pt-4 pb-2">
+										{#if arg.value && typeof arg.value === 'object' && !Array.isArray(arg.value)}
+											<!-- Convert arg.value (plain values) to InputTransform format for nested fields -->
+											{@const nestedArgs = Object.fromEntries(
+												Object.keys(schemaProperty.properties).map((key) => {
+													const val = arg.value?.[key]
+													// If already an InputTransform, keep it; otherwise wrap as static
+													if (val && typeof val === 'object' && ('type' in val || 'expr' in val)) {
+														return [key, val]
+													}
+													return [key, { type: 'static', value: val }]
+												})
+											)}
+											<SchemaFormTransform
+												schema={{
+													properties: schemaProperty.properties,
+													required: schemaProperty.required ?? [],
+													$schema: '',
+													type: 'object'
+												}}
+												bind:args={
+													() => nestedArgs,
+													(v) => {
+														// Check if any nested field uses javascript mode
+														let hasJavascriptField = false
+														const plainValues = {}
+														const jsExprParts = []
+
+														Object.keys(v ?? {}).forEach((key) => {
+															const transform = v[key]
+															if (transform?.type === 'javascript') {
+																hasJavascriptField = true
+																// Remove wrapping if it's already wrapped
+																let expr = transform.expr
+																if (expr.startsWith('(') && expr.endsWith(')')) {
+																	expr = expr.slice(1, -1)
+																}
+																jsExprParts.push(`"${key}": ${expr}`)
+															} else {
+																const val =
+																	transform?.type === 'static' ? transform.value : transform?.value
+																plainValues[key] = val
+																// For JS object construction
+																jsExprParts.push(`"${key}": ${JSON.stringify(val)}`)
+															}
+														})
+
+														if (hasJavascriptField) {
+															// Switch parent to javascript mode with full object expression
+															// BUT keep propertyType as 'static' so UI stays in visual mode
+															arg.type = 'javascript'
+															arg.expr = `({\n  ${jsExprParts.join(',\n  ')}\n})`
+															// Keep arg.value for visual editing
+															arg.value = plainValues
+														} else {
+															// All fields are static, keep as static object
+															arg.type = 'static'
+															arg.value = plainValues
+															arg.expr = undefined
+														}
+														dispatch('change', { argName, arg })
+													}
+												}
+												{extraLib}
+												{previousModuleId}
+												{pickableProperties}
+												{enableAi}
+												{otherArgs}
+												{isAgentTool}
+												{s3StorageConfigured}
+											/>
+										{/if}
+									</div>
+								{:else if schemaProperty.type === 'array' && schemaProperty.items?.type === 'object' && schemaProperty.items?.properties}
+									<!-- Array of objects with properties - each item should support template strings -->
+									<div class="flex flex-col gap-2">
+										{#if Array.isArray(arg.value)}
+											{#each arg.value as item, i}
+												<div class="border rounded-md px-4 pt-4 pb-2 relative">
+													<button
+														class="absolute top-2 right-2 p-1 hover:bg-surface-hover rounded"
+														onclick={() => {
+															arg.value = arg.value.filter((_, idx) => idx !== i)
+															dispatch('change', { argName, arg })
+														}}
+													>
+														<span class="text-xs">✕</span>
+													</button>
+													{@const itemArgs = Object.fromEntries(
+														Object.keys(schemaProperty.items.properties).map((key) => {
+															const val = item?.[key]
+															if (
+																val &&
+																typeof val === 'object' &&
+																('type' in val || 'expr' in val)
+															) {
+																return [key, val]
+															}
+															return [key, { type: 'static', value: val }]
+														})
+													)}
+													<SchemaFormTransform
+														schema={{
+															properties: schemaProperty.items.properties,
+															required: schemaProperty.items.required ?? [],
+															$schema: '',
+															type: 'object'
+														}}
+														bind:args={
+															() => itemArgs,
+															(v) => {
+																// Check if any field in this array item uses javascript
+																let hasJavascriptField = false
+																const plainValues = {}
+																const jsExprParts = []
+
+																Object.keys(v ?? {}).forEach((key) => {
+																	const transform = v[key]
+																	if (transform?.type === 'javascript') {
+																		hasJavascriptField = true
+																		let expr = transform.expr
+																		if (expr.startsWith('(') && expr.endsWith(')')) {
+																			expr = expr.slice(1, -1)
+																		}
+																		jsExprParts.push(`"${key}": ${expr}`)
+																	} else {
+																		const val =
+																			transform?.type === 'static'
+																				? transform.value
+																				: transform?.value
+																		plainValues[key] = val
+																		jsExprParts.push(`"${key}": ${JSON.stringify(val)}`)
+																	}
+																})
+
+																// Update the array item
+																arg.value[i] = plainValues
+
+																// Check if ANY item in the array has javascript
+																let arrayHasJavascript = hasJavascriptField
+																if (!arrayHasJavascript && Array.isArray(arg.value)) {
+																	// Check other items for javascript expressions stored as strings
+																	arrayHasJavascript = arg.value.some((item, idx) => {
+																		if (idx === i) return false
+																		return Object.values(item ?? {}).some(
+																			(val) =>
+																				typeof val === 'string' &&
+																				(val.includes('${') ||
+																					val.startsWith('`') ||
+																					val.includes('results.'))
+																		)
+																	})
+																}
+
+																if (arrayHasJavascript) {
+																	// Convert entire array to javascript mode
+																	// BUT keep UI in visual mode by preserving arg.value
+																	const arrayExprParts = arg.value.map((item, idx) => {
+																		if (idx === i && hasJavascriptField) {
+																			return `{\n    ${jsExprParts.join(',\n    ')}\n  }`
+																		} else {
+																			const itemParts = Object.keys(item ?? {}).map((key) => {
+																				return `"${key}": ${JSON.stringify(item[key])}`
+																			})
+																			return `{\n    ${itemParts.join(',\n    ')}\n  }`
+																		}
+																	})
+																	arg.type = 'javascript'
+																	arg.expr = `([\n  ${arrayExprParts.join(',\n  ')}\n])`
+																	// Keep arg.value for visual editing - don't set to undefined!
+																}
+
+																dispatch('change', { argName, arg })
+															}
+														}
+														{extraLib}
+														{previousModuleId}
+														{pickableProperties}
+														{enableAi}
+														{otherArgs}
+														{isAgentTool}
+														{s3StorageConfigured}
+													/>
+												</div>
+											{/each}
+										{/if}
+										<Button
+											variant="default"
+											color="light"
+											size="xs"
+											on:click={() => {
+												if (!Array.isArray(arg.value)) {
+													arg.value = []
+												}
+												arg.value = [...arg.value, {}]
+												dispatch('change', { argName, arg })
+											}}
+										>
+											Add item
+										</Button>
+									</div>
+								{/if}
+							{:else}
+								<!-- Use ArgInput for simple types and objects without properties -->
+								<ArgInput
+									{resourceTypes}
+									noMargin
+									compact
+									on:focus={onFocus}
+									on:blur={() => {
+										focused = false
+									}}
+									shouldDispatchChanges
+									on:change={() => {
+										dispatch('change', { argName, arg })
+									}}
+									label={argName}
+									bind:editor={monaco}
+									bind:description={schema.properties[argName].description}
+									bind:value={arg.value}
+									type={schema.properties[argName].type}
+									oneOf={schema.properties[argName].oneOf}
+									required={schema.required?.includes(argName)}
+									bind:pattern={schema.properties[argName].pattern}
+									bind:valid={inputCheck}
+									defaultValue={schema.properties[argName].default}
+									bind:enum_={schema.properties[argName].enum}
+									bind:format={schema.properties[argName].format}
+									contentEncoding={schema.properties[argName].contentEncoding}
+									bind:itemsType={schema.properties[argName].items}
+									properties={schema.properties[argName].properties}
+									nestedRequired={schema.properties[argName].required}
+									displayHeader={false}
+									extra={argExtra}
+									{variableEditor}
+									{itemPicker}
+									bind:pickForField
+									showSchemaExplorer
+									nullable={schema.properties[argName].nullable}
+									bind:title={schema.properties[argName].title}
+									bind:placeholder={schema.properties[argName].placeholder}
+									{helperScript}
+									{s3StorageConfigured}
+									otherArgs={Object.fromEntries(
+										Object.entries(otherArgs).map(([key, transform]) => [
+											key,
+											transform?.type === 'static' ? transform.value : transform?.expr
+										])
+									)}
+								>
+									{#snippet innerBottomSnippet()}
+										{#if shouldShowS3ArrayHelper}
+											<S3ArrayHelperButton
+												{connecting}
+												onClick={() =>
+													switchToJsAndConnect((path) => appendPathToArrayExpr(arg.expr, path))}
+											/>
+										{/if}
+									{/snippet}
+								</ArgInput>
+							{/if}
 						{:else if arg.expr != undefined}
 							<div
 								class={`bg-surface-input rounded-md flex flex-col pl-2 overflow-auto ${inputBorderClass({ forceFocus: focused })}`}
diff --git a/frontend/src/lib/components/SchemaFormTransform.svelte b/frontend/src/lib/components/SchemaFormTransform.svelte
new file mode 100644
index 0000000000000..a1ca7cb5d97be
--- /dev/null
+++ b/frontend/src/lib/components/SchemaFormTransform.svelte
@@ -0,0 +1,240 @@
+<script lang="ts">
+	import { createBubbler } from 'svelte/legacy'
+
+	const bubble = createBubbler()
+	import type { Schema } from '$lib/common'
+	import { allTrue, computeShow } from '$lib/utils'
+	import { createEventDispatcher, untrack } from 'svelte'
+	import { deepEqual } from 'fast-equals'
+	import { dragHandleZone, type Options as DndOptions } from '@windmill-labs/svelte-dnd-action'
+	import type { SchemaDiff } from '$lib/components/schema/schemaUtils.svelte'
+	import ResizeTransitionWrapper from './common/ResizeTransitionWrapper.svelte'
+	import { twMerge } from 'tailwind-merge'
+	import type { InputTransform } from '$lib/gen'
+	import InputTransformForm from './InputTransformForm.svelte'
+	import type { PickableProperties } from './flows/previousResults'
+
+	interface Props {
+		schema: Schema | any
+		hiddenArgs?: string[]
+		args?: Record<string, InputTransform>
+		disabled?: boolean
+		isValid?: boolean
+		autofocus?: boolean
+		disablePortal?: boolean
+		dndConfig?: DndOptions | undefined
+		items?: { id: string; value: string }[] | undefined
+		diff?: Record<string, SchemaDiff>
+		nestedParent?: { label: string; nestedParent: any | undefined } | undefined
+		shouldDispatchChanges?: boolean
+		nestedClasses?: string
+		largeGap?: boolean
+		className?: string
+		extraLib?: string
+		previousModuleId: string | undefined
+		pickableProperties?: PickableProperties | undefined
+		enableAi?: boolean
+		otherArgs?: Record<string, InputTransform>
+		isAgentTool?: boolean
+		s3StorageConfigured?: boolean
+	}
+
+	let {
+		schema = $bindable(),
+		hiddenArgs = [],
+		args = $bindable(undefined),
+		disabled = false,
+		isValid = $bindable(true),
+		autofocus = false,
+		disablePortal = false,
+		dndConfig = undefined,
+		items = undefined,
+		diff = {},
+		nestedParent = undefined,
+		shouldDispatchChanges = false,
+		nestedClasses = '',
+		largeGap = false,
+		className = '',
+		extraLib = $bindable('missing extraLib'),
+		previousModuleId,
+		pickableProperties = undefined,
+		enableAi = false,
+		otherArgs = {},
+		isAgentTool = false,
+		s3StorageConfigured = true
+	}: Props = $props()
+
+	const dispatch = createEventDispatcher()
+
+	let inputCheck: { [id: string]: boolean } = $state({})
+
+	let keys: string[] = $state([])
+
+	function removeExtraKey() {
+		const nargs = {}
+		Object.keys(args ?? {}).forEach((key) => {
+			if (keys.includes(key) && args) {
+				nargs[key] = args[key]
+			}
+		})
+		args = nargs
+	}
+
+	function hasExtraKeys() {
+		return Object.keys(args ?? {}).some((x) => !keys.includes(x))
+	}
+
+	function reorder() {
+		let lkeys = Object.keys(schema?.properties ?? {})
+		if (!deepEqual(schema?.order, lkeys) || !deepEqual(keys, lkeys)) {
+			if (schema?.order && Array.isArray(schema.order)) {
+				const n = {}
+				;(schema.order as string[]).forEach((x) => {
+					if (schema.properties && schema.properties[x] != undefined) {
+						n[x] = schema.properties[x]
+					}
+				})
+				Object.keys(schema.properties ?? {})
+					.filter((x) => !schema.order?.includes(x))
+					.forEach((x) => {
+						n[x] = schema.properties[x]
+					})
+				if (
+					!deepEqual(schema.properties, n) ||
+					!deepEqual(Object.keys(schema.properties), Object.keys(n))
+				) {
+					schema.properties = n
+				}
+			}
+			let nkeys = Object.keys(schema.properties ?? {})
+
+			if (!deepEqual(keys, nkeys)) {
+				keys = nkeys
+				dispatch('change')
+			}
+		}
+
+		if (hasExtraKeys()) {
+			removeExtraKey()
+		}
+	}
+
+	let hidden: Record<string, boolean> = $state({})
+	let fields = $derived(items ?? keys.map((x) => ({ id: x, value: x })))
+
+	function handleHiddenFields(schema: Schema | any, args: Record<string, InputTransform>) {
+		for (const x of fields) {
+			if (schema?.properties?.[x.value]?.showExpr) {
+				// For InputTransform, we need to check the actual value
+				const argValue =
+					args[x.value]?.type === 'static' ? args[x.value]?.value : args[x.value]?.expr
+				const contextArgs = {}
+				Object.keys(args ?? {}).forEach((key) => {
+					const arg = args[key]
+					contextArgs[key] = arg?.type === 'static' ? arg?.value : arg?.expr
+				})
+
+				if (computeShow(x.value, schema.properties?.[x.value]?.showExpr, contextArgs)) {
+					hidden[x.value] = false
+				} else if (!hidden[x.value]) {
+					hidden[x.value] = true
+					// remove arg
+					delete args[x.value]
+					// make sure it's made valid
+					inputCheck[x.value] = true
+				}
+			}
+		}
+	}
+
+	$effect.pre(() => {
+		if (args == undefined || typeof args !== 'object') {
+			args = {}
+		}
+	})
+
+	$effect.pre(() => {
+		schema?.order
+		Object.keys(schema?.properties ?? {})
+		schema && (untrack(() => reorder()), (hidden = {}))
+	})
+
+	$effect.pre(() => {
+		;[schema, args]
+
+		if (args && typeof args == 'object') {
+			let oneShowExpr = false
+			for (const key of fields) {
+				if (schema?.properties?.[key.value]?.showExpr) {
+					oneShowExpr = true
+				}
+			}
+			if (!oneShowExpr) {
+				return
+			}
+			for (const key in args) {
+				args[key]
+			}
+		}
+		untrack(() => handleHiddenFields(schema, args ?? {}))
+	})
+
+	$effect.pre(() => {
+		isValid = allTrue(inputCheck ?? {})
+	})
+</script>
+
+<div
+	class="w-full {className} {nestedClasses}"
+	use:dragHandleZone={dndConfig ?? { items: [], dragDisabled: true }}
+	onfinalize={bubble('finalize')}
+	onconsider={bubble('consider')}
+>
+	{#if keys.length > 0 && args}
+		{#each fields as item, i (item.id)}
+			{@const argName = item.value}
+			<ResizeTransitionWrapper
+				vertical
+				class={twMerge(
+					typeof diff[argName] === 'object' &&
+						diff[argName].diff !== 'same' &&
+						'bg-red-300 dark:bg-red-800 rounded-md'
+				)}
+				innerClass="w-full"
+			>
+				{#if !hiddenArgs.includes(argName) && keys.includes(argName)}
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						class="flex flex-row items-center {largeGap ? 'pb-4' : 'pb-2'} "
+						onclick={() => {
+							dispatch('click', argName)
+						}}
+					>
+						{#if args && typeof args == 'object' && schema?.properties[argName]}
+							{#if !hidden[argName]}
+								<InputTransformForm
+									on:change={() => {
+										dispatch('change')
+									}}
+									{schema}
+									bind:arg={args[argName]}
+									{argName}
+									{extraLib}
+									bind:inputCheck={inputCheck[argName]}
+									{previousModuleId}
+									{pickableProperties}
+									{enableAi}
+									{otherArgs}
+									{isAgentTool}
+									{s3StorageConfigured}
+								/>
+							{/if}
+						{/if}
+					</div>
+				{/if}
+			</ResizeTransitionWrapper>
+		{/each}
+	{:else}
+		<div class="text-secondary text-xs">No inputs</div>
+	{/if}
+</div>