# My local Hydrogen site is loading the Test Page, but the page builder fails to preview

**URL:** <https://forum.builder.io/t/my-local-hydrogen-site-is-loading-the-test-page-but-the-page-builder-fails-to-preview/13350>\
**Category:** Technical Questions\
**Tags:** visual-editor\
**Created:** [March 9, 2025, 2:48am UTC](https://forum.builder.io/t/my-local-hydrogen-site-is-loading-the-test-page-but-the-page-builder-fails-to-preview/13350 "2025-03-09T02:48:06Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![ynakano.endertech](https://avatars.discourse-cdn.com/v4/letter/y/8dc957/32.png) [@ynakano.endertech](https://forum.builder.io/u/ynakano.endertech)\
**Post date:** [March 9, 2025, 2:48am UTC](https://forum.builder.io/t/my-local-hydrogen-site-is-loading-the-test-page-but-the-page-builder-fails-to-preview/13350/1 "2025-03-09T02:48:06Z")

</div>

**Builder content link**

> **[Builder.io: Visual Development Platform](https://builder.io/content/80b9c695c793430aa3abc526fc34dd1b)**
>
> Builder is the only Visual Development Platform that offers an AI-powered design-to-code tool, a visual editor and an enterprise CMS.

**Builder public api key**

`2c78369997004eb0aec540d4775072dc`

**What are you trying to accomplish**

I’m working on connecting my local Hydrogen site to the page builder, following the **[Using your app with Builder](https://www.builder.io/c/docs/integrating-builder-pages)** section of the **Integrate Pages** tutorial.

My local site is running as `http://localhost:3000`. And, it is loading the “Test Page” I created on my [builder.io](http://builder.io) space.

This is the screenshot of `http://localhost:3000/test-page`

 ![Screenshot 2025-03-08 at 6.08.03 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/8/8bcb6f9f7ffc6022951dffda29df092fe324ddb9.png)

Now, I am trying to preview the content in the page builder.

- I installed the SDK with `npm install @builder.io/sdk-react`
- I published the “Test Page” content in [builder.io](http://builder.io)
- I set the Preview URL of “Page” model as `http://localhost:3000`

But, I get the **Your site is not loading as expected** screen when I open the “Test Page” in the page builder.

 ![Screenshot 2025-03-08 at 6.07.39 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/1/1de8b583f9929f298a01d5b3d8ea6522b2c41c04.png)

- Clicking the [Refresh] button or the [I still can’t connect] button did not fix the problem.
- I followed the **Troubleshoot Guide** link and created the “Test Page”. But the issue still persists.

I’d really appreciate any insights anyone might have on this integration issue. Is there a recommended way to debug this situation?

**Code stack you are integrating Builder with**

Machine setup:

- Device: MacBook Pro (2019)
- OS: **macOS, Sequoia 15.3**
- Build tools: **Xcode 16.2**
- Node: Using **nvm**. Version: **v20.12.2**

Code stack:

- Hydrogen **2025.1.2**
- React
- Shopify

**Reproducible code example**

I copied the below code from the integration tutorial and replaced the `apiKey` value.

```auto
// ($slug)._index.tsx
import {
  Content,
  fetchOneEntry,
  getBuilderSearchParams,
  isPreviewing,
} from '@builder.io/sdk-react';
import type { LoaderFunctionArgs } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';
import { fetch as webFetch } from '@remix-run/web-fetch';

const apiKey = '2c78369997004eb0aec540d4775072dc';

export const loader = async ({ params, request }: LoaderFunctionArgs) => {
  const url = new URL(request.url);
  const urlPath = `/${params['slug'] || ''}`;

  const page = await fetchOneEntry({
    model: 'page',
    apiKey,
    options: getBuilderSearchParams(url.searchParams),
    userAttributes: { urlPath },
    fetch: webFetch,
  });

  if (!page && !isPreviewing(url.search)) {
    throw new Response('Page Not Found', {
      status: 404,
      statusText: 'Page not found in Builder.io',
    });
  }

  return { page };
};

// Define and render the page.
export default function Page() {
  // Use the useLoaderData hook to get the Page data from `loader` above.
  const { page } = useLoaderData<typeof loader>();

  // Render the page content from Builder.io
  return <Content model="page" apiKey={apiKey} content={page as any} />;
}

```