Adding Sanity v3 to existing React project without Next.js

Good news! You can absolutely add Sanity Studio v3 to your existing React project. The Studio is actually just a React application itself, so it integrates smoothly with any React setup (Create React App, Vite, etc.).

Here's how to get it set up:

Install Sanity Studio in your React project

First, install the necessary packages:

npm install sanity styled-components

Create your Studio configuration

Create a sanity.config.ts (or .js) file in your project:

import {defineConfig} from 'sanity'
import {structureTool} from 'sanity/structure'
import {visionTool} from '@sanity/vision'

export default defineConfig({
  name: 'default',
  title: 'My Project',
  
  projectId: 'your-project-id',
  dataset: 'production',
  
  plugins: [
    structureTool(),
    visionTool(),
  ],
  
  schema: {
    types: [
      // Your schema types go here
    ],
  },
})

Embed Studio as a React component

The Studio can be rendered as a regular React component anywhere in your app:

import {Studio} from 'sanity'
import config from './sanity.config'

function App() {
  return (
    <div>
      <Studio config={config} />
    </div>
  )
}

You can render the <Studio> component as a full page, in a route, or as part of a larger layout. It works with any React setup.

Get your project ID

If you don't have a Sanity project yet, create one:

npm create sanity@latest -- --template clean --create-project "My Project" --dataset production

This will create a project and give you the project ID to use in your config.

Important setup notes

1. CORS settings: You'll need to add your development domain (like http://localhost:3000) to your project's CORS origins in the Sanity management console, with credentials enabled.

2. Routing: If you want the Studio on a sub-route (like /studio), set the basePath in your config and make sure your router redirects all Studio sub-routes to that page.

3. Styling: The Studio needs to take full height. Add this CSS where you mount it:

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

The official embedding documentation has all the details on configuration options and advanced setups.

Alternative approach: If you're looking to build a completely custom content application with your own UI (rather than embedding the full Studio), check out the App SDK. It gives you React hooks to work with Sanity content in your own interfaces, with real-time updates and multiplayer editing built in.