10 Headless CMS Options for your JAMstack Website

10 Headless CMS Options for your JAMstack Website

Throughout 2019 the headless CMS trend showed no signs of slowing. In 2020 you can expect the trend to grow beyond buzzword popularity as more and more brands turn to headless options for their content management.

By Nebojsa Radakovic
March 31, 2020

We can’t say that headless CMSs, and JAMstack for that matter, are all the rage now in web development but they are pretty close to becoming mainstream tech. A serious contender to LAMP stack dominance if you will. All thanks to amazing ideas and work that’s done and already investor-recognized by the first among equals Netlify and Gatsby.

When we talk about static websites, the first thing that comes to mind is a bunch of web pages coded using HTML and CSS. Just plain text and graphics-based interface with no interactive features and real-time processing whatsoever to facilitate the visitors.

Fortunately, that’s not the case for static websites of today.

Static websites have evolved to embrace innovative technologies and today they can do things such as handling real-time requests, processing payments, managing customer accounts, carrying out full website searches, and a lot more. That’s why we don’t call them static anymore, we now call them JAMstack websites.

OK. This might be an overstatement considering the discussions and debates we currently have about the terms we use on a day-to-day basis.

Why Go the JAMstack Route?

JAMstack: Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup. - Mathias Biilmann, Netlify co-founder.

With the advent of JAMstack, we now don’t need to divert our focus on specific web technologies in terms of operating systems, web servers, frameworks, database development, management, and backend development. JAMstack bridges the gap of functionality between static and dynamic websites while keeping the key advantages of a static website intact.

JAMstack has brought a completely refreshing method of building websites as well as apps that delivers enhanced development, maintenance, and operational efficiencies not only for the enterprise sector but individuals as well.

Headless CMSes, What Are Those?

Traditional CMSs like Drupal and WordPress are hosted and served with the website every time a request for a page is made. This basically means that the traditional CMSs are built with back-end and front-end bundled into a single application that is web-first.

Headless CMS, on the other hand, decouples content management from the presentation layer.

What is meant by headless CMS?

A headless CMS is a back-end content management system separated from your front-end presentation layer. This means that your content management functionalities (like creation, management, and storage of content) are separate from your front end allowing you to deliver content beyond websites and apps. It allows you to repurpose your content from multiple front-ends making them a perfect fit for JAMstack builds.

With so many brands focusing on repurposing their content on multiple front ends, the growing demand, and the number of headless CMS solutions, should not come as a surprise. Especially when you look at all the benefits a headless CMS brings to a table:

  • Hosting is delivered as Software as a Service (SaaS). And since there is nothing to maintain, security is also delivered as SaaS.
  • Most headless CMSs have an SLA (service-level agreement) in place which gives you peace of mind in terms of the uptime for example.
  • Content exists as a separate component altogether and is used when needed through an API request.
  • Headless CMS gives you complete control over how your content will appear and presented. No forced reliance on themes and templates.
  • You can reuse and repurpose the same content over and over again.
  • It doesn’t matter what programming language or framework you are using, headless CMS integrates with any codebase.

Does Your Business Need Headless CMS?

Honestly, no one but you can answer that question. Right now headless CMSs are considered future-proof mainly because of a clear distinction between the content and presentation of it.

However, only understanding your short-term and long-term content goals can help you choose which content management model will best serve your business.

With over 50 different JAMstack projects under our belt what we can do for you is share our experience with the best headless CMSs we used so far. So, treat the following as such ie pros/cons we’ve been able to muster up from the builds we did and problems we’ve come across.

If you don’t have the time right now to check every CMS we’ve reviewed, we’ve prepared a FREE DOWNLOADABLE 📄 pdf file of this post for you. Scroll down to the end of this page to get your free copy.

Let’s dive in.

Sign up for our JAMstack newsletter!

Get our EXCLUSIVE web development case studies in your mailbox!

Contentful

Reviewed by:
  • Thom Krupa

Contentful is an API-centric headless CMS amazingly flexible from a developers' perspective but also fairly easy to use and understand for average users. It is one of the most popular headless solutions available right now, but does it suit well for everyone? Let's find that out.

  • CMS type: API
  • Website: contentful.com
  • Founded: 2010
  • Total raised: $44.8M
  • Company size: 201-500 people

Last update: March 2, 2020

Contentful Overview

I want to show you how Contentful looks inside and tell a bit about the best and the worse part of it. Of course, keep in mind that’s just my opinion based on the projects we worked on.

User Interface

The Admin panel looks very clean and modern. It’s quite intuitive. In a lot of cases, you can tailor it to your exact needs. Let’s dive in and check what’s inside the main tabs.

If you create a new project you will see the welcome screen that contains a few useful links every Contentful-beginner should check. From the developer perspective, the most important ones are documentation and shorthands to SDKs. It’s worth mentioning that Contentful provides SDK for 8 platforms: JavaScript, PHP, Android, iOS, Java, Python, Ruby, and .NET.

The next tab is the Content Model, that’s a place that gathers all Content Types. For example, Blog Post would be one Content Type that contains a few different Content Fields like title, description, date, reference to the author, rich text content, tags, etc.

Each Content Type can have up to 50 different fields, full list of available fields you can check on the screenshot below:

Micro space allows you to have up to 24 types. That should be more than enough for a simple marketing website or blog, but might be not sufficient for a bigger project. Each type can contain up to 50 different field types.

Media and Images API

You can upload and store pretty much every popular file format like image, video, pdf, spreadsheet, markdown, etc. On top of that, thanks to the Contentful Images API, you can manipulate any image uploaded to your Space. Resize, crop, decrease quality to optimize the size. And even change the format to JPG, PNG, and/or WebP.

Sneak Peek of the UI

To give you a better insight into the Contentful UI, take a look at the short video below showing how easy it is to add a new post.

Loading Video

Loading Video

Apps and Extensions

As a result of its popularity, Contentful gained a lot of integrations with outside tools. The most useful one, in my opinion, is Algolia integration, which simplifies the sync of content between those tools.

Right now Contentful is not only a great tool for blogs or simple marketing websites. Thanks to the variety of integrations with outside apps, you can use Contentful even as a CMS for your e-commerce website. Keep the main content of your products inside CMS and connect every product directly with your e-commerce app.

You can find more interesting examples in Contentful Marketplace. Unfortunately, most of the integrations cover only basic configurations. However, it can simplify developers’ work very quickly and that is always a good start to something great.

Support

Contentful handles support through the ticket system. Tickets from Basic (free) plan users may not be processed and usually are referred to check available documentation, FAQ and lively community. Tickets from On Demand & Enterprise Customers are prioritized.

Pricing

You’re starting with one free micro space. It includes 24 content types and within those types you define the structure of your website. Additionally, you get up to 5000 records. Think of record as an instance of a content type. 2 locales in case you need multilanguage and 10 free users to manage all your content. It has everything to build a simple website or a blog. It might get quite pricey if you want to upgrade. For \$879/month you get up to 48 content models and 10 locales.

What Do Clients Say?

We used Contentful for multiple projects, one of the most successful is SEOmonitor.

Non-technical members needed to be able to update the website without the hassle of setting up git or writing markdown files. Luckily, we found out about Netlify and Contentful and it seemed like a perfect fit for our existing publishing flows.

Alen-Jelco TodorovGrowth & Marketing, SEOmonitor.com.

Check the full SEOmonitor case study here.

Pros and Cons

Contentful is a stable product. Battle-tested by a lot of companies. It has a good position in the market. Might be quite pricey for small startups, but should be a good choice for medium and large businesses. Below are some pros and cons we found out during the development of multiple projects - from small to larger ones.

  • Well written documentation, guides, and use-cases. 8 official SDKs for different programming languages.
  • Images API for modifying / optimizing images.
  • Great official gatsby-source-plugin with native gatsby-image and Contentful Images API support.
  • Easy to set up and configure multi-language.
  • If you are not using Gatsby but still want to take advantage of GraphQL, Contentful offers both REST and GraphQL APIs.
  • Advanced webhooks configuration.
  • Contentful gives you a lot of freedom in terms of structure and component organization. It can be harmful for bigger projects if you don't do it properly and thoughtfully from the very start.
  • Not easy editing of multi-language content in case of more locales than 3, UI starts to look a little bit messy.
  • No easy way to import large chunks of data - you need to write your custom script that will do that through the API.
  • No easy way to merge Space Environments - you need to write a custom script in Contentful Migration DSL, test in the sandbox and apply to production. In some cases it's easier to create a new environment and copy changes manually.

Not sure if Contentful is the right solution for your project?

We can help. Schedule 1-on-1 talk with us and let us help you find what works best for your business.

Schedule a demo

Storyblok

Reviewed by:
  • Arkadiusz Gorecki

When you open the storyblok.com website, you can see an announcement 'The Only Headless CMS with a Visual Editor'. From the start, you can see that Storyblok is not another 'better tool' for your website. What they have is something no other tool has, the visual editor.

  • CMS type: API
  • Website: storyblok.com
  • Founded: 2015
  • Total raised: $2.5M
  • Company size: 11-50 people
  • Active Projects: 15,000+

Last update: March 1, 2020

For the sake of clarity, it doesn’t mean it’s the best headless CMS available right now, it just stands out. Remember, always use the right tool for the job.

User Interface

Let’s start with its core feature - visual editor. Please take a look at the video below to see its power.

Loading Video

Loading Video

Where Storyblok Is a Good Fit?

Before we dive into Storyblok itself let’s stop for a while here and explain where, and where not, to use it.

Visual Editor, as the core of Storyblok, has its pros and cons. For some websites, it can be a blessing, but in other projects, it can cause headaches.

Firstly, Storyblok is a great choice for editors. So, in case your website, and business, depend on frequent content changes you’ll need a tool that can help you build landing pages quickly and preview how the website/pages look like before going live. If that’s the case, Storyblok is the right tool for you. However, if you need a CMS to work as a database for your website, in all honesty, look for a different solution.

Storyblok Overview

Now, when we have some clear vision, where we’d be using Storyblok, let’s dive into it. I’ll create a project to help you understand some of the common Storyblok’s concepts.

What Options Do We Have to Build Models?

Please take a look at the screenshot below, to see all available types of models we have at all times.

Besides the standard ones, like Text, Number, Image or Assets, there are a couple of non-standard ones, like Plugin. In Storyblok you can use custom fields, which basically allows you to use more robust fields like “color-picker”, “vimeo”, “fontawesome icon selector” that are created by Storyblok team, in your own plugin built for a specific use case (I’ll cover that later).

Now, let’s create some models, shall we:

Loading Video

Loading Video

and the sneak peek of one of our custom plugins:

Loading Video

Loading Video

Datasources - Whenever You Need it

In the previous video about model creation., for the “button” component, I used a “single-option” field type with the custom datasource for the “color” field. What are those datasources?

In general, whenever you don’t want to repeat yourself when adding an available option to a field type - you can use a datasource for it. In this particular example, I’ve defined a datasource with available button styles. So, I can use this datasource whenever I want and update it whenever I want without worrying if I forgot to make changes somewhere else. All linked field types will be updated at the same time.

Examples when datasources comes handy:

  • for repeatable values (used in many fields) like available colors, categories, etc.
  • to allow editors to map language codes with full names:

Need More Power to Publish?

Storyblok, like any other headless CMS, has a built-in option to trigger a webhook after publishing an entry. It means, your website can be automatically rebuilt whenever you made changes. Besides that, Storyblok also offers something called “Tasks”. You can basically manage the website, where you manage the content.

As you can see in the screenshot above you can have multiple webhooks (like in this case) to trigger different stagings. In the future, you’ll be able to run a Lambda function from there as well.

Apps - to Improve Your Workflow

Storyblok allows you to expand your editorial workflow with some custom apps. You can install extensions like previously mentioned Tasks, or S3 Backups, or Releases to combine multiple changes into one. You can read more about available apps here.

Pricing and Features

Is Storyblok affordable? Does the availability of the features make sense?

Let’s check a pic first:

  1. Free tier - good for first usage. You have everything you need to test it.
  2. Basic - most important features here: Autosave, Datasources, Responsive Preview. It makes sense to upgrade from free if you really want to use the Storyblok.
  3. Advanced - adds Custom Roles, S3 Backups, Language Export/Import and ability to replace assets. If your website (or business policy) doesn’t need those you can skip this section.
  4. Premium - all aboard. Scheduling and Releases - cool feature if you want to publish many changes at once. Content Staging - you are working on different changes at the same time? Shared components - create one base of components and share it among many Spaces (yes, build many websites from one source of component, cool ha)
  5. Enterprise - 99.9% SLA, 3TB traffic and 30+ users.

It is important to mention that different Apps require different plan types for you to be able to work with them. Some can be used with Basic subscription while others can be used only with a Premium subscription.

Support

You can contact support using a chatbot on their website. Support team responses are fast. We’ve needed them in a few situations and can’t complain about the reaction times.

What Do Clients Say?

Wherever we used Storyblok we got nothing but good reactions. Same with from Avenues team.

Bejamas stood out as experts on the JAMstack products that are available and recommended Storyblok CMS which was not on our radar previously. That kind of guidance, approachability and subject matter expertise is what we were looking for. I am very happy with our decision.

Dmitry TernerWebsite Manager at Avenues

Check the full Avenues: The World School case study here.

Pros and Cons

  • Great editor experience provided by visual editor
  • Ability to extend standard field types with custom plugins
  • Ability to extend the editorial workflow with Apps
  • Support for multilanguage / internationalization
  • Ability to copy/paste elements in Editor
  • Official gatsby-source-storyblok plugin is not very well supported. There is no official support for gatsby-image.

Not sure if Storyblok is the right solution for your project?

We can help. Schedule 1-on-1 talk with us and let us help you find what works best for your business.

Schedule a demo

Sanity

Reviewed by:
  • Michal Zielinski

Sanity goes beyond conventional content management platforms with its versatility. Radical separation of the API from the user interface makes for endless possibilities of customization. Marketing itself as flexible, Sanity can be used for much more than conventional web experiences.

  • CMS type: API
  • Website: sanity.io
  • Founded: 2016
  • Total raised: $3.5M
  • Company size: 11-50 people

Last update: March 5, 2020

The Studio

Built with popular React framework, open-source Sanity Studio makes for the front-end layer of the platform. The developer gets complete control over the workflow and appearance.

Loading Video

Loading Video

Extend, Adjust, Repeat

Creating custom experiences with Sanity is a breeze. The developers can build their own solutions from scratch or use existing tools such as plugins, desk structure builder or dashboard extensions.

Beyond just extending the structure of the user interface itself, you can extend the very content models by creating your own - such as map pins to help editors work with location data more easily.

Loading Video

Loading Video

Integration

Sanity offers great REST and GraphQL APIs for you to work with your content. With an integrated CDN and an asset pipeline, there isn’t much else a developer could ask for.

With Great Power Comes Great Responsibility

With Sanity you get a blank sheet - what you do with it is up to you. With the tool being so extendible in some cases it might be excessive. For traditional, simple web experiences generally, you would want to go the simplest route and consider choosing a tool that is easier to integrate and work with.

Unrestrained access to the source code also has its downsides. Adjusting and maintaining the Studio is usually more time-consuming than with other solutions. Keeping track of all the source files as well as ensuring the Studio stays up-to-date gets increasingly difficult with large projects.

Loading Video

Loading Video

Support

Sanity is very involved with supporting developers using the platform. Their team is always responsive and helpful in the community Slack workspace. With great documentation and well-maintained open-source tools to work with the product, there isn’t much that could be improved on that front.

Pricing

With a generous free tier and a pay-as-you-go pricing, scaling with Sanity is much easier than with other platforms. Being able to only pay for consumed resources will help businesses avoid unnecessary fees.

What Do Clients Say?

Flexibility and customizability without compromising performance, that come with Sanity, is something most of our clients mention as the biggest pro for this headless CMS.

Bejamas exceeded our expectations and I wouldn’t hesitate to work with them again. The JAMstack combination of Gatsby, Sanity, and Netlify is cool. It’s modern and robust, but also a fast and effective solution for all of our needs.

Simon JonesCTO at Just Technologies

Check the full Just Technologies case study here.

Pros and Cons

  • Highly customizable
  • Adaptable and versatile - can have different use cases beyond traditional web experiences
  • Above average support
  • Good number of ready to use plugins and extensions
  • Well-written, comprehensible documentation
  • Flexible, pay-as-you-go pricing
  • Requires more maintenance than other platforms
  • Development is more time-consuming in comparison with other services
  • No out-of-the-box support for user permission management through a GUI
  • Lacks a more advanced webhook integration tool - integrating Sanity with third-party services can be more difficult than with other platforms

Not sure if Sanity is the right solution for your project?

We can help. Schedule 1-on-1 talk with us and let us help you find what works best for your business.

Schedule a demo

Forestry

Reviewed by:
  • Thom Krupa

Forestry is a Git-backed headless CMS. It allows you to easily edit all flat-file based static sites and it works with every popular static site generator. Technically, it is a layer on top of Git and it’s interacting directly with the files in the repository. Every action that happens in the CMS like editing, creating and deleting is an action taken as part of the Git workflow.

  • CMS type: Git-based
  • Website: forestry.io
  • Founded: 2016
  • Company size: 11-50 people

Last update: March 5, 2020

Forestry Overview

Forestry is definitely one of the most popular commercial Git-based CMSs. If you are not sure what’s the difference between API and Git CMS, we wrote an article explaining the details.

User Interface

The dashboard is a bit rough, it doesn’t tell you much besides a nice welcome message. There is room for improvement for sure. For example, it would be nice to see links to docs or code examples.

Customizable Sidebar

The left side is the Sidebar you can adjust to your needs. You can create a section, name it as you wish and select what links should be there. That’s one of my favorite things with Forestry, simple and very customizable via settings.

Take a look at the short video below how we used Forestry to manage our very own website.

Loading Video

Loading Video

Support

Free plan support depends on availability. Priority support (median time to close issues under 8 hours) starts with Pro plan. In reality, we have had a couple of issues previously and needed a fast response. Surely enough their support team helped us out immediately.

Pricing

The personal plan starts from \$0/mo and it is a perfect choice for smaller projects. You can have up to 3 websites and up to 3 users per 1 website. It gives you full access to the CMS, in opposition to the most API-based CMSes there is no limit in terms of the amount of content or types. Only limits here are the technical ones in your Git provider.

In case you need more control over your organization or if you want to manage more than 3 websites you should look at the Starter plan. For the $29/mo you have access to organization account and can have up to 5 websites ($9 per additional site).

What Do Clients Say?

We used Forestry together with Vercel and Gatsby for this website. That should be a good enough pro on it’s own.

I love that I can edit content in Visual Studio Code and push changes through git. At the same time, we have a nice CMS editor for our marketing team.

Thom KrupaCo-founder at Bejamas

Check out a different case study for our own website here.

Pros and Cons

It’s not a coincidence we picked Forestry as the main CMS for the Bejamas website. Thanks to its simplicity and native Git integration it’s a perfect choice for a marketing team of editors and developers.

  • Very simple setup and easy configuration if you already use flat files as a content source like markdown or yml.
  • Being on top of Git means you can remove it and still have your site working.
  • No limits in terms of the amount of content or requests.
  • Instant Previews server.
  • Forestry doesn't support multiple media folders. It might get a little bit messy when you have large amount of images in one folder.

Not sure if Forestry is the right solution for your project?

We can help. Schedule 1-on-1 talk with us and let us help you find what works best for your business.

Schedule a demo

DatoCMS

Reviewed by:
  • Arkadiusz Gorecki

  • Thom Krupa

DatoCMS is built by an Italy-based agency Lean Panda. It started in 2015 and supposed to be a CMS for internal usage for them and their clients. It quickly became popular for a reason, they are focus 100% on real problems that occur in web dev agency.

  • CMS type: API
  • Website: datocms.com
  • Founded: 2015
  • Company size: 2-10 people

Last update: March 9, 2020

Dato CMS Overview

DatoCMS is fully bootstrapped, headless CMS, you might never heard off. Still, Stefano Verna, CEO at DatoCMS, has shared with us that so far more than 2,500 customers use and pay for the CMS. A pretty impressive result considering they don’t spend a ton of money on advertising and marketing.

Dato offers exactly what you’d expect from a headless CMS. A plethora of default fields to start with, the ability to expand them with Plugins, making this CMS something more than just a CMS for simple websites.

Dato supports localization, user roles, GraphQL API (even on Free plan - more about it later). It integrates well with many popular static sites generators like Gatsby, Hugo or Next.js.

One of the advantages of Dato is its clear UI. It looks so simple and feels effortless it may be too simple for some users. Don’t be put off by it, you can easily extend the UI by a quite large free plugins library.

User Interface

As already explained, Dato has a simple UI, ease of integration with all the popular static site generators, awesome roles/permissions system and third-party plugin customization option.

Take a look at the screenshots of UI below:

Adding New Post

Let’s see how looks the process of managing content.

Loading Video

Loading Video

Support

Support priority comes with the plan you are choosing. For example, 24/7, 24h response time comes with their ULTIMATE plan while the FREE plan basically has support on their availability.

Pricing

DatoCMS plans start with a free Developer option. It includes 30 models that can be used to define articles, products, categories, and so on for a simple website. You can use up to 2 locales, 2 user roles, and up to 2 users - you invite an additional collaborator. It provides you with everything you might need to build a simple website or a blog but it might be not enough for a larger content management team.

You can upgrade to a Professional plan for €99 per project/month which includes 50 models, 5 locales, 10 users and 5 roles.

Pros and Cons

  • Easy onboarding, you can create a simple demo project and connect it with Github and Vercel or Netlify.
  • Very easy to set up and user-friendly Staging environment.
  • A lot of free plugins and integrations with 3rd-party apps like Gatsby Cloud or Commerce Layer.
  • Easy to configure multi-language support.
  • Nice SEO preview out-of-the-box.
  • Revision history.
  • No easy backup import and export. There is a way to handle it through custom script and content management API, but it's not very user-friendly.
  • No responsive interface, no mobile app

Not sure if DatoCMS is the right solution for your project?

We can help. Schedule 1-on-1 talk with us and let us help you find what works best for your business.

Schedule a demo

Prismic

Reviewed by:
  • Arkadiusz Gorecki

  • Thom Krupa

Prismic is another headless, API-first, hosted, proprietary CMS we found easy to work with. While their UI with a visual editor, custom type builds, multi-language support and full revision history features seam awesome for users it does take time, development time, to get it there.

  • CMS type: API
  • Website: prismic.io
  • Founded: 2013
  • Company size: 30+ people

Last update: March 13, 2020

Prismic Overview

The first thing that you’ll notice after login to the projected dashboard is a really clean UI. It almost looks like the Prismic team wanted to make the interface so simple where you can go to pretty much any option in less than 3 mouse click.

Prismic offers “almost” complete editor experience. It supports localization, many default fields to create models and scheduling. You can combine many changes in one release and publish them all at once. Contrary to what many probably think this feature is not so common, especially as a “default” option.

Comparing to previous headless CMS, Prismic is not so advanced. For example, it doesn’t offer custom Plugins to expand the default option. I also had some strange feelings about the relations, while working on our first projects with Prismic. Coming from other CMSs we had some concerns while designing a “perfect” editor experience. It turned out it was just a matter of understanding the default mechanics.

Pricing

Prismic’s pricing model is quite different than for other CMSs. You pay based on the number of user accounts. The free tier allows you to have just 1 user. I think it’s perfect for developers and projects with small editors team. For $7/month you can increase users to 3 and for $15/month you can have up to 7 users.

If you need more users, user roles, SLA and better support you can upgrade to Medium ($100/mo) or Platinium ($500/mo) plan.

There are no hard limits in terms of storage, bandwidth nor API limitations. Prismic asks you to use it “fairly normal”.

Pros and Cons

  • Handy document tagging system makes it easier to search and group content.
  • Gatsby-source-prismic in version 3 improves Live Preview and Gatsby-image support.
  • Native integrations with Shopify and Magento.
  • No option to make fields mandatory.
  • No option to extend rich text editor.
  • No backup feature.

Not sure if Prismic is the right solution for your project?

We can help. Schedule 1-on-1 talk with us and let us help you find what works best for your business.

Schedule a demo

NetlifyCMS

Reviewed by:
  • Bruno Aderaldo

NetlifyCMS is an open-source, free to use content management system that you can add to any static site generator. All the content is stored in files added to your repository, next to your codebase.

Netlify CMS Overview

Since it acts as a wrapper for the Git workflow, you can use it with GitHub, GitLab or Bitbucket API. This approach provides many advantages, such as:

  • Fast, web-based UI: With rich-text editing, real-time preview, and drag-and-drop media uploads.
  • Platform agnostic: Works with any static site generators.
  • Straight-forward installation: Add two files to your site and hook up the backend by including those files in your build process or linking to their Content Delivery Network (CDN).
  • Easy authentication: Using GitHub, GitLab, or Bitbucket and JSON web tokens.
  • Flexible content types: Specify an unlimited number of content types with custom fields.
  • Fully extensible: Create custom-styled previews, UI widgets, and editor plugins.

Get Started

Following the documentation you can either start with a template or add it to an existing website.

  • The quickest way to get started is with a template, you can find some featured templates and deploy to Netlify, giving you a fully working CMS-enabled site with just a few clicks.
  • The other way is by adding it to your site. Choosing this option you will need to do a couple of steps manually. You will need to create the config files using the App File Structure explained in the documentation along with other concepts and the necessary steps to finish installation and configuration.

Assessing the CMS

Ok, so your CMS is now fully configured and ready to access.

If you set your registration preference to “Invite only,” invite yourself (and anyone else you choose) as a site user. To do this, select the Identity tab from your site dashboard, and then select the Invite users button. Invited users receive an email invitation with a confirmation link. Clicking the link will take you to your site with a login prompt.

In case you left your site registration open, or you are returning after confirming an email invitation, you can access your site’s CMS at yoursite.com/admin/.

Interface

As I mentioned earlier, Netlify CMS has a very simple and friendly user interface. You have just three tabs.

Content Tab

On the Content tab, you will find your Collections (content types), for example, Blog, Pages, Services, Testimonials.

Unfortunately, there is no way to create collections through the interface, just by editing config.yml file. All editable content types are defined in the collections field of your config.yml file, and display in the left sidebar of the Content page of the editor UI.

Workflow Tab

On the Workflow tab, you can handle the status of your entries, for example, posts. It’s a very cool option for content creators and when your content workflow demands for posts to be reviewed before it goes live.

By default, all entries created or edited in the Netlify CMS are committed directly into the main repository branch. You can enable the Editorial Workflow with the following line in your Netlify CMS config.yml file:

publish_mode: editorial_workflow.

When using the editorial workflow, content editors can create and save content without publishing it to a live site. Deploy preview links provide a way to view live content when it has not been published, provided that you’re using a continuous deployment platform to provide “deploy previews” of your unmerged content.

Media Tab

Media tab allows you to upload all media such as photos, videos or documents to be used on your entries

Take a look at how the process of adding new content and previewing it on a staging branch looks like.

Loading Video

Loading Video

Editor

On the left side, you can see all widgets (fields) you created for your content types.

Widgets define the data type and interface for entry fields. Netlify CMS comes with several built-in widgets but they’re always adding new ones.

At the moment Netlify CMS has 16 widgets built-in widgets: Boolean, Code, Date, DateTime, File, Hidden, Image, List, Map, Markdown, Number, Object, Relation, Select, String, and Text.

That’s cool, but I need a custom widget? No worries, you can always create your own.

A Couple of Cool Beta Features

As many of the open-source projects, NetlifyCMS doesn’t have all the features other paid products have, but the Team is constantly working on improvements. In case you miss something, you can check if it’s not in “beta features”. You can find there things like GraphQL API, new widgets like “List Widget” or many other cool backend improvements.

Pricing

Netlify CMS is a free and fully open-source CMS. So you can manage your content in an easy way with a friendly UI, rich-text editor, and real-time preview, unlimited content types and the best part: you don’t have to pay for it.

Support

As already mentioned Netlify CMS is open-source CMS supported by a growing and helping community. They do have pretty good documentation but if you have issues on installation or the usage of it the only way to get help is on their community channels:

  • A live community chat for all Netlify CMS related things on Slack.
  • Ask and answer questions at the designated Netlify CMS channel in the Netlify community forum.
  • At GitHub Issues, you can report bugs, request features and comment on existing issues.

When It Should Be Used?

Netlify CMS can be used on pretty much anything including large projects when you are either a content creator or have to manage a team of content creators. The CMS gives your team the ability to review/preview the content changes before going live. And you are able to manage entries status in Editorial Workflow mode and update content while seeing the preview in real-time. But it works best for the smaller ie fewer pages projects.

Pros and Cons

  • Can be used with any static site generator
  • Real-time preview
  • Flexible and unlimited content types with custom fields
  • Fully extensible - enables you to create custom-styled previews, UI widgets, and editor plugins
  • Large and engaged community
  • Open source
  • You can follow which features the community is working on
  • Documentation can be hard to follow sometimes
  • There is no way to create content types through the interface - just in `config.yml` file
  • In some cases you will need a lot of configuration to work well. Example: a few plugins and some code are needed for gatsby-img or markdown to work
  • No responsive interface, no mobile app
  • It would be nice to be able to schedule posts to go live

Not sure if NetlifyCMS is the right solution for your project?

We can help. Schedule 1-on-1 talk with us and let us help you find what works best for your business.

Schedule a demo

Strapi

Reviewed by:
  • Gerald Martinez

In case you want to have full control over CMS, be independent of company policies, restrictions, etc. take a look at Strapi. It’s an open-source Node.js headless CMS you can host on your own server, with the ability to add custom plugins allowing you to customize it even more.

  • CMS type: API
  • Website: strapi.io
  • Founded: 2010
  • Total raised: $4M
  • Company size: 11-50 people

Strapi Overview

Strapi is a Headless CMS build in Node.js that allows you to use a database of your choice. Currently, it supports PostgreSQL, MongoDB, SQLite, MySQL, and MariaDB. It’s not a secret Strapi position itself as a WordPress alternative.

Support

They have a growing community on Slack, Github and Stack Overflow. Whatever question you may have, you can ask there and their more than helpful community will jump tp answer.

Pricing

Strapi, in its basic version, is 100% free and open-source. However, they do have an enterprise beta program as well but it’s not clear as to what’s inside and what’s the price.

Pros and Cons

If you want to have full control to manage your headless CMS without restrictions Strapi is a good candidate. You can choose between different database options and host it on your own servers. Keep in mind it’s still in beta and might not be production-ready yet.

  • Even though Strapi is an open-source CMS, it is VC-backed. It means Strapi team has money to work full time on the product.
  • RESTful and GraphQL API support.
  • Fully customizable
  • Still in beta. Some bugs and stability issues may occur (they released stable version in May but we haven't tested them since then).

Not sure if Strapi is the right solution for your project?

We can help. Schedule 1-on-1 talk with us and let us help you find what works best for your business.

Schedule a demo

Headless WordPress

Reviewed by:
  • Nebojsa Radakovic

For most new or existing businesses WordPress is a somewhat obvious choice. Not surprisingly since WordPress is/was the number one CMS for developers and non-developers alike for 15 years. However, a new emerging trend ie running a headless Wordpress is slowly taking over traditional builds. There are a couple of clear benefits to it which many are simply not aware of. To help us demystify headless WordPress we talked with Daniel Olson from Shifter, a serverless-static WordPress hosting solution.

What is a headless WordPress?

It’s WordPress without a head, of course! Like most CMSs of this era, WordPress came with a theming engine built-in. The theming and templating part of the application is the head and it is what we see as end-users or site visitors.

With headless, WordPress is just another API endpoint. This is part of the reason why I disagree with the JAMstack community who says that WordPress is not JAMstack. There are plenty of NodeJS based CMSs out there and they all require servers or a hosting location of some sort. Same with WordPress except it’s PHP under the hood. What if Contentful was written in PHP? As a user, it’s just an API endpoint. Same as WordPress except you can also self-host it or use a SaaS provider that offers WordPress as a hosting service.

What is static WordPress?

Static WordPress and headless WordPress are often used interchangeably but there are distinct differences between the two.

Headless uses WordPress as an API endpoint. You can communicate with it, get data from WordPress like the latest posts or put data back into WordPress like submitting a contact form.

Static WordPress, on the other hand, is a static site created from the existing WordPress site. Using the same WordPress themes and plugins, capturing all of the site pages as it would render in the browser.

What is Shifter?

Shifter was designed to revolutionize WordPress hosting. It is a WordPress hosting solution that combines static site generation and serverless architecture with the world’s most popular CMS.

Where and when headless WordPress is a good fit?

Headless WordPress or headless anything is great.

What’s the current state of headless WP plugins?

The current state is good! It’s still early days for some of the newer plugins or recent additions that focus specialty features and build hooks and working with static site generators but there are few that have been around awhile are well supported by a growing community and even the companies that depend on them.

One great example is WPGraphQL by Jason Bahl, which is a WordPress plugin that adds graphql support to WordPress. Back in June 2019, WPTavern announced that Jason was joining the Gatsby team to work on WPGraphQL full time.

All plugins aside, one of the most underrated features of WordPress, in my opinion, is that you don’t need a plugin to go headless. Every site running WordPress since version 4.7 is a headless CMS by default unless you’ve disabled it. The REST API endpoint in WordPress started as a plugin and eventually, it moved into core.

I’m not a big fan of baking too much into WordPress core. I prefer the package (or plugin) approach so you can add just what you need, nothing more, nothing less. This is the JAMstack approach and it’s not always aligned with the WordPress way to do things.

How well popular plugins like Yoast support headless mode?

Yep! Yoast offers WordPress REST API support. There so much that Yoast offers so I can’t say for sure how extensive it is but I would say it covers a lot but most importantly it’s extendable.

There are WordPress filters, hooks, and actions available if you want to customize or build new functionality into your site. Or better yet develop it as a plugin and release it on WordPress.org or publish it on GitHub.

Conclusion

While WordPress might be the most popular solution for businesses, downsides can be overwhelming. For example, we’ve recently researched 20K websites for speed and performance and found that 79.3% of WordPress run websites have a poor or slightly above poor Lighthouse performance score ie 0-50. With Google pushing for speed as an important ranking factor this may become a problem for businesses.

For many, headless WordPress sure looks like the future. It offers a solution to many of the WordPress problems and it is fairly easy to migrate Your WordPress site to the Jamstack on your own.

Not sure if Headless WordPress is the right solution for your project?

We can help. Schedule 1-on-1 talk with us and let us help you find what works best for your business.

Schedule a demo

TinaCMS

Reviewed by:
  • Thom Krupa

Let's be clear on one thing first: Tina is not a CMS - that's the acronym. Tina is an open-source website editing toolkit for React-based frameworks like Gatsby and Next.js. Created and maintained by the Forestry folks. The reason for Tina being here is that it aims at giving full power to the developers to build custom editing experience on the fly, using their favorite stack, free from platform dependencies.

  • CMS type: Tina is Not a CMS*
  • Website: tinacms.org
  • Founded: 2019

Last update: March 13, 2020

Is Tina really not a CMS? Let’s try to figure this out first.

What Is a CMS?

CMS stands for Content Management System. So, the primary goal of it is to Manage the Content, right? It doesn’t stand for a content management system that requires database and server and has API or interaction with Git, right?

Imagine CMS that gives you the ability to live-edit your content. Just click on whatever you want to edit, change it, and see the changes live before your eyes. No need for saving, waiting for rebuild or preview server. Click “Publish” and deploy instantly new changes as static files to a global CDN. There is still some more complexity here, but I believe Tina makes a step in the right direction to make this vision real.

How Does TinaCMS Work?

Currently, TinaCMS supports only React-based frameworks - Next.js, Gatsby, CRA and similar. There is a plan to support Vue, but there is no specific ETA at the moment. If Vue is your jam, you can contribute to the project.

Essentially, Tina is a middleware between frontend and content source (usually markdown or yml files). Think of it as a big form with different fields. Each field represents a piece of content from the source file. When you edit the value it “hijacks” new value the frontend app. When you click “Save”, it rewrites the source file with new values.

Live-editing Experience

Tina Team has created a few demos of the CMS + Gatsby, available to fork on Github. I checked out one of them called Grande Starter you can find a sneak peek of how looks the edition experience on the quick video below:

Loading Video

Loading Video

Try It Yourself on tinacms.org

If you have Github account you can try to edit the official Tina website. Sneak peek below:

Loading Video

Loading Video

Pricing

Tina is free and fully open-source. Dev work is sponsored by Forestry. In the future, there might be some paid features like Team management, but it’s not clear yet.

Conclusion

I treat Tina as a proof-of-concept and a very interesting direction in the headless CMS ecosystem. Thanks to recent Next.js 9.3 update and its Preview feature, it opens new possibilities for Tina in terms of even better live-editing experience.

Pros and Cons

  • Great live-editing experience. Very valuable for not tech-savvy editors.
  • You can use a variety of fields to edit content and other website settings like theme. From simple text input to the color picker.
  • You can post a RFC and discuss it with the team.
  • Forestry team communicates publicly often about the short-term goals and future Tina direction.
  • Works only with React-based tools like Next.js, Gatsby, and CRA.
  • Works only with flat-files. It means it's an extension or alternative to Git-based CMS, but will not replace fully API-driven CMS.

Not sure if TinaCMS is the right solution for your project?

We can help. Schedule 1-on-1 talk with us and let us help you find what works best for your business.

Schedule a demo

In a Nutshell

It is hard turning a blind eye to the benefits of using JAMstack (and headless CMSs for that matter) from both web developers and marketers’ perspective. Faster performance, more security and easier scalability being top ones among many.

Didn't have time to read
the whole post now?

Don't worry we've got you covered! No emails asked. Nothing. Just click and download.

Download PDF

On top of that people are making use of more devices and channels than ever before. In a climate such as this, businesses/brands are forced to make omnichannel strategies to be able to get to their potential customers wherever they may be.

So… we’re back to the question Does Your Business Need Headless CMS? And, as I already said, it depends on your business requirements.

Being a WebDev shop focused on helping agencies and companies with serverless web, static site generators and JAMstack tools we can certainly help you answer that.

CLICK HERE to schedule 1-on-1 talk and learn more about what we can do for you and your business.