Prismic vs Contentful: Battle of the Headless CMS

Our team tried both of these CMS technologies in the making of the Goodfrontend official website and we have determined the key differences that make one better than the other.

First, let us begin by discussing Prismic.

Prismic is a CMS that utilizes slices. Inside the Slice machine, you can create custom types and slices. A Slicezone is a component from a Custom Type that renders the slice depending on what slice it is.

By utilizing slices, you can easily create a dynamic website that the user can control.

Let's see an example, here is a page that only utilizes slices and the SliceZone is used to display the slice.

Here we have two slices. 

The sequence of the slice is defined in the documents.

In this example, if you want to put the StoriesPage Slice first rather than the FeaturedSection Slice, can do that inside the Dashboard and just interchange the position of the two.

After interchanging the position of the two, the site will also update. Now, it follows the sequence of the slice inside the document.

THE GOOD

Prismic’s Slice Machine brings the flexibility of creating components for your website. It is a local Custom Type and Slice builder.

Slices allow users to edit and arrange sections of a website however they like. This gives the user freedom to construct the layout of your web pages.

Here is an example of a custom type containing slices that serve as sections/components, where the user can add slices, then rearrange the ordering and placement of each slice on a web page.

With Prismic's Custom Types, you can define whether a certain custom type is a repeatable or single type.

A repeatable type is a custom type that can be reused over and over again to create a document. Examples would be the ff.:

• Articles/blog posts
• Authors
• Products

Single Type is a custom type that can only be used once. If there is already an existing document for that custom type you won't be able to create a new document until you delete the existing document. Examples would be the ff.:

• Footer
• Header
• Home Page
  

You can separate fields and slices by placing them inside static & repeatable zones. Having repeatable zones is a good feature when it comes to multiple or large quantities of the same component. An example would be a list or array of books and testimonials.

Another feature of Slices is being able to create different variations of a specific slice. This is a good feature if you want to create a slice with shared and unique fields.

An example of this would be creating an article that has two variations, an article displayed as a card and an article displayed as a whole blog page.

In addition to all the good points mentioned, Prismic is an approachable and user-friendly headless content management system. Its GUI for Slice Machine and Prismic's dashboard has a very straightforward and intuitive design that makes it easier for users to create sections for their website and rearrange them with ease by simply dragging and dropping slices.

THE BAD

Manually migrating content from a previous CMS system can be a huge hindrance as all the data will have to be copied and pasted over and the lack of TypeScript, GQL support affects the developer experience tremendously.

Too simple = More limitations. While the simplicity and minimalistic nature of Prismic make it more approachable to users, it can also be a downside.

“Simplicity is a double-edged sword”

Based on developer experience, one critical feature that Prismic lacks is supporting multiple nested content relationships. Prismic has a content relationship type for referencing a custom type to another type or slice, but fetching referenced data is limited and shallow. Prismic is not optimized for deep references & nested fields. Our experience using GraphQL to get a long query would speak for itself:

This would mean that Prismic is great for simple web pages that don't involve a lot of referenced data. An example would be portfolio websites.

Another critical feature that was missing was deleting custom types or slices in Slice Machine. In order to delete them, you have to use an API platform such as Postman, and execute a DELETE operation. Much time can be saved if they only had a delete button.

Since Slice Machine is being run locally, changes in custom types and slices show up in real-time on your source control panel. This seemed like a good and cool feature for developers at first, but having to experience using it as a team, it could be a potential nuisance and poor developer experience. Since Slice Machine is being run locally, changes locally once an edit is made or a slice is pushed to Prismic, the component’s code/file changes are immediately reflected as unstaged changes in git to anyone who is currently editing in the same repository.

Another issue in Slice Machine from a developer standpoint is the lack of updating types and slices. 

For Example, when a team member makes and pushes a change in Slice Machine, other team members cannot see the changes made in Slice Machine once they open it. This is because Slice Machine runs locally, and the pushed changes are reflected to the API only. This means you can only see the changes via the Prismic dashboard, or by using an API platform application like Postman.

As mentioned, this could just be a potential con. With the right planning and procedure as a team, this can be resolved easily. This feature can be beneficial, especially if you’re doing a solo project. 

In our case, we were able to avoid complications with this by pre-committing and pushing changes in Slice Machine to the repo before the team starts coding. It’s just that adding or editing in Slice Machine in the middle of development can be a hassle to maintain.

Since our team used Contentful for Goodfrontend’s official website and made a separate version of the website using Prismic, we have easily identified the differences and features that make one better than the other.

Contentful is built by developers for developers and it provides a great developer experience, an important factor for productivity indeed.

THE GOOD

• It’s not opinionated and you have the freedom to structure any content data you want.
• Real-time content delivery straight through your frontend app with a click of a button.
• Clean and minimalist user interface.
• Their documentation and learning resources are clear and concise
• The option to use Apollo Client makes fetching data a breeze.
• Price and free plan - Contentful already provides 5 users in a project while Prismic gives 1 for the free plan, when working on a team a project with only 1 user can interact makes the job more difficult.

THE BAD

• Pricing - for a small team, they offer a free plan which can get your app up and running, but for medium to large teams, prepare to spend a hefty amount of dollars.
• Contentful has quite a few limitations with handling Rich Texts. One reviewer said, “They are lacking some basic features that are making the content model much harder to manage.” Based on my team’s experience, we attest to that and needed to make a workaround to make the embed items right.

PRISMIC VS CONTENTFUL

Since our team used Contentful for Goodfrontend’s official website and made a separate version of the website using Prismic, we have easily identified the differences and features that make one better than the other.

• Price and free plan

Contentful’s cheapest medium organization plan starts at $489/month. While Prismic’s organization plan starts at $100/month, they also have a community plan, which starts at $7/month and is limited to 3 users.

So, is Prismic the way to go if you’re on a budget, considering that they have a community plan, especially for small teams and hobbyists who want to try out a headless CMS?

The answer: Not necessarily. You can opt to use Contentful’s community plan and not pay a single penny.

Yes, Contentful’s community plan is free. Prismic also has a free community plan, but the key difference is that Prismic’s free plan is limited to a single user, while Contentful’s free plan is limited to 5 users.

We recommend Contentful for users and dev teams who want to get started using a headless CMS without spending some cash. 

Prismic offers a pretty good deal with its pricing, with consideration that you prefer their minimalist experience and slice machine system.

• Use Cases

As mentioned earlier, we recommend Prismic for portfolio websites as an example. This means that it’s great for websites that don’t have a lot of dynamic and referenced data. We encountered this problem during the redevelopment of the website using Prismic, and is one of the key reasons why we opted out. We do believe that in the future, Prismic would soon hopefully resolve this issue.

Contentful, on the other hand, is more flexible and capable for different websites. We used GraphQL for both, but Contentful handled the situation better. Referenced and dynamic data did not cause problems. 

However, do take note that without GQL, your experience with Contentful would be limited, and you would encounter the same problem we had in Prismic which concerns being unable to fetch referenced data.

• User experience

For the common user, Prismic is more user-friendly compared to Contentful. Their GUI is very straightforward and minimalistic, you can publish content and add sections (slices) to your website on the go.

Contentful isn't bad as well for a headless CMS. A feat that makes Contentful a bit better than Prismic is their rich content field. Contentful’s rich text offers more content/text types and embedded assets, and is more intuitive for creating longer content such as articles. 

One thing to note about rich content, Contentful allows the user to embed entries, which could be the following:

• embedded video link
• embedded uploaded video to contentful
• embedded asset (images)
• embedded entry (link to content made in contentful such as an article)
• embedded inline entries

You can also embed assets and links in Prismic, but you can’t use a local video file or local content as an embedded type. It’s not much of a deal-breaker, since users commonly just link videos from streaming platforms like Youtube and blog sites, but it’s worth noting if you want more accessibility.

CONCLUSION

Both Prismic and Contentful have their own advantages and disadvantages, so there's not necessarily a 'better' headless CMS than the other per say. However, choosing the right technology would heavily depend on the type of web application you plan to build.

We recommend Prismic for users who intend to build websites that do not require a lot of data referencing. Example of these would be portfolio websites and landing pages, where data has shallow to no data nesting at all. While Prismic is currently unable to support deeply nested data, we believe that it would soon come in the near future. Such a possibility could make Slice Machine the future of content management system. Slices are a game changer and poses a huge upside compared to its competitors.

As for Contentful, we highly recommend it for almost any type of website that would need a headless CMS. It's also perfect for getting started with using headless CMS as a team, since it offers a free community plan. While we do think it's still one of the best headless CMS, it still has a lot of room for improvement.