Power Productivity: Previewing digital experiences in a headless environment

"It's important to understand why headless is so popular. When we look at history, people have always sought tools to record their thoughts and tell a story. This predates the internet and even CMSs, going back to typewriters and file cabinets. Then, tools emerged to visually write HTML. However, these were brittle and lacked control. As a result, CMSs were invented to separate the content from the markup. Even platforms like WordPress, Drupal and Sitecore technically separate content from markup, but they remain closely tied to deployments, leading to additional problems. The emergence of headless CMSs was made possible by advancements, notably the ability of systems to speak the web's native language and the rise of SaaS, which provided scalable systems without versioning or upgrade issues. Their goal was to free business teams from engineering backlogs. This led to defining content in a structured manner with strict controls. As a result, the interface became more of a form builder, where business professionals lost control over the presentation.

Consequently, authors, editors and marketers couldn't directly edit websites. For those responsible for a digital experience, making changes became challenging. Today, tools are being developed to provide structured content in the backend, ensuring stability for delivering digital experiences across channels. These tools are exploring ways to preview content without directly editing the production experience. The goal is to closely replicate the production environment before implementing changes, allowing for iterations before presenting to the audience."

"Given the structured nature of Contentstack's data, it's the native language of the web. This means any device connected to the internet, whether inside a metaverse, at a retail store, at a gas pump, on a wristwatch or an IoT device, can be updated synchronously or asynchronously from a backend system. If it's connected, we can likely preview it. Many Contentstack customers are doing this, publishing and previewing content for experiences in retail stores, on mobile devices, in virtual realities or entire virtual worlds like a metaverse."

"GraphQL is not just a technology but a method to finely tune and query data from a database. Unlike REST, which is URL-based and provides data based on the underlying architecture, GraphQL allows developers to define their data structure. They can create specific data types into one response, making a syntactical request and receiving a bespoke output tailored to their needs. This approach prevents over or under-fetching data, an issue with REST APIs that may provide unnecessary or insufficient information, leading to either wastage of bandwidth or multiple API calls for a single experience. With GraphQL, ideally, an app makes one request and receives all needed data. Many of our customers use a mix of both GraphQL and REST, with a preference depending on the use case, which is why we offer parity across both methods. Contentstack's preview capabilities aim to provide developers with tools to create intuitive experiences for editors to draft and present their content effectively."

"Previewing is a popular request from our customers, and we've worked to provide solutions. Let’s examine a demo. In Contentstack, we offer a feature called live preview, available for any viewport, from desktop to mobile and tablet, accommodating various resolutions. Users can not only modify text and images but also adjust the arrangement of data. This offers a degree of control previously unattainable in a headless environment. Users can now influence design elements, the composition and page layout. This grants editorial flexibility within certain bounds, allowing for a narrative tailored to a specific audience.

The innovation isn't just the ability to input data or images into predefined slots determined by a design or development team removed from the business side. It grants a second layer of control—the orientation, layout, composition and look—to the author, empowering them to craft a bespoke experience for their audience. Taking it further, we can change the orientation.

We're entering fall, so I'll save this version and add it to a new release called "fall campaign". In Contentstack, we have a concept of references, allowing us to view available references and optionally include them in our campaign. This ensures we don't push a webpage live missing any unpublished data from another entry. Our fall campaign includes the homepage version we created and other referred entries. I'll schedule this for deployment on September 18th. Now, I can visit our release preview experience, which is essentially a content calendar, to see our schedule.

Our fall campaign is scheduled for the 18th in the production environment. I can preview the entire site, reflecting the updates, not just one page. Although I added one page with dependency content, I could have added multiple entries, making the whole site undergo a refresh targeted for this date. Furthermore, I can schedule infinite changes for the future and compare these changes. I can target various environments, accommodating different versions of content across my locales and languages. Some scenarios require multiple concurrent production environments, either for specialized user cohorts, testing or other purposes, and they can cater to different languages, offering experiences across various locales."

"They are available. Release preview is in our marketplace, and you can search and install it. Live preview is a native feature of Contentstack. Both utilize our app SDK, which extends Contentstack, allowing access in your environment."