Remix live preview route not working - redirects to index page

I can see you're hitting a redirect issue with the Remix live preview guide! The good news is that the guide you're following has actually been updated since it was first published, and the resource.preview.tsx route approach is no longer the recommended pattern.

Looking at the official guide you linked, the modern implementation uses the Presentation Tool with Visual Editing, which works completely differently and doesn't require a resource.preview.tsx route at all.

The Modern Approach (No resource.preview.tsx needed!)

The current guide shows that live preview now works through:

1. @sanity/react-loader - Handles loading data with live updates
2. @sanity/visual-editing - Provides the clickable overlays and communication with Presentation
3. The Presentation Tool - Embeds your Remix app in an iframe inside the Studio

The magic happens when your Remix app is loaded inside the Presentation Tool's iframe. The LiveVisualEditing component (which imports VisualEditing from @sanity/visual-editing/remix) handles all the communication between the Studio and your app automatically.

Why You're Seeing Redirects

If you're following an older version of the guide or mixing old and new patterns, you might be creating a resource.preview.tsx file that's trying to set session cookies. But the modern approach doesn't use sessions at all - it uses "stega" (Content Source Maps) encoded directly in the data.

What You Should Check

1. Verify your setup matches the current guide:

• You should have SANITY_STUDIO_STEGA_ENABLED="true" in your .env
• Your routes should use useQuery from @sanity/react-loader
• You should have the LiveVisualEditing component in your root route

2. Remove any resource.preview.tsx file - you don't need it with the modern approach

3. Make sure you're viewing through Presentation:

• Open your Studio at http://localhost:3333/presentation
• The preview should load your Remix app at http://localhost:3000 inside an iframe
• Changes should update in real-time as you edit

4. Check your CORS settings in sanity.io/manage - you need http://localhost:3000 added with "Allow credentials" checked

Quick Debugging Steps

1. Open your browser console when viewing through Presentation - look for any errors
2. Verify SANITY_STUDIO_STEGA_ENABLED is actually "true" (as a string)
3. Check that the LiveVisualEditing component is rendering (it should only render when SANITY_STUDIO_STEGA_ENABLED is true)
4. Make sure you're using the useQuery hook in your routes, not just the raw data from the loader

Fresh Start Option

If you want to start with a working example, the official Remix + Sanity clean template implements all these patterns correctly and might help you spot what's different in your setup.

The key insight: modern Remix + Sanity live preview doesn't use resource routes or session cookies - it uses stega-encoded data and the Visual Editing component to enable real-time updates when viewed through the Presentation Tool!