skills.rest
vitakili
vitakiliCOMMUNITY
Explore all skills by this author →
GitHub

theme-live-preview

Wire up and debug live theme preview for the Payload CMS theme-management plugin.

9|1|Updated Oct 5, 2025
Search Tags:#debugging#integration#payload-cms#live-preview#theme-management#css-sync#preview-panel
One-click install
npx skills add https://github.com/vitakili/payload-plugins --skill theme-live-preview
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: theme-live-preview
Source: https://github.com/vitakili/payload-plugins/tree/main/packages/theme-management/.claude/skills/theme-live-preview
Command: npx skills add https://github.com/vitakili/payload-plugins --skill theme-live-preview

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Wire up and debug live theme preview for Payload CMS theme-management — the native Payload Live Preview iframe (with mobile/tablet/desktop breakpoints), the in-admin device + light/dark preview panels, and the ThemeLivePreviewSync client component that applies theme CSS live without a full save.

Core Features & Use Cases

  • In-admin preview panels with a device switcher (mobile/tablet/desktop) and a light/dark toggle, enabling instant visual feedback.
  • Native Payload Live Preview iframe with configurable breakpoints and URL resolver to preview theme changes in real time.
  • Live CSS synchronization via ThemeLivePreviewSync that applies style updates without requiring a page refresh or save.
  • Debug guidance for common issues (missing breakpoints, non-responsive panels, broken CSS sync) across admin and preview iframe.

Quick Start

Open the Theme Management plugin in Payload, enable live preview, and test both the in-admin panels and the preview iframe to verify live theme updates.

Frequently Asked Questions about theme-live-preview

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enable live theme preview in Payload CMS?▼

To enable live theme preview in Payload CMS, open the Theme Management plugin, activate the live preview setting, and test the in-admin preview panels alongside the Live Preview iframe to verify real-time theme updates.

Why is my Payload CMS live preview CSS not syncing without a page save?▼

Payload CMS live preview CSS fails to sync instantly when the ThemeLivePreviewSync client component is missing or misconfigured, preventing style updates from rendering without a full page refresh or save.

How do I configure mobile and desktop breakpoints for the Payload CMS preview iframe?▼

Configuring mobile, tablet, and desktop breakpoints for the Payload CMS preview iframe requires defining the breakpoints in ThemeManagementLivePreviewOptions and ensuring the URL resolver is correctly set to avoid missing breakpoint errors.

What causes non-responsive device preview panels in the Payload CMS theme-management plugin?▼

Non-responsive device preview panels in the Payload CMS theme-management plugin are typically caused by misconfigurations in ThemeManagementLivePreviewOptions or missing breakpoint definitions, which can be debugged by verifying the preview settings.

Does the Payload CMS theme-management plugin support light and dark mode live previews?▼

Yes, the Payload CMS theme-management plugin supports light and dark mode live previews through an in-admin toggle, enabling instant visual feedback for theme changes across both appearance modes.

What is the best way to debug missing breakpoints in Payload CMS live preview?▼

The best way to debug missing breakpoints in Payload CMS live preview is to inspect the ThemeManagementLivePreviewOptions configuration for robust error handling and ensure all mobile, tablet, and desktop breakpoint values are correctly defined.

Related Skills

Explore More Software Engineering Skills→
vitakilivitakili
9

theme-management-setup

Install and configure the @kilivi-dev/payloadcms-theme-management plugin in Payload CMS v3 with Next.js App Router.

Community
Advanced
henkisdabrohenkisdabro
77

shopify-liquid-syntax

Render dynamic Shopify theme content using Liquid templates.

Community
Basic
LionHeartFrankLionHeartFrank
1

Payload Mastery

Guide Payload CMS development with TypeScript-first patterns and strict access control.

Community
Advanced
naopensedoit2-designnaopensedoit2-design

mockup-sandbox

Render live web UI component previews in canvas iframes via Vite.

Community
Advanced