diff --git a/docs/preview/README.md b/docs/preview/README.md
index b5707632b0..b2c858fea1 100644
--- a/docs/preview/README.md
+++ b/docs/preview/README.md
@@ -4,8 +4,12 @@ This tool makes it easier to preview reference docs that are deployed to shopify
## Usage
-Run the CLI with a path to the docs metadata file, and an app will boot up rendering a preview of the docs.
+Run the dev command from a path that contains a `docs/generated/generated_docs_data.json` file.
+
+Example from the `packages/hydrogen` or `packages/hydrogen-react` directories:
```bash
-node preview/bin/cli.js path/to/generated_docs_data.json
+npm run dev --prefix ../../docs/preview
```
+
+Alternatively, pass `GEN_DOCS_PATH` as an environment variable to overwrite the default path.
diff --git a/docs/preview/app/root.tsx b/docs/preview/app/root.tsx
index c4d312870c..5469d77c49 100644
--- a/docs/preview/app/root.tsx
+++ b/docs/preview/app/root.tsx
@@ -1,7 +1,6 @@
import {json, type LinksFunction} from '@remix-run/node';
import {
Links,
- LiveReload,
Meta,
NavLink,
Outlet,
@@ -10,7 +9,7 @@ import {
useLoaderData,
useParams,
} from '@remix-run/react';
-import stylesheet from '~/tailwind.css';
+import stylesheet from '~/tailwind.css?url';
import {Fragment, useCallback, useState} from 'react';
import he from 'he';
@@ -19,8 +18,7 @@ export const links: LinksFunction = () => [
];
export async function loader() {
- delete require.cache[process.env.DOCS_META_FILE!];
- const data = require(process.env.DOCS_META_FILE!);
+ const {default: data} = await import('virtual:docs.json');
for (const doc of data) {
for (const tab of doc.defaultExample.codeblock.tabs) {
@@ -69,7 +67,6 @@ export default function App() {
-