---
title: "Page and post templates"
description: "Client-side preview for custom page and post templates."
requested_language: ar
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/ar/payload/frontend/live-preview/templates
version: unreleased (main)
docs_index: https://docs.systhema.app/ar/llms.txt
---
> This page isn't translated yet. Showing English.


The built-in Pages and Posts rendering (`SysthemaPage`) wires `SysthemaLivePreview` for you, so **every** page/post template — built-in (`default`, `archive`) or your own custom templates — can get instant client-side preview, not just the default one. Two optional fields on a template registration drive it:

| Field         | Purpose                                                                                                                                                                                                                                                                                                                 |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `clientView`  | A `'use client'` component rendered as `<clientView data={liveDoc} aux={…} />` under client-side preview. Must be a static module export. Omit it and the template falls back to server-side (refresh-on-save) preview.                                                                                                 |
| `resolveData` | A server hook `({ payload, pageData/postData, draft, … }) => serializable`. Runs once in the render path; its result feeds BOTH the server render and the client overlay as `aux`. Put any in-component data fetch (`payload.find`, related rails, archive listings) here so the presentation can render on the client. |

Because the client overlay only re-renders from the **edited doc** plus the request-time `aux` **snapshot**, derived data (related posts, archive listings, curated rails) stays fixed while the editor types — correct, since editing this doc can't change other documents — while the doc's own fields (hero, content, tags) update live.

The cleanest custom-template shape is one `'use client'` presentational component used as both `component` and `clientView` (it reads `{ data, aux }`), with `resolveData` doing the fetch:

```tsx
// videosView.tsx — 'use client'
// IMPORTANT: import listing client components from `@systhemaui/payload/next/client`,
// NOT `@systhemaui/payload/next`. The main barrel transitively pulls the server
// plugin graph (icon-pack runtime → Node's `module`), which a `'use client'` file
// can't bundle for the browser — the build fails with `Can't resolve 'module'`.
import { PostsListClient, ArchiveFilterProvider } from '@systhemaui/payload/next/client'
export default function VideosView({ data, aux }: { data: Page; aux?: VideosAux }) {
  return <Article>{/* render from data + aux.archiveData */}</Article>
}

// videosData.ts — server. resolveArchiveData stays on the main barrel.
import { resolveArchiveData } from '@systhemaui/payload/next'
export const resolveVideosData = async ({ payload, pageData, draft }) => ({
  archiveData: await resolveArchiveData({ payload, listing: pageData.videos, draft }),
})

// pageTemplates.ts
import VideosView from './videosView'
import { resolveVideosData } from './videosData'
export const customPageTemplates: SysthemaPayloadPageTemplate[] = [
  {
    name: 'videos',
    component: VideosView,
    clientView: VideosView,
    resolveData: resolveVideosData,
  },
]
```

> [!NOTE]
> **Why two files.** A `'use client'` file can't import the server-only `resolveArchiveData` (it pulls the plugin graph). Keep the fetch in a separate **server** module (the `resolveData` hook) and the presentation in the `'use client'` view — the view imports listing components from `@systhemaui/payload/next/client` (client-safe), the data module imports `resolveArchiveData` from `@systhemaui/payload/next`.

For posts, the standard bundle (`postSettings`, `relatedPosts`, `resolvedAuthor`) is always resolved and passed as `aux`; a post template's `resolveData` returns only the **extra** aux it needs, which is merged in. Use `previewAux` directly on `<SysthemaLivePreview>` when wiring your own non-template route. Context types: `PageTemplateDataContext` / `PostTemplateDataContext` (from `@systhemaui/payload`).