Hydrogen-Sanity Support & Live Preview vs Visual Editing Dependencies

Based on my research of the hydrogen-sanity library and its GitHub repository, here are answers to your specific questions:

1. Is hydrogen-sanity supported and are deprecated methods okay to use?

Yes, hydrogen-sanity is actively supported and maintained. The library is currently at version 5.1.1 (released November 18, 2025) with 285 commits and regular updates from the official Sanity team.

Regarding deprecated methods - this depends on which version your template is using:

• If using v5 (current): You're good to go! The methods are current and supported
• If using v4 or earlier: You may encounter deprecated patterns, but the team provides clear migration guides for upgrading

The library requires @shopify/hydrogen >= 2025.5.0 and supports modern Hydrogen/Remix Router patterns. If your template is older, I'd recommend reviewing the migration guides to ensure you're using current, supported methods rather than deprecated ones.

Note on Shopify Hydrogen/Remix: Hydrogen recently transitioned from using Remix to React Router (Hydrogen now uses Remix Router under the hood, but the framework itself has evolved). Make sure your template is compatible with current Hydrogen versions.

2. Are Live Preview and Visual Editing dependent on each other?

No, they are NOT dependent on each other - they're complementary but separate features that can work independently:

Live Preview (Real-time Content Updates)

• Shows Sanity content changes in real-time as you edit
• Can work without Visual Editing overlays
• Achieved through:
  • Server-side: loadQuery or fetch methods with preview mode
  • Client-side: Query component or useQuery hooks for live synchronization

Visual Editing (Click-to-Edit Overlays)

• Provides interactive overlays in Sanity's Presentation tool
• Enables click-to-edit functionality with element highlighting
• Requires:
  • VisualEditing component (or Overlays component)
  • Stega encoding enabled in client config
• Can work without live preview (though less useful)

How to Use Them

The VisualEditing component offers flexible configuration:

// Server-only preview (no overlays)
<VisualEditing /> 

// Full experience (auto-enables live mode when using Query components)
<VisualEditing action="/api/preview" />

// Or use separately for fine-grained control:
<Overlays action="/api/preview" /> // Just overlays
<LiveMode /> // Just live content sync

Bottom line: You can have live preview content updates rendering from Content Lake without visual editing overlays. However, for the full Presentation tool experience with click-to-edit functionality, you'll want both features enabled. The library intelligently detects your data fetching patterns and enables the appropriate features automatically.