Live Preview Mode Not Displaying with Proper Layout and CSS

[vncsleal]

Description

When using Sanity Studio's Presentation Tool for live preview, the webpage is displayed without proper layout and CSS styling. The preview works (showing draft content), but visual formatting is broken.

Environment

• Next.js version: Next.js 15 (App Router)
• Sanity version: Latest
• Browser: Firefox
• OS: macOS

Console Errors

Warning: Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content.

Steps to Reproduce

1. Set up a clean installation of the Clean Next.js + Sanity app template
2. Add content in Sanity Studio
3. Click the "Presentation" tab in Sanity Studio
4. Try to view and edit content with Visual Editing

Expected Behavior

The Visual Editing preview should display the website with proper layout, styling and CSS—identical to how it appears when viewed directly in the browser.

Actual Behavior

The preview shows the website content but without proper CSS styling and layout. Text appears unstyled, layout is broken, and components appear without proper formatting.

Screenshots

https://l3pden50fc.ufs.sh/f/qVxhWi9olDGtLwTbf6hStBCXZLbNkmhOUyM7aFviT3eKrfAz

Additional Context

Console logs show multiple errors including:

• Connection interruption to Sanity API
• "Layout was forced before the page was fully loaded"
• Multiple "Error in input stream" errors
• CSS loading issues

It appears that either:

1. The stylesheet isn't properly loaded in the iframe context of the Presentation Tool
2. There's a timing issue with when CSS loads vs. when content renders
3. The connection to the Sanity API is being interrupted

The website view when accessed directly through localhost:3000 also returns CSS warnings.
Both regular and live preview mode in the Studio are affected.