 – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Sanity Studio: Image Field Not Displaying or Loading Properly

You probably use the same layout for studio as for your site. You probably want to move your root layout to a  nested layout for your site and then have the root layout be a empty one. 

So your root layout could be layout.tsx with something like:  

export default function RootLayout({_children_}) {

it only works partially, i still see my website, but when i scroll down, i see the full ui of sanity.

import "@/styles/globals.css";
import { Metadata } from "next";
import { siteConfig } from "@/config/site";
import { fontSans } from "@/config/fonts";
import { Providers } from "./providers";
import  Navbar  from "@/components/navbar";
import { Link } from "@nextui-org/link";
import clsx from "clsx";

export const metadata: Metadata = {
	title: {
		default: siteConfig.name,
		template: `%s - ${siteConfig.name}`,
	},
	description: siteConfig.description,
	themeColor: [
		{ media: "(prefers-color-scheme: light)", color: "white" },
		{ media: "(prefers-color-scheme: dark)", color: "black" },
	],
	icons: {
		icon: "/favicon.ico",
		shortcut: "/favicon-16x16.png",
		apple: "/apple-touch-icon.png",
	},
};

export default function RootLayout({
	children,
}: {
	children: React.ReactNode;
}) {
	return (
		&lt;html lang="en" suppressHydrationWarning&gt;
			&lt;head /&gt;
			&lt;body
				className={clsx(
					"min-h-screen bg-background font-sans antialiased",
					fontSans.variable
				)}
			&gt;
				&lt;Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}&gt;
					&lt;div className="relative flex flex-col h-screen"&gt;
						&lt;Navbar /&gt;
						&lt;main className="container mx-auto max-w-7xl pt-16 px-6 flex-grow"&gt;
							{children}
						&lt;/main&gt;
						&lt;footer className="w-full flex items-center justify-center py-3"&gt;
							&lt;Link
								isExternal
								className="flex items-center gap-1 text-current"
								href="<https://nextui-docs-v2.vercel.app?utm_source=next-app-template>"
								title="<http://nextui.org|nextui.org> homepage"
							&gt;
								&lt;span className="text-default-600"&gt;Powered by&lt;/span&gt;
								&lt;p className="text-primary"&gt;NextUI&lt;/p&gt;
							&lt;/Link&gt;
						&lt;/footer&gt;
					&lt;/div&gt;
				&lt;/Providers&gt;
			&lt;/body&gt;
		&lt;/html&gt;
	);
}

What are you passing in as the {children} on your homepage?

I need this to display everything on the website. If I remove it, you can no longer see the sanity interface.
The problem is still that I see the website at the top and then the sanity dashboard at the bottom

 => app/_layout_.tsx
your current website 

 => app/(content)/_layout_.tsx
your studio 

and for website use the one you pasted above

My layout.tsx currently looks like this in the /app folder.

Use nextUI for explanation



import "@/styles/globals.css";
import { siteConfig } from "@/config/site";
import { fontSans } from "@/config/fonts";
import { Providers } from "./providers";
import Navbar from "@/components/navbar";
import { Link } from "@nextui-org/link";
import clsx from "clsx";
import Head from "next/head"; // Importiere den Head-Komponenten
import Footer from "@/components/Footer";

export const metadata = {
    title: {
        default: siteConfig.name,
        template: `%s - ${siteConfig.name}`,
    },
    description: siteConfig.description,
    icons: {
        icon: "/favicon.ico",
        shortcut: "/favicon-16x16.png",
        apple: "/apple-touch-icon.png",
    },
};

export default function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        &lt;html lang="en" suppressHydrationWarning&gt;
            &lt;Head&gt;
                &lt;meta name="description" content={siteConfig.description} /&gt;
                {/* Hier definierst du die Theme-Farben für verschiedene Schemata */}
                &lt;meta name="theme-color" content="white" media="(prefers-color-scheme: light)" /&gt;
                &lt;meta name="theme-color" content="black" media="(prefers-color-scheme: dark)" /&gt;
                {/* Hier kannst du weitere Meta-Tags für Icons usw. hinzufügen */}
            &lt;/Head&gt;
            &lt;body
                className={clsx(
                    "min-h-screen bg-background font-sans antialiased",
                    fontSans.variable
                )}
            &gt;
                &lt;Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}&gt;
                    &lt;div className="relative flex flex-col h-screen"&gt;
                        &lt;Navbar /&gt;
                        &lt;main className="container mx-auto max-w-7xl pt-16flex-grow"&gt;
                            {children}
                        &lt;/main&gt;
                        &lt;footer className="w-full flex items-center justify-center py-3"&gt;
                           &lt;Footer /&gt;
                        &lt;/footer&gt;
                    &lt;/div&gt;
                &lt;/Providers&gt;
            &lt;/body&gt;
        &lt;/html&gt;
    );
}

i used this install for my next.js website


yeah. so thats why it wraps around studio. Since nested layouts gets injected in above layouts. So the studio layouts gets rendered in the 

And how can I isolate sanity? I would actually like to have it in my project and I've never had this problem before =(

I'm going crazy here. And would actually hate to work without this template.

sanity admin is under /app/admin

in /admin is the layout.tsx and in
/app/admin/[[]...index] is the page.tsx

. That way you can have a root layout for the Sanity Studio and another root layout for your main app. This is exactly what I did



app
├─ (main)
├─ (studio)
│  ├─ studio
│     └─ [[...slug]]
│  ├─ layout.tsx
│  └─ page.tsx

Sanity Studio: Image Field Not Displaying or Loading Properly

Sanity – Build the way you think, not the way your CMS thinks

Was this answer helpful?