diff --git a/docs/preview/.gitignore b/docs/preview/.gitignore
new file mode 100644
index 0000000000..35ee339bb7
--- /dev/null
+++ b/docs/preview/.gitignore
@@ -0,0 +1,140 @@
+node_modules
+
+/.mf
+.env
+.vscode
+.turbo
+.cache
+**/dist
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+.env.test
+!**/playground/**/.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# VSCode launch configs
+.vscode/
+!examples/*/.vscode/
+!templates/*/.vscode/
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# User localdev package
+packages/localdev
+
+.DS_Store
+
+temp
+snow-devil
+artifacts
+
+yarn.lock
+!/yarn.lock
+
+admin.schema.json
+business-platform.schema.json
+
+app/generated_docs_data.js
+public/build
+build
\ No newline at end of file
diff --git a/docs/preview/README.md b/docs/preview/README.md
new file mode 100644
index 0000000000..b5707632b0
--- /dev/null
+++ b/docs/preview/README.md
@@ -0,0 +1,11 @@
+# Docs Previewer
+
+This tool makes it easier to preview reference docs that are deployed to shopify.dev.
+
+## Usage
+
+Run the CLI with a path to the docs metadata file, and an app will boot up rendering a preview of the docs.
+
+```bash
+node preview/bin/cli.js path/to/generated_docs_data.json
+```
diff --git a/docs/preview/app/entry.client.tsx b/docs/preview/app/entry.client.tsx
new file mode 100644
index 0000000000..0d53161a36
--- /dev/null
+++ b/docs/preview/app/entry.client.tsx
@@ -0,0 +1,18 @@
+/**
+ * By default, Remix will handle hydrating your app on the client for you.
+ * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
+ * For more information, see https://remix.run/file-conventions/entry.client
+ */
+
+import {RemixBrowser} from '@remix-run/react';
+import {startTransition, StrictMode} from 'react';
+import {hydrateRoot} from 'react-dom/client';
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <RemixBrowser />
+    </StrictMode>,
+  );
+});
diff --git a/docs/preview/app/entry.server.tsx b/docs/preview/app/entry.server.tsx
new file mode 100644
index 0000000000..a5ce794a66
--- /dev/null
+++ b/docs/preview/app/entry.server.tsx
@@ -0,0 +1,137 @@
+/**
+ * By default, Remix will handle generating the HTTP Response for you.
+ * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
+ * For more information, see https://remix.run/file-conventions/entry.server
+ */
+
+import {PassThrough} from 'node:stream';
+
+import type {AppLoadContext, EntryContext} from '@remix-run/node';
+import {createReadableStreamFromReadable} from '@remix-run/node';
+import {RemixServer} from '@remix-run/react';
+import isbot from 'isbot';
+import {renderToPipeableStream} from 'react-dom/server';
+
+const ABORT_DELAY = 5_000;
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+  loadContext: AppLoadContext,
+) {
+  return isbot(request.headers.get('user-agent'))
+    ? handleBotRequest(
+        request,
+        responseStatusCode,
+        responseHeaders,
+        remixContext,
+      )
+    : handleBrowserRequest(
+        request,
+        responseStatusCode,
+        responseHeaders,
+        remixContext,
+      );
+}
+
+function handleBotRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+) {
+  return new Promise((resolve, reject) => {
+    let shellRendered = false;
+    const {pipe, abort} = renderToPipeableStream(
+      <RemixServer
+        context={remixContext}
+        url={request.url}
+        abortDelay={ABORT_DELAY}
+      />,
+      {
+        onAllReady() {
+          shellRendered = true;
+          const body = new PassThrough();
+          const stream = createReadableStreamFromReadable(body);
+
+          responseHeaders.set('Content-Type', 'text/html');
+
+          resolve(
+            new Response(stream, {
+              headers: responseHeaders,
+              status: responseStatusCode,
+            }),
+          );
+
+          pipe(body);
+        },
+        onShellError(error: unknown) {
+          reject(error);
+        },
+        onError(error: unknown) {
+          responseStatusCode = 500;
+          // Log streaming rendering errors from inside the shell.  Don't log
+          // errors encountered during initial shell rendering since they'll
+          // reject and get logged in handleDocumentRequest.
+          if (shellRendered) {
+            console.error(error);
+          }
+        },
+      },
+    );
+
+    setTimeout(abort, ABORT_DELAY);
+  });
+}
+
+function handleBrowserRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+) {
+  return new Promise((resolve, reject) => {
+    let shellRendered = false;
+    const {pipe, abort} = renderToPipeableStream(
+      <RemixServer
+        context={remixContext}
+        url={request.url}
+        abortDelay={ABORT_DELAY}
+      />,
+      {
+        onShellReady() {
+          shellRendered = true;
+          const body = new PassThrough();
+          const stream = createReadableStreamFromReadable(body);
+
+          responseHeaders.set('Content-Type', 'text/html');
+
+          resolve(
+            new Response(stream, {
+              headers: responseHeaders,
+              status: responseStatusCode,
+            }),
+          );
+
+          pipe(body);
+        },
+        onShellError(error: unknown) {
+          reject(error);
+        },
+        onError(error: unknown) {
+          responseStatusCode = 500;
+          // Log streaming rendering errors from inside the shell.  Don't log
+          // errors encountered during initial shell rendering since they'll
+          // reject and get logged in handleDocumentRequest.
+          if (shellRendered) {
+            console.error(error);
+          }
+        },
+      },
+    );
+
+    setTimeout(abort, ABORT_DELAY);
+  });
+}
diff --git a/docs/preview/app/root.tsx b/docs/preview/app/root.tsx
new file mode 100644
index 0000000000..c4d312870c
--- /dev/null
+++ b/docs/preview/app/root.tsx
@@ -0,0 +1,108 @@
+import {json, type LinksFunction} from '@remix-run/node';
+import {
+  Links,
+  LiveReload,
+  Meta,
+  NavLink,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useLoaderData,
+  useParams,
+} from '@remix-run/react';
+import stylesheet from '~/tailwind.css';
+import {Fragment, useCallback, useState} from 'react';
+import he from 'he';
+
+export const links: LinksFunction = () => [
+  {rel: 'stylesheet', href: stylesheet},
+];
+
+export async function loader() {
+  delete require.cache[process.env.DOCS_META_FILE!];
+  const data = require(process.env.DOCS_META_FILE!);
+
+  for (const doc of data) {
+    for (const tab of doc.defaultExample.codeblock.tabs) {
+      tab.code = he.decode(tab.code);
+    }
+  }
+
+  return json({
+    data,
+  });
+}
+
+export default function App() {
+  const {data} = useLoaderData<typeof loader>();
+  // group the data by category
+  const categories = data.reduce((acc: Record<string, any[]>, doc: any) => {
+    if (!acc[doc.category]) {
+      acc[doc.category] = [];
+    }
+    acc[doc.category].push(doc);
+    return acc;
+  }, {});
+
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body className="w-full">
+        <div className="flex p-4 w-full">
+          <div className="flex flex-col w-1/4">
+            {Object.keys(categories).map((category) => (
+              <Category
+                key={category}
+                name={category}
+                category={categories[category]}
+              />
+            ))}
+          </div>
+          <div>
+            <Outlet />
+          </div>
+        </div>
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
+
+function Category({name, category}: {name: string; category: any[]}) {
+  const {doc} = useParams();
+  const defaultExpanded = useCallback(() => {
+    return category.find((categoryDoc) => categoryDoc.name === doc);
+  }, [doc, category]);
+  const [expanded, setExpanded] = useState(defaultExpanded);
+
+  return (
+    <Fragment>
+      <button
+        className="text-left font-bold"
+        onClick={() => setExpanded(!expanded)}
+      >
+        {name}
+      </button>
+      {expanded ? (
+        <div className="flex flex-col pl-4">
+          {category.map((doc: any) => (
+            <NavLink
+              key={doc.name}
+              to={`/${doc.name}`}
+              className={({isActive}) => (isActive ? 'underline' : '')}
+            >
+              {doc.name}
+            </NavLink>
+          ))}
+        </div>
+      ) : null}
+    </Fragment>
+  );
+}
diff --git a/docs/preview/app/routes/$doc.tsx b/docs/preview/app/routes/$doc.tsx
new file mode 100644
index 0000000000..02d5bcb723
--- /dev/null
+++ b/docs/preview/app/routes/$doc.tsx
@@ -0,0 +1,133 @@
+import type {LoaderArgs} from '@remix-run/node';
+import {json} from '@remix-run/node';
+import {useLoaderData, useMatches} from '@remix-run/react';
+import {marked} from 'marked';
+import {useState} from 'react';
+
+import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
+// @ts-ignore
+import {oneDark} from 'react-syntax-highlighter/dist/cjs/styles/prism/index.js';
+
+export async function loader({params}: LoaderArgs) {
+  return json({doc: params.doc});
+}
+
+function getDefinition(definitions: any, type: string) {
+  return definitions[type] ? definitions[type] : {};
+}
+
+export default function Index() {
+  const {doc} = useLoaderData();
+  if (doc === 'worker.js') return null;
+
+  const matches = useMatches();
+  const data = (matches as any)[0].data.data;
+
+  const docMetaData = data.find((d: any) => d.name === doc!);
+  const definition = docMetaData?.definitions?.[0];
+  const typeDef = definition
+    ? getDefinition(definition.typeDefinitions, definition.type)
+    : null;
+
+  const props = typeDef
+    ? typeDef.members ?? typeDef.params ?? typeDef.value
+    : null;
+
+  return (
+    <div>
+      <h1 className="block text-2xl font-bold mb-8">{docMetaData.name}</h1>
+      <p
+        dangerouslySetInnerHTML={{
+          __html: marked.parse(docMetaData.description),
+        }}
+      ></p>
+
+      <Examples examples={docMetaData.defaultExample.codeblock.tabs} />
+
+      {props ? (
+        <>
+          <h2 className="block text-xl font-bold my-8">{definition.title}</h2>
+          {props instanceof Array ? (
+            <div className="flex flex-col gap-4">
+              {props.map((prop: any) => (
+                <Prop key={prop.name} prop={prop} />
+              ))}
+            </div>
+          ) : (
+            <div className="font-mono bg-slate-100 rounded-sm px-2">
+              {props}
+            </div>
+          )}
+        </>
+      ) : null}
+    </div>
+  );
+}
+
+function Prop({
+  prop,
+}: {
+  prop: {
+    name: string;
+    value: string;
+    description: string;
+    isOptional?: boolean;
+  };
+}) {
+  return (
+    <div>
+      <div className="flex gap-4 mb-2">
+        <div className="font-bold">{prop.name}</div>
+        <div className="font-mono bg-slate-100 rounded-sm px-2">
+          {prop.value}
+        </div>
+        <div className="text-red-900 bg-red-300 rounded-sm px-2">required</div>
+      </div>
+      <p
+        dangerouslySetInnerHTML={{
+          __html: marked.parse(prop.description),
+        }}
+      ></p>
+    </div>
+  );
+}
+
+function Examples({
+  examples,
+}: {
+  examples: {title: string; code: string; language: string}[];
+}) {
+  const [selectedExample, setSelectedExample] = useState(0);
+
+  if (!examples) return;
+
+  return (
+    <div className="mt-8">
+      <h3 className="font-mono font-bold text-lg my-4">Example code</h3>
+      <div>
+        <div>
+          {examples.map((example, index) => (
+            <button
+              onClick={() => setSelectedExample(index)}
+              className={`${
+                index === selectedExample ? 'font-bold underline' : ''
+              } mr-4`}
+              key={example.title}
+            >
+              {example.title}
+            </button>
+          ))}
+        </div>
+        <SyntaxHighlighter
+          language={examples[selectedExample].language}
+          showLineNumbers
+          showInlineLineNumbers
+          style={oneDark}
+          className="w-full"
+        >
+          {examples[selectedExample].code}
+        </SyntaxHighlighter>
+      </div>
+    </div>
+  );
+}
diff --git a/docs/preview/app/tailwind.css b/docs/preview/app/tailwind.css
new file mode 100644
index 0000000000..b5c61c9567
--- /dev/null
+++ b/docs/preview/app/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/docs/preview/bin/cli.js b/docs/preview/bin/cli.js
new file mode 100644
index 0000000000..5c1abddfff
--- /dev/null
+++ b/docs/preview/bin/cli.js
@@ -0,0 +1,12 @@
+const {spawnSync} = require('child_process');
+const path = require('path');
+
+const docsMetaFile = path.resolve(process.cwd(), process.argv[2]);
+process.env.DOCS_META_FILE = docsMetaFile;
+
+console.log('Watching: ' + docsMetaFile);
+
+spawnSync('npm', ['run', 'dev'], {
+  cwd: path.resolve(__dirname, '..'),
+  stdio: 'inherit',
+});
diff --git a/docs/preview/package.json b/docs/preview/package.json
new file mode 100644
index 0000000000..efe0b044fe
--- /dev/null
+++ b/docs/preview/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "docs-preview",
+  "private": true,
+  "sideEffects": false,
+  "scripts": {
+    "build": "remix build",
+    "dev": "remix dev",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@remix-run/css-bundle": "1.19.1",
+    "@remix-run/node": "1.19.1",
+    "@remix-run/react": "1.19.1",
+    "@remix-run/serve": "1.19.1",
+    "he": "^1.2.0",
+    "isbot": "^3.6.8",
+    "marked": "^9.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-syntax-highlighter": "^15.5.0"
+  },
+  "devDependencies": {
+    "@remix-run/dev": "1.19.1",
+    "@remix-run/eslint-config": "1.19.1",
+    "@types/he": "^1.2.1",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "@types/react-syntax-highlighter": "^15.5.7",
+    "eslint": "^8.38.0",
+    "typescript": "^5.1.6"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}
diff --git a/docs/preview/public/favicon.ico b/docs/preview/public/favicon.ico
new file mode 100644
index 0000000000..8830cf6821
Binary files /dev/null and b/docs/preview/public/favicon.ico differ
diff --git a/docs/preview/remix.config.js b/docs/preview/remix.config.js
new file mode 100644
index 0000000000..a6e2870eb8
--- /dev/null
+++ b/docs/preview/remix.config.js
@@ -0,0 +1,19 @@
+/** @type {import('@remix-run/dev').AppConfig} */
+module.exports = {
+  ignoredRouteFiles: ['**/.*'],
+  watchPaths: [process.env.DOCS_META_FILE],
+  future: {
+    v2_dev: false,
+    v2_meta: true,
+    v2_headers: true,
+    v2_errorBoundary: true,
+    v2_routeConvention: true,
+    v2_normalizeFormMethod: true,
+  },
+  tailwind: true,
+  serverModuleFormat: 'cjs',
+  // appDirectory: "app",
+  // assetsBuildDirectory: "public/build",
+  // publicPath: "/build/",
+  // serverBuildPath: "build/index.js",
+};
diff --git a/docs/preview/remix.env.d.ts b/docs/preview/remix.env.d.ts
new file mode 100644
index 0000000000..dcf8c45e1d
--- /dev/null
+++ b/docs/preview/remix.env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="@remix-run/dev" />
+/// <reference types="@remix-run/node" />
diff --git a/docs/preview/tailwind.config.js b/docs/preview/tailwind.config.js
new file mode 100644
index 0000000000..c47f1a9545
--- /dev/null
+++ b/docs/preview/tailwind.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  content: ['./app/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/docs/preview/tailwind.config.ts b/docs/preview/tailwind.config.ts
new file mode 100644
index 0000000000..8aa1ec6d06
--- /dev/null
+++ b/docs/preview/tailwind.config.ts
@@ -0,0 +1,9 @@
+import type {Config} from 'tailwindcss';
+
+module.exports = {
+  content: ['./app/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+} satisfies Config;
diff --git a/docs/preview/tsconfig.json b/docs/preview/tsconfig.json
new file mode 100644
index 0000000000..b3a178bfee
--- /dev/null
+++ b/docs/preview/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "module": "ES2022",
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+
+    // Remix takes care of building everything in `remix build`.
+    "noEmit": true
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index 7dbc0127b9..f240e02838 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,9 @@
         "templates/demo-store",
         "templates/skeleton",
         "examples/express",
+        "examples/customer-api",
+        "examples/bun",
+        "docs/preview",
         "packages/remix-oxygen",
         "packages/hydrogen",
         "packages/create-hydrogen",
@@ -38,6 +41,64 @@
         "node": ">=16.13"
       }
     },
+    "docs/preview": {
+      "name": "docs-preview",
+      "dependencies": {
+        "@remix-run/css-bundle": "1.19.1",
+        "@remix-run/node": "1.19.1",
+        "@remix-run/react": "1.19.1",
+        "@remix-run/serve": "1.19.1",
+        "he": "^1.2.0",
+        "isbot": "^3.6.8",
+        "marked": "^9.1.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-syntax-highlighter": "^15.5.0"
+      },
+      "devDependencies": {
+        "@remix-run/dev": "1.19.1",
+        "@remix-run/eslint-config": "1.19.1",
+        "@types/he": "^1.2.1",
+        "@types/react": "^18.2.20",
+        "@types/react-dom": "^18.2.7",
+        "@types/react-syntax-highlighter": "^15.5.7",
+        "eslint": "^8.38.0",
+        "typescript": "^5.1.6"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "examples/customer-api": {
+      "version": "0.0.0",
+      "dependencies": {
+        "@remix-run/react": "1.19.1",
+        "@shopify/cli": "3.49.2",
+        "@shopify/cli-hydrogen": "^5.4.3",
+        "@shopify/hydrogen": "^2023.7.11",
+        "@shopify/remix-oxygen": "^1.1.1",
+        "graphql": "^16.6.0",
+        "graphql-tag": "^2.12.6",
+        "isbot": "^3.6.6",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      },
+      "devDependencies": {
+        "@remix-run/dev": "1.19.1",
+        "@shopify/oxygen-workers-types": "^3.17.2",
+        "@shopify/prettier-config": "^1.1.2",
+        "@types/eslint": "^8.4.10",
+        "@types/react": "^18.2.22",
+        "@types/react-dom": "^18.2.7",
+        "eslint": "^8.20.0",
+        "eslint-plugin-hydrogen": "0.12.2",
+        "prettier": "^2.8.4",
+        "typescript": "^5.2.2"
+      },
+      "engines": {
+        "node": ">=16.13"
+      }
+    },
     "examples/express": {
       "name": "hydrogen-express",
       "dependencies": {
@@ -7234,6 +7295,24 @@
         "node": ">=14"
       }
     },
+    "node_modules/@remix-run/serve": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/serve/-/serve-1.19.1.tgz",
+      "integrity": "sha512-ebymSwdykLH+Dtyg7RQDfL0g6Mh2ev/aiMYVPHVJewQmuThDJUmvASFG6uEqY9znDgi4yiBSywbRen89uuilSg==",
+      "dependencies": {
+        "@remix-run/express": "1.19.1",
+        "@remix-run/node": "1.19.1",
+        "compression": "^1.7.4",
+        "express": "^4.17.1",
+        "morgan": "^1.10.0"
+      },
+      "bin": {
+        "remix-serve": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@remix-run/server-runtime": {
       "version": "1.19.1",
       "license": "MIT",
@@ -8999,12 +9078,17 @@
     },
     "node_modules/@types/hast": {
       "version": "2.3.4",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/he": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@types/he/-/he-1.2.1.tgz",
+      "integrity": "sha512-CdNmJMcSqX1BiP3iSsWt+VgixndRIDGzWyaGpBnW3i5heATSk5bJu2j3buutsoBQNjyryqxaNpr8M7fRsGL15w==",
+      "dev": true
+    },
     "node_modules/@types/http-cache-semantics": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.2.tgz",
@@ -9237,6 +9321,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-syntax-highlighter": {
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.7.tgz",
+      "integrity": "sha512-bo5fEO5toQeyCp0zVHBeggclqf5SQ/Z5blfFmjwO5dkMVGPgmiwZsJh9nu/Bo5L7IHTuGWrja6LxJVE2uB5ZrQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/readdir-glob": {
       "version": "1.1.1",
       "license": "MIT",
@@ -9356,7 +9449,6 @@
     },
     "node_modules/@types/unist": {
       "version": "2.0.6",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/ws": {
@@ -11863,6 +11955,8 @@
     },
     "node_modules/chokidar": {
       "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
       "devOptional": true,
       "funding": [
         {
@@ -11870,7 +11964,6 @@
           "url": "https://paulmillr.com/funding/"
         }
       ],
-      "license": "MIT",
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -12890,6 +12983,10 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/customer-api": {
+      "resolved": "examples/customer-api",
+      "link": true
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "dev": true,
@@ -13398,6 +13495,10 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/docs-preview": {
+      "resolved": "docs/preview",
+      "link": true
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "dev": true,
@@ -15401,7 +15502,6 @@
     },
     "node_modules/format": {
       "version": "0.2.2",
-      "devOptional": true,
       "engines": {
         "node": ">=0.4.x"
       }
@@ -16385,7 +16485,6 @@
     },
     "node_modules/he": {
       "version": "1.2.0",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "he": "bin/he"
@@ -16408,6 +16507,14 @@
       "resolved": "templates/hello-world",
       "link": true
     },
+    "node_modules/highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/history": {
       "version": "5.3.0",
       "dev": true,
@@ -18856,6 +18963,31 @@
         "node": ">=8"
       }
     },
+    "node_modules/lowlight": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
+      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+      "dependencies": {
+        "fault": "^1.0.0",
+        "highlight.js": "~10.7.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/lowlight/node_modules/fault": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
+      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+      "dependencies": {
+        "format": "^0.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "6.0.0",
       "license": "ISC",
@@ -18953,6 +19085,17 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/marked": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-9.1.0.tgz",
+      "integrity": "sha512-VZjm0PM5DMv7WodqOUps3g6Q7dmxs9YGiFUZ7a2majzQTTCgX+6S6NAJHPvOhgFBzYz8s4QZKWWMfZKFmsfOgA==",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 16"
+      }
+    },
     "node_modules/mdast-util-definitions": {
       "version": "5.1.1",
       "devOptional": true,
@@ -25681,6 +25824,14 @@
         "react": ">=0.14.9"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "license": "MIT"
@@ -26023,6 +26174,21 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-syntax-highlighter": {
+      "version": "15.5.0",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",
+      "integrity": "sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "highlight.js": "^10.4.1",
+        "lowlight": "^1.17.0",
+        "prismjs": "^1.27.0",
+        "refractor": "^3.6.0"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0"
+      }
+    },
     "node_modules/react-universal-interface": {
       "version": "0.6.2",
       "peerDependencies": {
@@ -26366,6 +26532,167 @@
         "esprima": "~4.0.0"
       }
     },
+    "node_modules/refractor": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz",
+      "integrity": "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==",
+      "dependencies": {
+        "hastscript": "^6.0.0",
+        "parse-entities": "^2.0.0",
+        "prismjs": "~1.27.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/character-entities": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
+      "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/character-entities-legacy": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
+      "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/character-reference-invalid": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
+      "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/comma-separated-tokens": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz",
+      "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/hast-util-parse-selector": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz",
+      "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/refractor/node_modules/hastscript": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz",
+      "integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "comma-separated-tokens": "^1.0.0",
+        "hast-util-parse-selector": "^2.0.0",
+        "property-information": "^5.0.0",
+        "space-separated-tokens": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/refractor/node_modules/is-alphabetical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
+      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/is-alphanumerical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
+      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
+      "dependencies": {
+        "is-alphabetical": "^1.0.0",
+        "is-decimal": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/is-decimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
+      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/is-hexadecimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
+      "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/parse-entities": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
+      "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
+      "dependencies": {
+        "character-entities": "^1.0.0",
+        "character-entities-legacy": "^1.0.0",
+        "character-reference-invalid": "^1.0.0",
+        "is-alphanumerical": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-hexadecimal": "^1.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/prismjs": {
+      "version": "1.27.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
+      "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/refractor/node_modules/property-information": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz",
+      "integrity": "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==",
+      "dependencies": {
+        "xtend": "^4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/space-separated-tokens": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
+      "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "devOptional": true,
@@ -30917,6 +31244,35 @@
         "create-hydrogen": "dist/create-app.js"
       }
     },
+    "packages/docs-preview": {
+      "extraneous": true,
+      "dependencies": {
+        "@remix-run/css-bundle": "1.19.1",
+        "@remix-run/node": "1.19.1",
+        "@remix-run/react": "1.19.1",
+        "@remix-run/serve": "1.19.1",
+        "chokidar": "^3.5.3",
+        "he": "^1.2.0",
+        "isbot": "^3.6.8",
+        "marked": "^9.1.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-syntax-highlighter": "^15.5.0"
+      },
+      "devDependencies": {
+        "@remix-run/dev": "1.19.1",
+        "@remix-run/eslint-config": "1.19.1",
+        "@types/he": "^1.2.1",
+        "@types/react": "^18.2.20",
+        "@types/react-dom": "^18.2.7",
+        "@types/react-syntax-highlighter": "^15.5.7",
+        "eslint": "^8.38.0",
+        "typescript": "^5.1.6"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "packages/hydrogen": {
       "name": "@shopify/hydrogen",
       "version": "2023.7.11",
@@ -36093,6 +36449,18 @@
     "@remix-run/router": {
       "version": "1.7.2"
     },
+    "@remix-run/serve": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/serve/-/serve-1.19.1.tgz",
+      "integrity": "sha512-ebymSwdykLH+Dtyg7RQDfL0g6Mh2ev/aiMYVPHVJewQmuThDJUmvASFG6uEqY9znDgi4yiBSywbRen89uuilSg==",
+      "requires": {
+        "@remix-run/express": "1.19.1",
+        "@remix-run/node": "1.19.1",
+        "compression": "^1.7.4",
+        "express": "^4.17.1",
+        "morgan": "^1.10.0"
+      }
+    },
     "@remix-run/server-runtime": {
       "version": "1.19.1",
       "requires": {
@@ -37743,11 +38111,16 @@
     },
     "@types/hast": {
       "version": "2.3.4",
-      "devOptional": true,
       "requires": {
         "@types/unist": "*"
       }
     },
+    "@types/he": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@types/he/-/he-1.2.1.tgz",
+      "integrity": "sha512-CdNmJMcSqX1BiP3iSsWt+VgixndRIDGzWyaGpBnW3i5heATSk5bJu2j3buutsoBQNjyryqxaNpr8M7fRsGL15w==",
+      "dev": true
+    },
     "@types/http-cache-semantics": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.2.tgz",
@@ -37938,6 +38311,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-syntax-highlighter": {
+      "version": "15.5.7",
+      "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.7.tgz",
+      "integrity": "sha512-bo5fEO5toQeyCp0zVHBeggclqf5SQ/Z5blfFmjwO5dkMVGPgmiwZsJh9nu/Bo5L7IHTuGWrja6LxJVE2uB5ZrQ==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/readdir-glob": {
       "version": "1.1.1",
       "requires": {
@@ -38042,8 +38424,7 @@
       "version": "2.0.2"
     },
     "@types/unist": {
-      "version": "2.0.6",
-      "devOptional": true
+      "version": "2.0.6"
     },
     "@types/ws": {
       "version": "8.5.7",
@@ -39578,6 +39959,8 @@
     },
     "chokidar": {
       "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
       "devOptional": true,
       "requires": {
         "anymatch": "~3.1.2",
@@ -40184,6 +40567,31 @@
       "version": "5.6.5",
       "dev": true
     },
+    "customer-api": {
+      "version": "file:examples/customer-api",
+      "requires": {
+        "@remix-run/dev": "1.19.1",
+        "@remix-run/react": "1.19.1",
+        "@shopify/cli": "3.49.2",
+        "@shopify/cli-hydrogen": "^5.4.3",
+        "@shopify/hydrogen": "^2023.7.11",
+        "@shopify/oxygen-workers-types": "^3.17.2",
+        "@shopify/prettier-config": "^1.1.2",
+        "@shopify/remix-oxygen": "^1.1.1",
+        "@types/eslint": "^8.4.10",
+        "@types/react": "^18.2.22",
+        "@types/react-dom": "^18.2.7",
+        "eslint": "^8.20.0",
+        "eslint-plugin-hydrogen": "0.12.2",
+        "graphql": "^16.6.0",
+        "graphql-tag": "^2.12.6",
+        "isbot": "^3.6.6",
+        "prettier": "^2.8.4",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "typescript": "^5.2.2"
+      }
+    },
     "damerau-levenshtein": {
       "version": "1.0.8",
       "dev": true
@@ -40544,6 +40952,29 @@
       "version": "1.1.3",
       "dev": true
     },
+    "docs-preview": {
+      "version": "file:docs/preview",
+      "requires": {
+        "@remix-run/css-bundle": "1.19.1",
+        "@remix-run/dev": "1.19.1",
+        "@remix-run/eslint-config": "1.19.1",
+        "@remix-run/node": "1.19.1",
+        "@remix-run/react": "1.19.1",
+        "@remix-run/serve": "1.19.1",
+        "@types/he": "^1.2.1",
+        "@types/react": "^18.2.20",
+        "@types/react-dom": "^18.2.7",
+        "@types/react-syntax-highlighter": "^15.5.7",
+        "eslint": "^8.38.0",
+        "he": "^1.2.0",
+        "isbot": "^3.6.8",
+        "marked": "^9.1.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-syntax-highlighter": "^15.5.0",
+        "typescript": "^5.1.6"
+      }
+    },
     "doctrine": {
       "version": "3.0.0",
       "dev": true,
@@ -41885,8 +42316,7 @@
       "version": "2.1.4"
     },
     "format": {
-      "version": "0.2.2",
-      "devOptional": true
+      "version": "0.2.2"
     },
     "formdata-polyfill": {
       "version": "4.0.10",
@@ -42524,8 +42954,7 @@
       }
     },
     "he": {
-      "version": "1.2.0",
-      "dev": true
+      "version": "1.2.0"
     },
     "header-case": {
       "version": "2.0.4",
@@ -42567,6 +42996,11 @@
         "typescript": "^5.2.2"
       }
     },
+    "highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A=="
+    },
     "history": {
       "version": "5.3.0",
       "dev": true,
@@ -44073,6 +44507,25 @@
       "version": "2.0.0",
       "devOptional": true
     },
+    "lowlight": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
+      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+      "requires": {
+        "fault": "^1.0.0",
+        "highlight.js": "~10.7.0"
+      },
+      "dependencies": {
+        "fault": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
+          "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+          "requires": {
+            "format": "^0.2.0"
+          }
+        }
+      }
+    },
     "lru-cache": {
       "version": "6.0.0",
       "requires": {
@@ -44130,6 +44583,11 @@
       "version": "3.0.3",
       "dev": true
     },
+    "marked": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-9.1.0.tgz",
+      "integrity": "sha512-VZjm0PM5DMv7WodqOUps3g6Q7dmxs9YGiFUZ7a2majzQTTCgX+6S6NAJHPvOhgFBzYz8s4QZKWWMfZKFmsfOgA=="
+    },
     "mdast-util-definitions": {
       "version": "5.1.1",
       "devOptional": true,
@@ -48206,6 +48664,11 @@
       "dev": true,
       "requires": {}
     },
+    "prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q=="
+    },
     "process-nextick-args": {
       "version": "2.0.1"
     },
@@ -48424,6 +48887,18 @@
         "react-router": "6.14.2"
       }
     },
+    "react-syntax-highlighter": {
+      "version": "15.5.0",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",
+      "integrity": "sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "highlight.js": "^10.4.1",
+        "lowlight": "^1.17.0",
+        "prismjs": "^1.27.0",
+        "refractor": "^3.6.0"
+      }
+    },
     "react-universal-interface": {
       "version": "0.6.2",
       "requires": {}
@@ -48664,6 +49139,110 @@
         "esprima": "~4.0.0"
       }
     },
+    "refractor": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz",
+      "integrity": "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==",
+      "requires": {
+        "hastscript": "^6.0.0",
+        "parse-entities": "^2.0.0",
+        "prismjs": "~1.27.0"
+      },
+      "dependencies": {
+        "character-entities": {
+          "version": "1.2.4",
+          "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
+          "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw=="
+        },
+        "character-entities-legacy": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
+          "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA=="
+        },
+        "character-reference-invalid": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
+          "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg=="
+        },
+        "comma-separated-tokens": {
+          "version": "1.0.8",
+          "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz",
+          "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw=="
+        },
+        "hast-util-parse-selector": {
+          "version": "2.2.5",
+          "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz",
+          "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ=="
+        },
+        "hastscript": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz",
+          "integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==",
+          "requires": {
+            "@types/hast": "^2.0.0",
+            "comma-separated-tokens": "^1.0.0",
+            "hast-util-parse-selector": "^2.0.0",
+            "property-information": "^5.0.0",
+            "space-separated-tokens": "^1.0.0"
+          }
+        },
+        "is-alphabetical": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
+          "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg=="
+        },
+        "is-alphanumerical": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
+          "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
+          "requires": {
+            "is-alphabetical": "^1.0.0",
+            "is-decimal": "^1.0.0"
+          }
+        },
+        "is-decimal": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
+          "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw=="
+        },
+        "is-hexadecimal": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
+          "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw=="
+        },
+        "parse-entities": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz",
+          "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==",
+          "requires": {
+            "character-entities": "^1.0.0",
+            "character-entities-legacy": "^1.0.0",
+            "character-reference-invalid": "^1.0.0",
+            "is-alphanumerical": "^1.0.0",
+            "is-decimal": "^1.0.0",
+            "is-hexadecimal": "^1.0.0"
+          }
+        },
+        "prismjs": {
+          "version": "1.27.0",
+          "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz",
+          "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA=="
+        },
+        "property-information": {
+          "version": "5.6.0",
+          "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz",
+          "integrity": "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==",
+          "requires": {
+            "xtend": "^4.0.0"
+          }
+        },
+        "space-separated-tokens": {
+          "version": "1.1.5",
+          "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz",
+          "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA=="
+        }
+      }
+    },
     "regenerate": {
       "version": "1.4.2",
       "devOptional": true
diff --git a/package.json b/package.json
index f9f98b5339..5a3abb69fa 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,9 @@
     "templates/demo-store",
     "templates/skeleton",
     "examples/express",
+    "examples/customer-api",
+    "examples/bun",
+    "docs/preview",
     "packages/remix-oxygen",
     "packages/hydrogen",
     "packages/create-hydrogen",
diff --git a/packages/hydrogen-react/package.json b/packages/hydrogen-react/package.json
index b09c5bf917..1eebcb70a2 100644
--- a/packages/hydrogen-react/package.json
+++ b/packages/hydrogen-react/package.json
@@ -125,7 +125,8 @@
     "test:watch": "vitest",
     "typecheck": "run-p typecheck:*",
     "typecheck:code": "tsc --noEmit",
-    "typecheck:examples": "tsc --noEmit --project tsconfig.examples.json"
+    "typecheck:examples": "tsc --noEmit --project tsconfig.examples.json",
+    "preview-docs": "node ../docs-preview/bin/cli.js docs/generated/generated_docs_data.json"
   },
   "devDependencies": {
     "@faker-js/faker": "^7.6.0",
diff --git a/packages/hydrogen/package.json b/packages/hydrogen/package.json
index aeb0577dd9..324403e076 100644
--- a/packages/hydrogen/package.json
+++ b/packages/hydrogen/package.json
@@ -19,7 +19,8 @@
     "prepack": "npm run build",
     "test:watch": "vitest",
     "build-docs": "sh ./docs/build-docs.sh && npm run format",
-    "format": "prettier --write \"{src,docs}/**/*\" --ignore-unknown"
+    "format": "prettier --write \"{src,docs}/**/*\" --ignore-unknown",
+    "preview-docs": "node ../../docs/preview/bin/cli.js docs/generated/generated_docs_data.json"
   },
   "exports": {
     ".": {