HTML Preview and Click-to-Edit
Shows Payload documents in a live preview rendered by any HTML site, with click-to-edit back into the admin.
Installation
pnpm add @focus-reactive/payload-plugin-html-preview About
This plugin adds a live preview to the Payload admin for sites that render HTML without a JavaScript framework, such as static site generators, Nunjucks or Liquid templates, Eleventy, or PHP apps. Payload's built-in live preview expects the frontend to subscribe to form data and re-render itself. These templates cannot do that. Instead, the CMS calls a render endpoint on your site, passes the saved document or the editor's unsaved form data, and shows the returned page in the admin. The page is proxied through Payload so it has one origin, and relative asset URLs are fetched through the CMS as well. You register `htmlPreviewPlugin` in `payload.config.ts` with a list of collections and a `site` function. That function receives the request and document ID, checks access with `overrideAccess: false`, and returns the render URL, optional headers such as a preview secret, and optional settings like `basePath` or a `scrollOffset` for fixed headers. The plugin adds a component to the edit view of each listed collection, so the import map needs regenerating after installation. The site needs a route that answers GET with the saved page and POST with a JSON `doc` body. The README includes examples for Astro on-demand rendering, an Eleventy function that renders Nunjucks without Eleventy, and an Express route. Click-to-edit works through `data-payload-id`, `data-payload-doc`, and `data-payload-field` attributes that the site prints only when `preview` is true. Clicking a block switches the admin to the right tab, expands collapsed rows, and scrolls to the field. Clicking an element that belongs to another collection opens that document in a drawer without discarding unsaved edits. Sites that cannot render on request can set `unsaved: false` and preview only the deployed saved pages, which skips unsaved edits.
Package info
- Package name
@focus-reactive/payload-plugin-html-preview- Latest version
1.0.2- Unpacked size
- 134 kB
- License
- MIT
- Weekly downloads
- 358
- Last publish
- Sep 28, 2026
More from focusreactive
View profileTranslator
Translates localized Payload CMS content into any locale via pluggable providers, with document, bulk-collection, and per-field controls in the admin UI.
Collaborative Comments
Adds document-level and field-level comments to the Payload admin panel, with @mentions, email notifications, resolution, multi-tenancy and locale filtering.
JSON Form Builder
Edits a Payload json field as real admin fields, with a drawer-based form builder and plain key-value output for the site.
A/B Testing
A/B testing plugin that creates page variants in Payload collections and routes traffic at the edge via Next.js middleware.
Visual Editing
Adds click-to-edit overlays on draft frontend pages that open the matching field in the Payload admin form.
Create Ideal CMS
Interactive CLI that scaffolds a production-ready Payload CMS monorepo preconfigured with FocusReactive plugins.
Similar plugins
More in Contentonpage for TanStack Start
Adds on-page editing and draft previews to TanStack Start sites that read content from Payload.
On-Page React Editor
Adds an inline visual editor UI for Payload pages, with toolbars, field editors, and element annotations for React front ends.
OnPage for Next.js App Router
Adds inline editing and draft previews to Next.js App Router pages backed by Payload, with a sealed preview session and an OnPage component.
On-Page Editing
Adds inline on-page editing, draft preview links, and an admin button to edit Payload pages in place on a Next.js front end.
Lexical Inline Rich Text Editor
Adds click-to-edit inline rich text editing for Payload Lexical richText fields on the front end.