Optimizely CMS Live Preview
Configures and troubleshoots real-time live preview and visual editing for Optimizely CMS headless React applications.
This skill provides comprehensive guidance for implementing Optimizely CMS live preview across various React frameworks, including Next.js and TanStack Start. It streamlines the setup of preview routes, configures necessary environment variables, and assists with Optimizely CMS dashboard settings to enable a seamless visual editing experience. Whether setting up preview from scratch or debugging communication issues like blank screens or broken click-to-edit features, this tool ensures editors can see content changes instantly within the application interface.
Key Features
01Tailored code generation for secure /preview route implementation
02Step-by-step Optimizely CMS dashboard configuration instructions
0318 GitHub stars
04Environment variable configuration for Graph and CMS connections
05Automated framework detection for Next.js (App/Pages) and TanStack Start
06Diagnostic troubleshooting for communication injector and preview tokens
Use Cases
01Fixing 'Preview not working' errors or blank screens in the CMS editor
02Implementing click-to-edit functionality for a better editor experience
03Setting up initial live preview for a headless Next.js or TanStack site