How to modify props passed to renderDefault() in order to customize the item component in an interactive array.

Based on the guide you're following, I need to clarify an important limitation about customizing array item components and the renderDefault() function.

The short answer is: No, you cannot modify the props passed to renderDefault() to reposition the menu button (three dots). The menu button's position within the default rendering is fixed and cannot be changed through props.

When you call renderDefault(props), it returns the complete default array item UI as a single unit, which includes:

• The drag handle
• The item preview/content
• The three-dot menu button

This entire package is rendered together, and the three-dot menu stays in its built-in position within that default rendering – you can't separate it or move it around.

What you CAN do

The guide you're following demonstrates a different pattern: adding your own interactive elements alongside the default rendering, not repositioning parts of it.

Here's the pattern from the guide:

export function RecommendationItem(props: ObjectItemProps<Recommendation>) {
  return (
    <Flex gap={3} paddingRight={2} align="center">
      <Box flex={1}>{props.renderDefault(props)}</Box>
      <Switch checked={props?.value?.featured} />
    </Flex>
  )
}

This wraps the entire default rendering in a flex container and adds a Switch component to the right. The three-dot menu stays where it is inside renderDefault(), and your custom element (the Switch) appears after the whole default block.

Your options

If you need the menu button at the very end of your custom layout, you have two approaches:

1. Accept the layout limitation (recommended)
Add your interactive elements before or after the complete renderDefault() output using flex layout, as shown in the guide. This is the simpler approach and preserves all the built-in functionality.

2. Build the entire item component yourself
Don't use renderDefault() at all. Instead, manually implement:

• The item preview (using the preview configuration from your schema)
• Drag handle functionality
• The menu functionality (open/close, delete, duplicate, etc.)

This is significantly more complex and means reimplementing a lot of Studio's built-in behavior. The Form Components API documentation provides the necessary props and callbacks, but you'd essentially be building a custom array item from scratch.

The guide's approach of composition – wrapping renderDefault() and adding your own controls alongside it – is the intended pattern for most customization needs. It gives you interactive controls without having to rebuild the entire array item interface.