Portable text editor toolbar suddenly empty/missing

I understand how frustrating this must be! When the Portable Text editor toolbar suddenly appears empty or shows nothing, there are several potential causes to investigate.

Most Common Causes

CSS Conflicts from Global Styles

The most frequent culprit is CSS from your site bleeding into Sanity Studio, particularly if you're using CSS frameworks like Tailwind CSS or other global resets. These frameworks often apply aggressive resets (like removing borders or setting default sizes) that can make Studio UI elements invisible or non-functional. The toolbar buttons might technically still be there in the DOM, but styling conflicts prevent them from displaying.

If you're using Tailwind with Sanity Studio embedded in your site, ensure your Tailwind configuration excludes the Studio path:

// tailwind.config.js
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    '!./app/studio/**/*', // Exclude Studio directory
  ],
}

Or consider disabling Tailwind's preflight for Studio pages specifically.

Browser Extensions

Ad blockers, privacy extensions, or browser customization tools can inject CSS or block resources that interfere with Studio's UI. Test in an incognito/private window with extensions disabled to rule this out.

Cached Assets

Sometimes browser caching issues can cause Studio UI components to break, especially after updates. Try:

• Hard refresh (Ctrl+Shift+R or Cmd+Shift+R)
• Clear browser cache completely
• Try a different browser

Schema Configuration Issues

Check your Portable Text editor configuration in your schema. If the toolbar configuration was inadvertently changed or if there's an error in the schema definition, the toolbar might not render properly:

defineField({
  name: 'body',
  type: 'array',
  of: [{
    type: 'block',
    // Ensure marks and styles are properly configured
    marks: {
      decorators: [
        {title: 'Strong', value: 'strong'},
        {title: 'Emphasis', value: 'em'}
      ]
    }
  }]
})

Studio Version or Plugin Conflicts

If you recently updated any dependencies or Studio plugins, there could be compatibility issues. Check your package.json for recent changes and consider:

• Updating to the latest sanity package version
• Checking if any custom plugins need updates
• Reviewing the Studio console for JavaScript errors

Debugging Steps

1. Check browser console - Look for JavaScript errors or warnings that might indicate what's breaking
2. Test in isolation - If possible, test the Studio in a standalone environment (not embedded in your site)
3. Inspect the DOM - Use browser dev tools to see if the toolbar buttons exist but are just hidden by CSS
4. Review recent changes - Even if you haven't changed your site code, check if dependencies were auto-updated or if browser/OS updates occurred

Since you mentioned making no changes, the issue likely stems from something external to your codebase - a browser update, extension installation, or possibly a dependency that auto-updated. The CSS conflict scenario is particularly common when Sanity Studio is embedded within a Next.js or other framework application where global styles can inadvertently affect Studio components.