Must-have Tools For Consistent Content Creation

Headless content management should be enjoyable for both developers and content creators alike. Here’s a look at some of the latest tools that are helping JAMstack developers build great content creation experiences for their teams.

A better content management experience for everyone

“Developer experience” is one of the key benefits named when talking about the JAMstack. As discussed here, JAMstack is an approach to web development using client-side javascript with APIs and markup. It allows developers to use their favorite frameworks with headless content management systems (CMS) to build websites, freeing them from the limitations of template-based systems such as WordPress or Drupal.

But what about the content creation experience? After all, it’s not the developer who is the end user for the content management system. It's the content creator who needs a convenient way to access and create content. Unfortunately, this is where headless content management systems are lagging behind traditional ones.

WordPress, for example, offers an effortless editing experience through visual page builders, previews and instant updates. Headless content management systems, on the other hand, can be much more limiting. Many don’t offer page previews out of the box. In the case of a static site, editors have to wait several minutes until the site is built and deployed in order to see changes.

For headless to become a more widely adopted model, this needs to change. It’s difficult to sell a client on a site that will be difficult to use or frustrating to update. Fortunately there have been advancements in this area, with more to come in the near future. Here are seven tools for content management systems that developers can use to improve user experience.

1. Tina CMS

Tina CMS, a Forestry.io open source project, is still under development but has the potential to become a popular approach to editing JAMstack sites.

In reality, Tina is more of a content editing interface than a CMS. It allows visual, real-time editing on the page (including inline editing), of sites made with Next.js, Gatsby and Create React App. Content editors can open up the Tina dashboard directly on a page and start making changes.

The integration to make this magic happen is relatively simple. A developer needs to 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 changes are made and saved, they are pushed to the appropriate markdown files in the repo.

At the moment, in order to use Tina CMS outside of a local development server a cloud environment such as Gatsby Cloud is necessary. In the near future, Tina Teams will offer the ability to edit production sites as well, and provide additional features such as limiting permissions for certain users.

2. Stackbit

Stackbit is a promising project that aims to make getting started with JAMstack easier for both developers and content creators. With Stackbit it's possible to pick a template, SSG (Gatsby, Hugo, Jekyll or Next), CMS and repository and spin up a site in a few minutes. 

For a content editor, the allure is Stackbit’s real-time editing interface and previews. When accessing a site through its dashboard, Stackbit offers a popup window to edit the site in real time. Whatever options the connected CMS allows are available, which can include elements such as layout changes, color adjustments and disabling sections. An editor 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. Since the sites can be generated in multiple frameworks, they don’t necessarily have the typical look of a site made natively in a particular framework. However, the templates are turnkey and can be used without heavy customization.

Currently this editing and preview feature works with Contentful, Sanity and Git, with others on the way. This tool could become a convenient option in the future when there are more templates and services available.

3. Flexible template components

Many of the frameworks that can be used with a headless CMS are structured in components (such as React and Vue). A logical development for a headless CMS is to turn content into component sections that an editor can place on the page.

Sanity (pictured above) and Prismic allow developers to create custom components that can be manipulated from the CMS dashboard. In the case of Prismic, these components are part of the Slice Machine library that can be customized and extended. In Sanity they need to be built, though the great “Kitchen Sink” starter provides many example components.

4. Visual page editors

Visual editors take the flexible component model another step further, allowing editors to visually add and change components on the page. Magnolia CMS, for example, provides a visual editor where interactive areas can be established. In these areas an editor can select from a number of predefined components. The parameters that can be changed depend on the complexity of the implementation. 

This style of editor is the closest thing in the headless CMS world to a page builder. It’s a powerful tool that is currently only found in enterprise-level headless CMS, including Adobe, Bloomreach and Sitecore.

5. Blocks UI

Projects like Blocks UI could make visual page editing more accessible for static sites in the near future. Still very much a work in progress, Blocks UI is a visual editor that generates React code based on Theme UI. You can check out the demo here.

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, as well as a way to create pages through a visual editor. These advancements will help lower the barrier to entry for static sites.

6. Gatsby Cloud

Gatsby is a framework that is commonly integrated with headless content management systems. Gatsby Cloud is a service (with free and paid versions) that aims to make content creation with a Gatsby site more enjoyable and, especially in the case of larger sites, practical.

Gatsby Cloud builds pages and then connects with a CDN service like Netlify to deploy the site. It offers two main advantages: live previews and incremental builds.

Incremental builds solve the problem of long build times in static sites. While a small site can build in around three minutes, larger sites take much longer. This can be a hassle for an editor who needs to make a change on the fly, such as to fix a spelling error. Incremental builds only rebuild the pages that have changed, therefore drastically reducing build times.

The live preview feature solves the problem of page previews. In a traditional CMS like WordPress, previewing is an out-of-the-box feature that gives editors full control over how their pages will look. Previews in a headless CMS, on the other hand, are possible but usually require some developer effort to get them working.

Gatsby Cloud integrates with some popular headless CMS choices to provide real-time previews on production sites. Both Sanity and Contentful, for example, can be integrated with Gatsby Cloud in a few simple steps, adding an icon to the dashboard that opens up a Gatsby preview URL. Importantly, this preview works for production sites.

7. CMS with code-free previews

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 how the page will look. Though this preview server takes a couple minutes to get going, Forestry doesn’t require any special templates or code in a project to make this magic work.

Conclusion

As interest around headless content management and JAMstack grows, so are the amount of options for users. With many tools under development, soon developers will be able to offer great content creation experiences for their entire team.

Previously published at https://wearecapicua.com/seamless-content-creation-for-jamstack-websites/