Embedding Sanity Studio on a subroute in a React application

Yes, there's a well-defined method for embedding Sanity Studio on a subroute like /admin in your React application! Here's how to do it:

The Official Approach

Sanity Studio is distributed as a single npm package that you can embed in any React application. The key steps are:

1. Install the Studio package

npm install sanity@latest

2. Configure the basePath

In your Studio configuration, set the basePath to match your desired route:

// StudioRoute.tsx
import { defineConfig, Studio } from "sanity";

const config = defineConfig({
  projectId: "your_project_id",
  dataset: "your_dataset",
  basePath: "/admin" // This is the key setting!
});

export default function StudioRoute() {
  return <Studio config={config} />
}

3. Set up catch-all routing

This is crucial - you need to ensure all sub-routes under /admin redirect to the page where Studio is mounted. Most modern frameworks support this:

• Next.js: Use [[...index]].tsx or catch-all routes in App Router
• React Router: Use a splat route like /admin/*
• Other frameworks: Check their docs for "catch-all" or "rest" routes

4. Add proper styling

The Studio needs to take full viewport dimensions. Add this CSS to the container:

#app {
  height: 100vh;
  max-height: 100dvh;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  overflow: auto;
}

5. Update CORS settings

Don't forget: Add your domain to your project's CORS origins settings with authenticated requests enabled.

Next.js Specific

If you're using Next.js, the next-sanity library makes this even easier and includes additional features like live preview. It's the recommended approach for Next.js projects.

The basePath configuration is exactly what you need to avoid separate hosting at admin.* - it allows Studio to live happily alongside your main application on the same domain!