How to embed Sanity Studio in an Astro admin page?

I can see you're trying to embed Sanity Studio directly into an Astro page using renderStudio, but there are a few important things you should know about this approach.

The Main Issue: renderStudio via CDN is Deprecated

The renderStudio function you're using from esm.sh is part of an older, deprecated approach to embedding Studio. While it technically exists in the Sanity codebase, it's not officially supported or documented for modern implementations, especially not for framework integrations like Astro. Loading Sanity Studio via CDN imports like this creates several problems:

1. Dependency conflicts - The lodash aliasing and module resolution don't work reliably
2. Build incompatibility - Astro's build process doesn't handle this type of dynamic Studio initialization
3. Routing issues - Studio expects to control routing, which conflicts with Astro's router
4. No official support - This pattern isn't documented or maintained

The Recommended Approach: Deploy Studio Separately

According to the Astro quickstart documentation, the official and recommended pattern is to deploy your Studio separately from your Astro application. Here's how:

Step 1: Create Your Studio

If you haven't already, create a Sanity Studio project:

npm create sanity@latest -- --dataset production --template clean --typescript --output-path studio

Step 2: Configure Your Studio

Your sanity.config.ts (in the Studio directory) should look like:

import { defineConfig } from 'sanity'
import { deskTool } from 'sanity/desk'

export default defineConfig({
  name: 'project-name',
  projectId: 'your-project-id',
  dataset: 'production',
  plugins: [deskTool()],
  schema: {
    types: [
      // your schema types here
    ]
  }
})

Step 3: Deploy Your Studio

Deploy the Studio to get a hosted URL:

cd studio
npm run deploy

This gives you a yourproject.sanity.studio URL where your editors can manage content. This is covered in the deployment documentation.

Step 4: Connect Your Astro Site

In your Astro project, install the Sanity integration to query content (not embed Studio):

npx astro add @sanity/astro -y

Configure it in astro.config.mjs:

import sanity from "@sanity/astro";

export default defineConfig({
  integrations: [
    sanity({
      projectId: "your-project-id",
      dataset: "production",
      useCdn: false,
    }),
  ],
});

Now your Astro site can query content from Sanity, while editors use the separate Studio URL.

Alternative: Self-Host the Studio

If you don't want to use sanity.studio hosting, you can deploy your Studio folder to any hosting provider (Vercel, Netlify, etc.) as a separate application. The Studio is just a React app that can be built and deployed independently.

Why Not Embed in Astro?

While the quickstart documentation mentions that Studio can be embedded as a React component at a route, this approach has significant limitations in Astro:

• Astro's partial hydration model doesn't work well with Studio's routing
• You'll encounter 404 errors and navigation issues (as noted in community discussions)
• It's not the documented or supported pattern for Astro specifically

The separate deployment approach is simpler, more reliable, and what most production Astro + Sanity sites use. Your Astro site focuses on displaying content, while Studio remains a dedicated content management interface.