How sanity-io/hydrogen-sanity works
Hydrogen Sanity connects a Hydrogen storefront to Sanity content: request context configures the client and cache, preview routes manage preview state, and queries provide server data or live client updates. Visual Editing adds overlays and Studio-driven refreshes. The companion Sanity Studio configuration supplies editorial schemas and Shopify-aware document tooling. README capabilities include image URL helpers, TypeGen support, and a Vite plugin. Some of these are represented by their exact source paths but were not sampled; edges are limited to documented or indexed relationships.
Main entry points: context.ts Request context · Overlays.client.tsx Editing overlays · Query.client.tsx Client query · VisualEditing.client.tsx Visual Editing
Components 23
Hydrogen runtime
- Request context
packages/hydrogen-sanity/src/context.ts - Sanity provider
packages/hydrogen-sanity/src/provider.tsx - Query component
packages/hydrogen-sanity/src/Query.tsx - Client query
packages/hydrogen-sanity/src/Query.client.tsx - Image URL helpers
packages/hydrogen-sanity/src/image.ts - Vite integration
packages/hydrogen-sanity/src/vite/plugin.ts
Preview and editing
- Preview route
packages/hydrogen-sanity/src/preview/route.ts - Preview session
packages/hydrogen-sanity/src/preview/session.ts - Visual Editing
packages/hydrogen-sanity/src/visual-editing/VisualEditing.client.tsx - Live mode
packages/hydrogen-sanity/src/visual-editing/LiveMode.client.tsx - Editing overlays
packages/hydrogen-sanity/src/visual-editing/Overlays.client.tsx - Query registry
packages/hydrogen-sanity/src/visual-editing/registry.tsx - History adapter
packages/hydrogen-sanity/src/visual-editing/hooks/history.ts - Refresh handler
packages/hydrogen-sanity/src/visual-editing/hooks/refresh.ts
Sanity Studio
- Studio configuration
packages/sanity-config/sanity.config.ts - Content schemas
packages/sanity-config/src/schemaTypes - Studio structure
packages/sanity-config/src/structure
Shopify content
- Shopify documents
packages/sanity-config/src/schemaTypes/objects/shopify - Shopify Studio tools
packages/sanity-config/src/plugins/customDocumentActions
Other components
- Storefront developer
- Sanity API
- Sanity Studio
- Shopify
Connections 23
- Storefront developer → Request context: configures
README.md - Request context → Sanity API: creates client
packages/hydrogen-sanity/src/context.ts - Request context → Sanity provider: provides context
packages/hydrogen-sanity/src/context.ts - Request context → Preview session: checks preview state
packages/hydrogen-sanity/src/context.ts - Query component → Client query: loads live query
packages/hydrogen-sanity/src/Query.tsx - Client query → Query registry: registers query
- Client query → Sanity API: fetches updates
- Storefront developer → Query component: renders content
README.md - Storefront developer → Image URL helpers: uses image helpers
README.md - Storefront developer → Vite integration: configures plugin
README.md - Storefront developer → Preview route: enables preview
README.md - Preview route → Preview session: commits session
packages/hydrogen-sanity/src/preview/route.ts - Sanity Studio → Preview route: validates preview URL
packages/hydrogen-sanity/src/preview/route.ts - Visual Editing → Editing overlays: renders overlays
packages/hydrogen-sanity/src/visual-editing/VisualEditing.client.tsx - Visual Editing → Live mode: enables live mode
packages/hydrogen-sanity/src/visual-editing/VisualEditing.client.tsx - Editing overlays → History adapter: uses history
packages/hydrogen-sanity/src/visual-editing/Overlays.client.tsx - Editing overlays → Refresh handler: uses refresh
packages/hydrogen-sanity/src/visual-editing/Overlays.client.tsx - Editing overlays → Query registry: checks loaders
packages/hydrogen-sanity/src/visual-editing/Overlays.client.tsx - Sanity Studio → Visual Editing: drives editing
README.md - Studio configuration → Content schemas: registers schemas
packages/sanity-config/src/schemaTypes/index.ts - Studio configuration → Studio structure: configures navigation
- Content schemas → Shopify documents: defines commerce types
packages/sanity-config/src/schemaTypes/index.ts - Shopify Studio tools → Shopify: links documents