feat(cms): add live preview

closed cod-377

Author: hakalb

apps/cms/src/app/(site)/[...slug]/page-preview.client.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { RenderPage } from '@codeware/shared/ui/cms-renderer';
+import type { Page } from '@codeware/shared/util/payload-types';
+import type { BlocksData } from '@codeware/shared/util/payload-utils';
+
+import { LivePreview } from '../../../components/LivePreview.client';
+
+type Props = {
+  page: Page;
+  blocksData?: BlocksData;
+};
+
+export function PagePreview({ page, blocksData }: Props) {
+  return (
+    <LivePreview initialData={page}>
+      {(data) => <RenderPage page={data} blocksData={blocksData} />}
+    </LivePreview>
+  );
+}

apps/cms/src/app/(site)/[...slug]/page.tsx

@@ -1,10 +1,11 @@
 import { notFound } from 'next/navigation';
 
 import { getPageData } from '@codeware/app-cms/data-access';
-import { RenderPage } from '@codeware/shared/ui/cms-renderer';
 
 import { payloadRuntime } from '../../../security/payload-runtime';
 
+import { PagePreview } from './page-preview.client';
+
 interface Props {
   params: Promise<{
     slug: string[];
@@ -22,5 +23,5 @@ export default async function Page({ params }: Props) {
     notFound();
   }
 
-  return <RenderPage page={data.page} blocksData={data.blocksData} />;
+  return <PagePreview page={data.page} blocksData={data.blocksData} />;
 }

apps/cms/src/app/(site)/landing-page-preview.client.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { RenderLandingPage } from '@codeware/shared/ui/cms-renderer';
+import type { Page } from '@codeware/shared/util/payload-types';
+
+import { LivePreview } from '../../components/LivePreview.client';
+
+type Props = {
+  landingPage: Page;
+};
+
+export function LandingPagePreview({ landingPage }: Props) {
+  return (
+    <LivePreview initialData={landingPage}>
+      {(data) => <RenderLandingPage landingPage={data} />}
+    </LivePreview>
+  );
+}

apps/cms/src/app/(site)/page.tsx

@@ -1,10 +1,11 @@
 import { notFound } from 'next/navigation';
 
 import { getPage } from '@codeware/app-cms/data-access';
-import { RenderLandingPage } from '@codeware/shared/ui/cms-renderer';
 
 import { payloadRuntime } from '../../security/payload-runtime';
 
+import { LandingPagePreview } from './landing-page-preview.client';
+
 // TODO: metadata
 
 export default async function SiteIndexPage() {
@@ -19,5 +20,5 @@ export default async function SiteIndexPage() {
     notFound();
   }
 
-  return <RenderLandingPage landingPage={page} />;
+  return <LandingPagePreview landingPage={page} />;
 }

apps/cms/src/app/(site)/posts/[...slug]/page.tsx

@@ -1,10 +1,11 @@
 import { notFound } from 'next/navigation';
 
 import { getPost } from '@codeware/app-cms/data-access';
-import { RenderPost } from '@codeware/shared/ui/cms-renderer';
 
 import { payloadRuntime } from '../../../../security/payload-runtime';
 
+import { PostPreview } from './post-preview.client';
+
 interface Props {
   params: Promise<{
     slug: string[];
@@ -16,12 +17,11 @@ export default async function Post({ params }: Props) {
   const slugString = slug.join('/');
 
   const runtime = await payloadRuntime();
-
   const post = await getPost(runtime, slugString);
 
   if (!post) {
     notFound();
   }
 
-  return <RenderPost post={post} />;
+  return <PostPreview post={post} />;
 }

apps/cms/src/app/(site)/posts/[...slug]/post-preview.client.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { RenderPost } from '@codeware/shared/ui/cms-renderer';
+import type { Post } from '@codeware/shared/util/payload-types';
+
+import { LivePreview } from '../../../../components/LivePreview.client';
+
+type Props = {
+  post: Post;
+};
+
+export function PostPreview({ post }: Props) {
+  return (
+    <LivePreview initialData={post} depth={1}>
+      {(data) => <RenderPost post={data} />}
+    </LivePreview>
+  );
+}

apps/cms/src/components/LivePreview.client.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { useLivePreview } from '@payloadcms/live-preview-react';
+
+import { usePayload } from '@codeware/shared/ui/cms-renderer';
+
+interface LivePreviewProps<T extends Record<string, any>> {
+  initialData: T;
+  depth?: number;
+  children: (data: T) => React.ReactNode;
+}
+
+/**
+ * Generic client component for Payload live preview.
+ *
+ * Subscribes to live preview updates from the CMS admin panel and passes
+ * the current data (updated as-you-type) to the render function.
+ * Falls back to `initialData` when not in preview mode.
+ *
+ * @example
+ * ```tsx
+ * <LivePreview initialData={page}>
+ *   {(data) => <RenderPage page={data} blocksData={blocksData} />}
+ * </LivePreview>
+ * ```
+ */
+export function LivePreview<T extends Record<string, any>>({
+  initialData,
+  depth = 2,
+  children
+}: LivePreviewProps<T>) {
+  const { payloadUrl } = usePayload();
+  const { data } = useLivePreview<T>({
+    initialData,
+    serverURL: payloadUrl,
+    depth
+  });
+
+  return <>{children(data)}</>;
+}

apps/cms/src/components/RefreshRouteOnSave.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { RefreshRouteOnSave as PayloadLivePreview } from '@payloadcms/live-preview-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+import { usePayload } from '@codeware/shared/ui/cms-renderer';
+
+/**
+ * Client component for server-side live preview.
+ * Listens for save events from Payload CMS and triggers a route refresh.
+ *
+ * Add this component to your layout or page to enable live preview updates when content is saved in the CMS.
+ */
+export const RefreshRouteOnSave: React.FC = () => {
+  const { payloadUrl } = usePayload();
+  const router = useRouter();
+
+  return (
+    <PayloadLivePreview
+      refresh={() => router.refresh()}
+      serverURL={payloadUrl}
+    />
+  );
+};

apps/cms/src/payload.config.ts

@@ -58,6 +58,20 @@ export default buildConfig({
       graphics: {
         Logo: '@codeware/apps/cms/components/Logo.client'
       }
+    },
+    livePreview: {
+      breakpoints: [
+        { label: 'Mobile', name: 'mobile', width: 375, height: 667 },
+        { label: 'Tablet', name: 'tablet', width: 768, height: 1024 },
+        { label: 'Desktop', name: 'desktop', width: 1440, height: 900 }
+      ],
+      collections: ['pages', 'posts'],
+      url: ({ data, collectionConfig, locale }) => {
+        if (collectionConfig?.slug === 'posts') {
+          return `posts/${data.slug}?locale=${locale.code}`;
+        }
+        return `${data.slug}?locale=${locale.code}`;
+      }
     }
   },
   // Declare blocks globally and reference then by slug elsewhere

package.json

@@ -31,6 +31,7 @@
     "@payloadcms/drizzle": "~3.69.0",
     "@payloadcms/email-nodemailer": "~3.69.0",
     "@payloadcms/next": "~3.69.0",
+    "@payloadcms/live-preview-react": "~3.69.0",
     "@payloadcms/plugin-form-builder": "~3.69.0",
     "@payloadcms/plugin-multi-tenant": "~3.69.0",
     "@payloadcms/plugin-seo": "~3.69.0",