Back to Blogs

Benefits of Live Preview: Now with GraphQL support

Austin ChenSep 05, 20235 min read

Talk to an expert

about something you read on this page

Contact an expert

While a headless content management system (CMS) architecture offers flexibility and scalability, it also introduces complexities when it comes to visualizing and testing content changes before publishing. Previewing content changes within a headless CMS presents challenges and pain points that business users and developers must address.

That’s why we developed our dynamic Live Preview feature, which introduces omnichannel previewing functionality, greatly enhancing our users' content creation and editing experience. It allows real-time visualization of how content will appear on the final user interface, eliminating the need for constant toggling between editing and preview modes. By providing a seamless and accurate representation of content, Live Preview significantly streamlines the content creation process.


Now with GraphQL support, we take Live Preview a step further. GraphQL provides developers with an alternative approach to querying data, in addition to REST. GraphQL introduces a paradigm shift by allowing developers to define the structure of their desired data on the back-end. This empowers developers to formulate syntactically precise requests and combine various data types into one response, tailoring it to their specific use case. This flexibility is a key feature of GraphQL, as developers can shape the data retrieval to match their application's needs, ensuring they use the right tool for the right job.

Key benefits

Contentstack’s implementation and architecture of Live Preview has emerged as a game-changer in headless CMS. By facilitating a dynamic preview of the content in its final layout, this feature brings many advantages that transform the content creation process into a more efficient, accurate, and collaborative endeavor. It benefits content managers by improving efficiency and content accuracy and empowers developers to build and fine-tune the front-end interface with a clearer understanding of the end result.

For business users

WYSIWYG experience: Live Preview provides a "What You See Is What You Get" experience, empowering business users to comprehend the final look and feel of the content. This leads to accurate content creation without the need for constant back-and-forths.


Omnichannel content preview: Content managers can seamlessly preview content across multiple platforms, such as mobile, tablets, and desktops. They can also check the responsiveness of their content by changing the aspect ratio, creating a truly omnichannel experience.

Streamlined approvals: With an accurate preview, stakeholders can make quicker decisions regarding content approval, as they can now visualize how the content will appear to end-users.

Content accuracy: Business users can ensure content accuracy by seeing it in its final layout. This is particularly crucial for content that involves complex formatting or multimedia elements.

Time and effort savings: The seamless preview experience eliminates the need to switch between editing and preview modes, saving valuable time for content managers and allowing them to focus more on creating high-quality content.

Engagement enhancement: By visualizing the content exactly as users see it, business users can fine-tune their content for better engagement and user experience, leading to improved outcomes.

For developers

NEW! GraphQL support: With GraphQL for Live Preview, we bring the capability of real-time data preview to support GraphQL from new Live Preview APIs. A primary advantage of GraphQL is its ability to prevent overfetching and underfetching of data, enabling developers to request exactly the data they need, reducing unnecessary data transfer and the need for multiple API calls.

Real-time feedback loop: Developers can witness their front-end coding efforts materialize instantly with the actual content, allowing them to promptly identify and rectify design inconsistencies or layout issues.

Efficient iterations: Live Preview accelerates the iterative process. Developers can fine-tune templates, styles, and layouts in real time, significantly reducing the development lifecycle.

Content-Design Synchronization: By previewing content exactly as it will appear, developers can ensure that their design aligns perfectly with the content, eliminating any mismatches that might arise during the integration phase.

Debugging ease: Any issues with content integration, such as formatting problems or content overflow, can be identified and resolved early in the development process, minimizing debugging efforts later on.

Enhanced collaboration: Developers can collaborate more effectively with content managers, making on-the-fly adjustments based on immediate visual feedback, leading to a smoother and more productive partnership.

Real-world use cases

Preview content in real-time

Content managers always preview their content before deploying it to production. Until now, you had to use a different preview website or a preview extension for this purpose. These separate sites or extensions require you to save and publish the content to preview the corresponding live website. With Live Preview, you can edit your content and view the changes you make in real time without saving or publishing to a live website!

Test content changes

Suppose you have made the necessary changes to your entries and want to check how they would look on the live website. You can do so via the Live Preview pane. Live Preview lets you preview content changes across different environments, such as development, staging, and production. You can update an entry and view how it would look across multiple environments in real time.

Test omnichannel content

Say you want to preview how your content will appear on various digital platforms. With Live Preview, you can seamlessly preview content across mobiles, tablets, and desktops, creating an omnichannel experience.

Contentstack offers an omnichannel preview experience for your entry content that caters to multiple digital channels:

  • Responsive mode: Change the aspect ratio of your webpage. This will immediately change the dimensions of your preview window, thus allowing you to view the responsiveness of your webpage.

  • Mobile mode: Set a specific aspect ratio that is seen on mobile devices, allowing you to preview the responsiveness of your webpage on a mobile device.

  • Tablet mode: Preview the responsiveness of your webpage on a tablet device.


Live Preview brings a new dawn to the content creation process, catering to the needs of business users and developers alike. This feature fosters collaboration, efficiency, and content accuracy by providing real-time, accurate previews of content in its final layout. While business users can create content that truly resonates with their target audience, developers can streamline their coding and design efforts.

The future of content management is not just about storing and delivering content; it's also about offering dynamic, real-time, composable solutions that can adapt to an ever-changing digital landscape. With the addition of GraphQL alongside REST for Live Preview, you can ensure that you work in the most efficient way possible.

From news websites to e-commerce platforms, the real-world applications of Live Preview are diverse and transformative. Are you ready to unlock a new era of content management? Dive into our Live Preview documentation and explore where creativity and functionality intertwine to deliver remarkable user experiences.

Share on:

Talk to an expert

about something you read on this page

Contact an expert

Recommended posts

Sep 19, 2023 | 5 min. read

Introducing the New Contentstack Help Center: Stay productive and stay informed, right

Guess what, haven’t you heard?  About the new Contentstack Help Center! You now have the ability to access extensive documentation, relevant content recommendations, and comprehensive learning resources without ever leaving the platform. With the Help Center, users of all types can access valuable resources and guidance for continuous learning and growth within the Contentstack ecosystem. Are you ready to see what it can do? AI-Powered Assistance: With our integrated AI, you can now engage in real-time conversations and receive curated responses that are tailored to your specific queries. No more sifting through generic information or waiting for human assistance. Our AI-powered assistant is here to provide instant, accurate, and personalized support. Instant Documentation: We're excited to unveil a game-changing feature that will revolutionize your workflow - Instant Documentation Access. With just a simple click, you can now access our comprehensive documentation site without ever leaving the app Effortless Search: Our advanced search algorithm is designed to understand your query and deliver precise results. Whether you're searching for a specific topic, troubleshooting steps, or detailed instructions, our search feature will streamline your journey and help you find what you need in a snap. Tailored Suggestions: With context-aware recommendations, you'll receive targeted suggestions that align with your current needs. Whether you're exploring a specific feature, encountering an error message, or seeking best practices, our system will intelligently analyze your context and provide you with helpful recommendations. Additional Resources: No matter where you are in our app, you can rely on the "Additional Resources" section to provide you with quick access to a variety of helpful links. Here are just a few of the essentials you'll find: Chat with Support: For assistance, the option to engage in a conversation with the Support Team is available. By selecting the 'Chat with Support' option, queries can be addressed and solutions can be found. Documentation:Dive into our comprehensive documentation to explore guides, tutorials, FAQs, and more. It's your go-to resource for in-depth information and step-by-step instructions. What's New: Stay up-to-date with the latest features, updates, and improvements with Contentstack Pulse. Leave Feedback: We value your feedback and want to hear from you! use the "leave feedback" link share thoughts, suggestions, or report any issues you may encounter. Status Page: Wondering if there are any ongoing maintenance or server issues? The "Status Page" link provides real-time updates on system status, ensuring you're always informed. Community: Connect with other users, ask questions, and share insights in our vibrant community. The "Community" link is your gateway to a network of like-minded individuals who can offer support and inspiration. Using the Help Center is like tapping into the collective wisdom of Contentstack experts. It's designed to ensure that you have a smooth, productive, and enjoyable experience while using our app. So, are you ready to revolutionize your Contentstack experience? Click the help sign within the app, open the Help Center, and embark on a journey of discovery. Don’t have an account? Don’t worry, check out our Developer Fast Track here. Let's make your Contentstack experience not just good, but exceptional!

Aug 15, 2023 | 5 min. read

Better Together: Leveraging Automation Hub with other Contentstack products

Since its release, Contentstack's Automation Hub has been helping digital experience teams introduce automation into their daily operations and workflows. This powerful tool is doing more than just simplifying complex workflows — it's also driving huge value for our customers. It's enabling them to create, manage, and deploy content more efficiently than ever before, transforming how they engage with their audiences.But the magic happens when Automation Hub is combined with other Contentstack products. In this post, we’ll explore how to unlock new levels of efficiency and innovation by pairing Automation Hub with AI Assistant, Marketplace, and Launch to create richer, more impactful digital experiences.Automation Hub + AI AssistantAlthough Automation Hub and AI Assistant usually live at separate ends of the content creation process (AI Assistant helps craft and edit content during the creation process, whereas Automation Hub typically enhances content after it has been created), they can enhance each other extremely well. During the content creation process, AI Assistant brings the power of Artificial Intelligence into the editing process to help writers and editors be more efficient and creative. But, once a clear set of rules and processes are defined (for example, if you’re using AI Assistant to create SEO keyword tags on every entry), and you are asking AI to perform these tasks without any human follow-up (you never change the tags once they’ve been added), you should look at Automation Hub as a way to automation this process. Once you trust AI to perform a task - automate it!With Automation Hub, our AI Connectors (currently available: OpenAI ChatGPT and Azure OpenAI ChatGPT) can re-create a similar process but asynchronously. So, if you were using AI Assistant to do SEO enhancement, you could use Automation Hub to do the same thing. For example, when an entry reaches a specific workflow stage, run an automation that performs the AI enhancement and then push it into another stage for possible review.It’s a great way that the two products can work together and make you more efficient.Automation Hub + MarketplaceThe Contentstack Marketplace is a one-stop destination for enterprises to maximize the efficiency of their marketing technologies and solutions. It offers a range of apps, ready-made extensions, and one-click third-party integrations that can enhance your content management process. Notably, the Marketplace lists and provides installation access to:Automation Hub ConnectorsYou can use These third-party applications with Automation Hub to automate certain tasks. For example, the Smartling Connector helps streamline the translation process by allowing for automatic localization of entries in any selected locale whenever a new entry is created.Automation Hub RecipesThese are pre-packaged automation with pre-built action and trigger steps that users can easily install and configure as needed in their stack. An example of an available recipe simplifying data management leverages the AWS S3 action connector, which can automatically backup entries to your AWS S3 account whenever a new entry is created in Contentstack.These tools offer solutions to various use cases, but one connector pairs particularly well, and teams are using it to automate their front-end deployment and hosting.Automation Hub + LaunchContentstack Launch is a product that allows seamless automated deployment and hosting of Jamstack projects. It fills the gap in the content lifecycle where the presentation layer needs to be hosted and made available to consume on the web.You can automate the deployment process with the Launch Connector for Automation Hub. Here's how:Install the Launch Connector from the Contentstack Marketplace.Set up a trigger in Automation Hub based on a specific event, such as a content update.Configure the Launch Connector to deploy your project whenever the trigger event occurs.This process automates deployment and ensures your content is always up-to-date and available to your audience.ConclusionThe combination of Automation Hub with other Contentstack products provides flexible, powerful, and innovative solutions for content management. Whether using the AI Assistant to generate brand voice prompts, leveraging the Marketplace to streamline your content management process, or automating deployment with Launch, Automation Hub makes it all possible.Ready to explore further? Dive into our Automation Hub documentation and discover how you can unlock the full potential of your digital experience stack with Contentstack's Automation Hub.

Aug 01, 2023 | 5 min. read

Summer platform recap: What’s new and what’s coming for Contentstack

Time certainly does fly and it's exciting to share our summer updates! First off, have you heard the news? Contentstack's Headless CMS has been recognized as a leader for 2023 by IDC MarketScape. This recognition is based on a rigorous evaluation of product and service offerings from various headless CMS vendors.This achievement highlights our commitment to providing top-notch solutions and gives our users and potential clients assurance that they're using a product that's considered a leader in its field.Now, let's dive into those Q2 accomplishments:Contentstack Headless CMSNew ChatGPT featuresYou can now instantly transform your content creation experience with these new ChatGPT features. We've broadened the capabilities of our AI Assistant to offer an even more tailored content creation experience for your unique needs like: Configure custom actions: Create custom commands for your organization to increase team productivity and enable content editors to complete more stuff. Streamlining and personalize your content creation process with a tailored voice and tone that adheres to your brand guidelines.Starter actions and icons: To help you get started, we've included starter actions and icons you can import. Upload the SVG icons to your assets and import the sample action pack to use the starter actions. Then, add the icons of your choice and save. Next, upload the JSON configuration file using the “Import” button.Export/Import functionality: We've added the ability to export and import sets of custom actions. This feature is handy for users supporting multiple stacks as it allows for the easy transfer of actions from one stack to another.Effortless navigation with PaginationAnd also, experience effortless navigation with our new Pagination feature for our core CMS platform. This feature allows users to efficiently manage large content lists by organizing them into easily navigable pages. Instead of scrolling through extensive lists, you can now conveniently navigate through a specific number of rows per page. Pagination significantly enhances tasks like managing a vast library of articles or products.Contentstack MarketplaceDirect integrationsWe're thrilled to share some exciting updates from our Marketplace too! We now offer direct integrations with distinguished partners like Akeneo, Brightcove and Trados.Akeneo's integration is a game-changer, allowing content managers to seamlessly push their product catalog to their eCommerce platform. This offers a major boost in managing and optimizing digital assets.Our Brightcove integration allows customers to efficiently organize and measure their video assets and add them directly to their stack.The new Trados app allows you to translate your Release content and provide localized versions in multiple languages. Productivity enhancementsAdditionally, we've taken productivity to new heights by introducing our Content Calendar and Workflow Kanban app, now available in our Marketplace.Contentstack Automation HubRefine AutomationsWhat about the latest enhancements to Automation Hub? Now, you can refine your automation workflows with Contentstack's Action and Trigger events, which now include support for branches and releases.You can specify the branch and release to be used as part of a trigger or action, offering more precise control and flexibility in your automation processes. This is especially useful when managing extensive development workflows with multiple branches or coordinating the deployment of a set of entries and assets with Contentstack's releases.So, are you as excited about these advancements in our Automation Hub as we are? We can't wait to see how they will streamline your content operations!Contentstack LaunchExpand globally and efficientlyAnd last and of course not least - Contentstack Launch. Get ready to expand your business globally. Contentstack’s availability on Microsoft Azure EU infrastructure means organizations now have the opportunity to leverage powerful content management capabilities directly within the European Union. Contentstack Launch also has updated environments lists and environments settings screens for easy and efficient administration.Phew, that was a lot and we're not done! Let’s look ahead.In the Fall, be on the lookout for:Teams & TaxonomyUsers can effortlessly build streamlined content using powerful tools designed for grouping and categorizing content, enabling efficient organization and easy access to relevant information.Refreshed Help CenterLooking for documentation in a hurry? Our AI-integrated Help Center delivers how-to guides directly within the platform, eliminating the need to search externally and allowing you to focus on the task at hand.Basic Auth Password ProtectionExperience enhanced security with Basic Auth password protection for your Environments on Contentstack Launch, and enjoy the convenience of On-Demand Revalidation (ODR) for your NextJS sites.Composable digital experience platform (DXP)Contentstack's composable digital experience platform (DXP) offers a powerful, streamlined solution to achieve your digital goals. We look forward each month to highlighting our latest enhancements designed to help you get the most out of our platform and the digital experiences you are building.If you're an existing Contentstack user wanting to learn more about these new releases, please contact your Care Without Compromise™ team.Contact our team here if you're curious about how Contentstack can help your brand streamline content to deliver better digital experiences everywhere.Chalo!

Jul 25, 2023 | 4 min. read

Best practices with Branches

Content creation and management can be a complex process, especially for enterprises with large-scale content operations involving multiple teams. To streamline workflows and enhance collaboration, the Contentstack Headless CMS offers independent workspaces—known as Branches—for developers to work on content models, facilitating the safe development of new features or significant changes and enabling content editors to continue to work in production without any interruptions.Branches are independent copies of your content repository that allow team members to work on different content models simultaneously. Branches allow you to create multiple copies of your stack content. Every stack has a main branch by default. To create a new branch, you can fork a branch off of the main branch. When you create a branch for the first time, the main branch becomes your source branch. For all subsequent branches you create, you need to specify a source branch from which it will inherit data. These branches provide a secure and isolated environment where changes can be made, reviewed, and merged back into the main content model seamlessly.Real-world use casesAgile developmentBranches aligns perfectly with the Agile development methodology. Developers can create separate branches for a new set of related changes, enabling development to happen without disrupting content efforts. This approach enables continuous integration and seamless merging, ensuring a steady flow of updates and enhancements while maintaining stability.Isolated content developmentWith Branches, developers can work on specific features, campaigns, or updates in parallel, without the fear of conflicting with editor's production changes. Developers and content managers can work concurrently on different copies of the same content without data loss. This isolation fosters efficient development and minimizes the risk of errors or content discrepancies.Compare & MergeWith the Compare Branches feature, you can compare the differences between two branches. If you make changes to your content model in a branch and want to see what’s different, you can use this to do so. Once you are satisfied with your changes, you can integrate the changes in the current branch into another branch using the Merge Branches feature. You can merge two branches with the following strategies:Prefer base: This enables you to add changes from the compare branch to the base branch, and when conflicts arise, it keeps the changes in the base branch and ignores the changes in the compare branch. Anything present in the base branch but not in the compare branch will be kept.Prefer compare: This enables you to add changes from the compare branch to the base branch, and when conflicts arise, it keeps the changes in the compare branch and discards the changes in the base branch.Overwrite with compare: This allows you to completely replace the base branch with the changes from the compare branch. Anything in the base branch that is not present in the compare branch will be lost.Merge new only: This allows you to merge only the new changes from the compare branch to the base branch and ignores any modified changes in the compare branch.Merge modified with prefer base: This allows you to add only the modified changes from the compare branch to the base branch. When conflicts arise, it keeps the modified changes of the base branch and ignores the modified changes of the compare branch. Any new items in the compare branch are ignored.Merge modified with prefer compare: This allows you to add only the modified changes from the compare branch to the base branch. When conflicts arise, it keeps the modified changes of the compare branch and ignores the modified changes of the base branch. Any new items in the compare branch are ignored.Ignore: This allows you to ignore all changes from the compare branch, keeping the base branch as it is. This can be used to ignore a specific change or to ignore all changes and merge only specific changes.Key benefitsCollaborative workflowBranches promotes a collaborative content development process by enabling multiple contributors to work simultaneously on different aspects of a project. Teams can experiment, iterate, and refine their content models and test automated content updates without disrupting the main content repository.Efficient content reviewBranches provides a controlled environment for content model review and testing big scripted changes. Team members can review and provide feedback on the proposed changes before merging them into the main content repository. This ensures content quality and consistency while facilitating effective collaboration and knowledge sharing.Easy rollbacksIn case an issue arises or an experiment doesn't yield the desired results, Branches and Aliases allows for easy rollbacks without affecting the main content repository. Developers can maintain production content across different branches without affecting live website data. Aliases can always point back to the previously referenced content branch in case of unintentional content deployment. This feature provides a safety net, allowing developers to experiment and explore innovative ideas without fear of irreversible changes.Branches is a valuable feature that empowers developers and business users to work efficiently, collaborate seamlessly, and deploy changes confidently. By embracing best practices and leveraging Branches effectively, teams can unlock new levels of productivity, accelerate development cycles, and deliver exceptional digital experiences. Branches serves as a catalyst for engineering innovation, ensuring that businesses stay ahead of the curve in an ever-evolving digital landscape without disrupting editors in production.If you’re fascinated by the possibilities around streamlined development and innovation flexibility, we invite you to dive into our Branches documentation.