Parhelia Editor Bridge React

React helper for adding the Parhelia editor bridge script to rendering hosts.

Render the full bridge script directly in Parhelia editing mode:

import { ParheliaBridgeScript } from "@parhelia/editor-bridge-react";

<ParheliaBridgeScript searchParams={searchParams} />;

By default, ParheliaBridgeScript renders only for ?parhelia=1 and reads the Sitecore origin from PARHELIA_SITECORE_ORIGIN or NEXT_PUBLIC_PARHELIA_SITECORE_ORIGIN. When those are not set, it falls back to the managed Sitecore/XM Cloud host values SITECORE_API_HOST and NEXT_PUBLIC_SITECORE_API_HOST.

You can pass the origin explicitly when env lookup is not available:

<ParheliaBridgeScript
  sitecoreOrigin="https://sitecore-authoring.example"
  searchParams={searchParams}
/>

For non-React editing-render routes, reuse the same predicate:

import { shouldRenderParheliaBridgeScript } from "@parhelia/editor-bridge-react";

if (shouldRenderParheliaBridgeScript({ requestUrl: request.url })) {
  // Inject /parhelia/editor-bridge/v1/parhelia-bridge.js from the Sitecore origin.
}

The Sitecore origin should come from trusted server config or fixed application code. Do not source it from the query string or a parent-window message. For cross-origin rendering hosts, allow the Sitecore origin that serves this script in script-src.

Background page screenshot and DOM capture render the target in preview mode with ?parhelia=1. Same-origin and Sitecore-proxied pages can receive the bridge through Parhelia's parent-injection fallback. A direct cross-origin rendering host cannot be modified by the parent browser, so it must render ParheliaBridgeScript whenever parhelia=1, including preview requests where Sitecore's normal editing flag is false. Configure the host bridge with an explicit Parhelia/Sitecore parent origin; do not use a wildcard allowed origin.