How to append script tag to index.html in Sanity Studio with Vite?

Based on the Sanity documentation I found, here's what you need to know about customizing the Sanity Studio's HTML and Vite configuration:

Customizing Vite Configuration in Sanity Studio

Sanity Studio v3+ uses Vite as its build tool, and you can extend the built-in Vite configuration through the Sanity CLI config file.

To customize the Vite configuration and add script tags to index.html, create or modify sanity.cli.js (or sanity.cli.ts) in your Studio project root:

// sanity.cli.js
import {defineCliConfig} from 'sanity/cli'

export default defineCliConfig({
  api: {
    // your API config...
  },
  vite: {
    // Your Vite configuration overrides go here
    plugins: [
      // Add your custom Vite plugins here
    ],
  },
})

Adding Script Tags for Runtime Environment Variables with import-meta-env

For your specific use case with import-meta-env for runtime environment variables while self-hosting, you can use Vite's transformIndexHtml hook:

// sanity.cli.js
import {defineCliConfig} from 'sanity/cli'

export default defineCliConfig({
  api: {
    projectId: 'your-project-id',
    dataset: 'your-dataset',
  },
  vite: {
    plugins: [
      {
        name: 'inject-runtime-env',
        transformIndexHtml(html) {
          return html.replace(
            '</head>',
            `<script src="/env.js"></script></head>`
          )
        },
      },
    ],
  },
})

Alternatively, if you're using the @import-meta-env/unplugin package directly:

// sanity.cli.js
import {defineCliConfig} from 'sanity/cli'
import importMetaEnv from '@import-meta-env/unplugin'

export default defineCliConfig({
  api: {
    projectId: 'your-project-id',
    dataset: 'your-dataset',
  },
  vite: {
    plugins: [
      importMetaEnv.vite({
        example: '.env.example',
        env: '.env',
      }),
    ],
  },
})

Why Your Vite Plugin Might Not Be Running

If your custom Vite plugin with transformIndexHtml isn't running, it's likely because:

1. Wrong configuration location: Make sure you're adding it to sanity.cli.js, not sanity.config.js (which is for Studio configuration, not build configuration)
2. Plugin order: Sanity's internal plugins might be interfering - try different hook orders
3. Development vs. production: The transformIndexHtml plugin runs during both dev and build, but check both modes

Testing Your Configuration

After adding your Vite configuration:

• For development: Run npm run dev or npx sanity dev
• For production build: Run npm run build or npx sanity build
• Check the built dist/index.html to verify your script tag was injected

About the Static Directory

While Sanity Studio does support a static directory for assets, you cannot directly modify the index.html template. The Vite plugin approach with transformIndexHtml is the correct way to inject custom script tags.

The key insight is that Sanity Studio uses Vite under the hood, so any standard Vite plugin approach should work when properly configured in sanity.cli.js. You can learn more about Vite configuration options in their documentation.