What is Live Preview?

Live preview is a feature that enables real-time preview of content changes within a headless CMS environment. It allows content creators and developers to see how their changes will appear on the live website before publishing them. Here is a Video showcasing the Feature:

Our live-preview feature creates a seamless real-time experience by connecting your frontend directly with the Caisy interface through three key components:

• Live Updates: We establish a continuous event stream between all collaborators using the Caisy interface and your frontend application. This means every keystroke and click in Caisy instantly updates your preview, ensuring you always see the most current version of your content as you work.

• Editable Content Highlighting: The preview intelligently highlights all editable content regions on your page. When you click any highlighted area, you're immediately taken to the corresponding section in the Caisy interface, making content updates quick and intuitive.

• Connection Status: A dedicated connection indicator lets editors know when they're successfully connected to the live preview experience, providing confidence that they're seeing real-time updates as they work.

This architecture eliminates the traditional delay between content updates and preview rendering, making your content editing workflow more efficient and reliable.

• Improved User Experience: Content creators can visualize their changes instantly, leading to faster iteration cycles and better content quality.

• Faster Content Iteration: Real-time preview speeds up the content creation process by eliminating the need for manual checks or multiple rounds of revisions.

• Better Collaboration: Live-preview fosters collaboration between developers and content creators by providing immediate feedback and reducing communication gaps.

We currently support Next.js, a popular React framework, and Qwik City for building server-rendered applications. Our library seamlessly integrates with Next.js to provide real-time live-preview functionality for content changes. With remix you can probably get it going as well easily using our prebuilt library, even if we do not cover it by example.

We are currently working hard to extend our support to Vue.js, another widely used front-end framework. Later on, we plan on supporting most front-end frameworks, and even vanilla javascript. By supporting multiple frameworks, we aim to cater to a broader range of developers and projects, offering flexibility and choice in adopting live-preview capabilities.

In addition to the core functionalities mentioned above, our live-preview feature includes UI components that offer the following benefits:-

• UI Document Navigation: Integrated UI elements assist editors in navigating directly to specific fields within the Caisy interface, streamlining the editing workflow and saving time.

• Connection Status Feedback: Our UI components provide clear feedback about the connection status between Caisy and your project, helping developers stay informed about the real-time syncing process.