Resolving UI issues in Sanity Studio by adjusting global.css

7 replies

Last updated: Jan 3, 2025

Is there an easy way. to completely separate the backend of Sanity from the design templates of my frontend?

AI Update

Yes! Sanity is built specifically for this - it's a headless CMS, meaning the backend (content management) and frontend (design/templates) are completely separate by design.

Here's how this separation works:

The Architecture

Sanity stores all your content in the Content Lake (the backend), which you access through APIs. Your frontend can be built with any framework (Next.js, React, Vue, Svelte, etc.) and lives in a completely separate codebase if you want. The two communicate only through Sanity's APIs - there's no tight coupling.

Deploying Studio Separately

Sanity Studio (the content editing interface) can be deployed completely separately from your frontend:

Separate repositories: Keep your Studio in one repo and your frontend in another
Different hosting: Deploy Studio to one host (Vercel, Netlify, etc.) and your frontend to another
Self-hosting: Run sanity build to generate static files for your Studio, then host them anywhere

To build Studio for deployment, you simply run:

sanity build

This creates a dist directory with static files you can deploy to any hosting service. Your Studio might live at studio.yoursite.com while your frontend is at yoursite.com.

Monorepo vs Separate Repos

You have two main approaches:

Separate repos: Completely independent projects. Studio in one repo, frontend in another. Maximum separation.
Monorepo: Both in one repository but still separate applications with their own build processes and deployment targets.

The Frontend Connection

Your frontend connects to Sanity's Content Lake using client libraries like next-sanity (for Next.js) or the vanilla @sanity/client. You query content using GROQ or GraphQL, and Sanity just returns data - it has zero opinions about your design or templates.

This is the core benefit of Sanity being a composable content platform - you can swap out your entire frontend without touching your content infrastructure, or vice versa.

That’s the whole point. They are decoupled, there’s no frontend until you build one.

I have a Frontend, But the Layout of my backend Looks Not good, all Icons to smale, the Text Editor also very Smale etc. And I dont know, how I can fix this Problem.

Yes, there is an easy way to completely separate the backend of Sanity from the design templates of your frontend. Sanity is a headless CMS, which means it provides a way to manage content without tying it to any specific front-end framework or design.

My Problem is, the text editor is very smale and all elements not showing full. Also all other elements like icons buttons in the backend are very smale .. and i dont know why

- You recommend checking your browser’s zoom settings, as this can sometimes affect how the interface is rendered. If the issue persists, it may be beneficial to explore customizing the Sanity Studio’s styles. Sanity provides flexibility to adjust the user interface to better suit your needs, allowing you to increase the size of the text editor and other components for improved visibility and accessibility.
- You can also look into potential updates or configurations that might enhance the overall user experience. Our goal is to ensure that you have a seamless and efficient content management experience, enabling you to focus on creating and managing your content without any hindrances.

How can I change the size of elements in Sanity?

Okay, it was a error in my global.css file. know all looks good

Sanity – 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.

Get started for free Explore the demo