How to include custom JavaScript in Sanity Backend?

I can see you're trying to run JavaScript that manipulates the DOM in Sanity Studio. The code you've shared (document.querySelectorAll('[data-ui="Grid"]')) won't work directly in Sanity's backend because Sanity Studio is a React application, and direct DOM manipulation isn't the recommended approach.

Here are your best options depending on what you're trying to achieve:

1. Studio Plugin with React Components (Recommended)

If you want to customize the Studio UI, you should create a plugin using definePlugin. This lets you add custom React components that integrate properly with Studio:

import {definePlugin} from 'sanity'
import {useEffect} from 'react'

export const myCustomPlugin = definePlugin({
  name: 'my-custom-plugin',
  studio: {
    components: {
      layout: (props) => {
        // Use React hooks like useEffect here
        useEffect(() => {
          // Your custom logic
          const grids = document.querySelectorAll('[data-ui="Grid"]')
          // Do something with grids
        }, [])
        
        return props.renderDefault(props)
      }
    }
  }
})

Then add it to your sanity.config.ts:

import {myCustomPlugin} from './plugins/myCustomPlugin'

export default defineConfig({
  // ... other config
  plugins: [myCustomPlugin()]
})

2. Custom Input Components

If you're trying to add functionality to specific fields in your documents, create a custom input component in your schema.

3. Studio Tools

If you need a separate interface or utility within Studio, you can create a custom tool that appears in the Studio navigation.

Important Notes:

• Don't use vanilla DOM manipulation in Studio - it's a React app, so use React patterns (hooks, components, etc.)
• useEffect is the React way to run code after components render (similar to when you'd query the DOM)
• Studio runs in the browser, not in a "backend" - if you need actual backend logic (like responding to content changes), look into Sanity Functions instead

The plugin approach with studio.components.layout override is your best bet for running custom scripts that interact with Studio's UI elements. This gives you access to the React component lifecycle where you can safely query and manipulate DOM elements using useEffect.