WeaverseHydrogenRoot

WeaverseHydrogenRoot is the public Hydrogen renderer. It resolves weaverseData from the current React Router route, creates the Weaverse runtime, registers your theme components, and renders the page tree.

Import

import { WeaverseHydrogenRoot } from '@weaverse/hydrogen'

The lower-level WeaverseRoot component belongs to @weaverse/react and requires an initialized Weaverse runtime. Hydrogen applications should use WeaverseHydrogenRoot instead.

Type

interface WeaverseHydrogenRootProps {
  components: HydrogenComponent[]
  data?: WeaverseLoaderData | Promise<WeaverseLoaderData | null> | null
  errorComponent?: React.FC<{ error: Error | unknown }>
}

Basic Usage

Return weaverseData from the route loader. The component automatically reads the closest route’s loader data:

import { WeaverseHydrogenRoot } from '@weaverse/hydrogen'
import type { Route } from './+types/$'
import { components } from '~/weaverse/components'

export async function loader({ context }: Route.LoaderArgs) {
  return {
    weaverseData: await context.weaverse.loadPage(),
  }
}

export default function WeaversePage() {
  return <WeaverseHydrogenRoot components={components} />
}

Passing Data Explicitly

Use the data prop when a layout and child route render different Weaverse pages on the same URL:

import { WeaverseHydrogenRoot } from '@weaverse/hydrogen'
import { useLoaderData } from 'react-router'
import type { Route } from './+types/$'
import { components } from '~/weaverse/components'

export async function loader({ context }: Route.LoaderArgs) {
  return {
    weaverseData: await context.weaverse.loadPage(),
  }
}

export default function WeaversePage() {
  const { weaverseData } = useLoaderData<typeof loader>()

  return (
    <WeaverseHydrogenRoot
      components={components}
      data={weaverseData}
    />
  )
}

The data prop accepts a resolved value or a promise. Passing null explicitly suppresses rendering.

Props

`components`

Type: HydrogenComponent[]
Required: Yes
Description: Component definitions available to the page renderer.

`data`

Type: WeaverseLoaderData | Promise<WeaverseLoaderData | null> | null
Required: No
Description: Overrides automatic route-scoped weaverseData resolution. Promises are handled with React Router’s <Await>.

`errorComponent`

Type: React.FC<{ error: Error | unknown }>
Required: No
Description: Rendered when page data cannot be resolved or rendering throws.

Behavior

The closest route’s weaverseData is used when data is omitted.
Multiple roots are supported for nested layouts and child routes.
data={null} returns null without rendering an error.
Missing automatically resolved data renders errorComponent.

withWeaverse - Set up root theme, translation, and Studio integration
WeaverseClient - Load page and theme data
useWeaverse - Access the active runtime

Overview

Hooks

Components

Utilities & Types

Content API

WeaverseHydrogenRoot

WeaverseHydrogenRoot

Import

Type

Basic Usage

Passing Data Explicitly

Props

`components`

`data`

`errorComponent`

Behavior

​WeaverseHydrogenRoot

​Import

​Type

​Basic Usage

​Passing Data Explicitly

​Props

​components

​data

​errorComponent

​Behavior

​Related

WeaverseHydrogenRoot

Import

Type

Basic Usage

Passing Data Explicitly

Props

`components`

`data`

`errorComponent`

Behavior

Related