Content Creation for JAMstack Websites

Headless Content Management should be enjoyable for developers and content creators alike. Let's look at some JAMstack tools that help devs build excellent experiences.

How To Develop Better Experiences on JAMstack?

One of the main benefits of JAMstack is its developer experience. As discussed in our article about WordPress vs. JAMstack, it's an approach to web development by using client-side JS with APIs and markup. As a result, devs can use their favorite frameworks with headless CMS to build websites. Further, this frees them from the limitations of template-based systems. For instance, with platforms like WordPress or Drupal. 

After all, the developer isn’t the end user of the CMS. The content creator needs a convenient way to access and create content. Unfortunately, this is where headless content management systems are lagging behind traditional ones. For example, WordPress has an effortless editing experience. Visual page builders, previews, and instant updates are within its features. Yet, headless content management systems can be much more limiting. Many don’t offer page previews out of the box. In static sites, editors have to wait several minutes to see changes. This process needs to change for headless to become a more adopted model. Further, selling a client on a site that will be difficult to use or frustrating to update is challenging. There have been advances in this area, with more to come shortly. Here are some tools for CMS to improve user experience.

Content Creation with Tina CMS

Tina CMS, a Forestry.io open-source project, is still under development. Yet, it can potentially become a popular approach for editing JAMstack sites. Tina is more of a content editing interface than a CMS. It allows visual, real-time editing on the page -including inline editing- of websites. It's composed of Next.JS, Gatsby, and Create React App. Content editors can open the Tina dashboard directly on a page and start making changes. 

The integration to make this magic happen is quite simple. A developer must install the plugins and wrap components with the Tina Component. These components have markdown files providing their content via a static query. Tina connects to GitHub so that when you make and save changes, these get put on its markdown file in the repo. Currently, a cloud environment is necessary to use this CMS outside of a local dev server. Tina Teams will also edit production sites and provide extra features. For instance, the option of limiting permissions for specific users.

Seamless Content Creation for JAMstack Websites

Content Creation with Stackbit

Stackbit is a promising project. Its goal is to ease the JAMstack starting process for devs and content creators. Further, you can pick a template, SSG (Gatsby, Hugo, Jekyll, or Next), CMS, and repository and spin up a site in a few minutes. 

For the content edition, Stackbit's allure is the real-time interface and previews. Accessing a site through its dashboard offers a popup window to edit it. All options of the connected CMS are available. Among these choices are layout changes, color adjustments, and disabling sections. Moreover, editors can hit publish when ready or jump to the CMS dashboard if needed. 

From a development standpoint, one barrier to using Stackbit is the structure of the code. In there, the site generation can be in many frameworks. So, they don’t have the distinct look of a site made in a particular framework. Yet, its templates are turnkey and can use without heavy customization. This editing and preview feature works with Contentful, Sanity, and Git. If more templates are available, this could be a convenient tool.

Flexible Template Components on JAMstack

Many frameworks able to use with a headless CMS are structured in components (such as React and Vue). For headless CMS, a logical development is turning content into component sections. With this structure, an editor can place said components on the page. Sanity and Prismic allow devs to create custom components. Further, they're able to manipulate these from the CMS dashboard.

Prismic components are part of the Slice Machine Library. This library can be customized and extended. Yet, in Sanity, you need to build the components. Yet, the excellent Kitchen Sink starter provides many example components.

Visual Page Editors on JAMstack

Visual editors take the flexible component model further. As a result, they allow editors to add and change components on the page visually. Magnolia CMS provides a graphical editor where devs can establish interactive areas. An editor can select from many predefined elements. The parameters can be changed depending on the complexity of the implementation. This editor style is the closest thing to the headless CMS world. It’s a powerful tool currently only found in enterprise-level headless CMS. Among these enterprises, there is Adobe, Bloomreach, and Sitecore.

Content Creation with Blocks UI

Projects like Blocks UI can make visual editing more accessible for static sites. Still a work in progress, Blocks UI is a visual editor that generates React code based on Theme UI. Blocks UI has the support of Gatsby, a framework for static sites and PWAs. On Gatsby’s roadmap is a dashboard to manage configuration and plugin changes. Also, there's a way to create pages through a visual editor. These advancements will help lower the barrier to entry for static sites.

Content Creation with Gatsby Cloud

Gatsby is a framework commonly integrated with headless CMS. Its Cloud aims to make content creation with a Gatsby site more enjoyable. This feature becomes relevant for more significant sites with free and paid versions. Also, it integrates with popular headless CMS to provide real-time previews on production sites. Both Sanity and Contentful, for example, are combinable with Gatsby Cloud. Most important, this preview works for production sites. As a result, users can build and connect pages with a CDN service like Netlify to deploy the site. It offers two main advantages: live previews and incremental builds.

Life Preview on on JAMstack

This feature solves the problem of page previews. In a traditional CMS like WordPress, previewing is an out-of-the-box feature. This tool gives editors complete control over how their pages will look. Yet, previews in a headless CMS usually need developer effort to get them working.

Incremental Builds on JAMstack

These solve the problem of long build times in static sites. While a small site can get built-in around three minutes, more significant sites take much longer. This can be a hassle for an editor who needs to change on the run, such as fixing a spelling error. Incremental builds only rebuild the changed pages, thus reducing build times.

Code-Free Previews on JAMstack

Forestry.io deserves a special mention for having a nearly effortless preview feature. While editing in the CMS, content is visible in its styled format on the right-side panel. Additionally, an editor can fire up the preview server to get an even more accurate view of the page's appearance. This preview server takes a couple of minutes to get going. Yet, Forestry doesn’t need unique templates or code in a project to make this magic work.

Conclusion

Interest in Headless Content Management and JAMstack grows. With it, of course, so does the number of user options. There are so many tools under development. These tools will allow devs to offer excellent content creation experiences for teams.