DecapCMS

DecapCMS Review and Features

Written by Bruno Aderaldo

Last update: 6/11/2024

Decap CMS Overview

[@portabletext/react] Unknown block type "message", specify a component for it in the `components.types` prop

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.
[@portabletext/react] Unknown block type "newPdfPage", specify a component for it in the `components.types` prop

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 them 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 .

Interface

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

[@portabletext/react] Unknown block type "newPdfPage", specify a component for it in the `components.types` prop

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 file. All editable content types are defined in the  field of your  file, and display in the left sidebar of the Content page of the editor UI.

[@portabletext/react] Unknown block type "newPdfPage", specify a component for it in the `components.types` prop

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 Decap CMS are committed directly into the main repository branch. You can enable the Editorial Workflow with the following line in your Decap CMS  file:

# /admin/config.yml
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.

[@portabletext/react] Unknown block type "newPdfPage", specify a component for it in the `components.types` prop

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.

[@portabletext/react] Unknown block type "video", specify a component for it in the `components.types` prop

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. Decap CMS comes with several built-in widgets but they’re always adding new ones.

At the moment Decap 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

Like many of the open-source projects, DecapCMS 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

Decap 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 Decap CMS is open-source CMS supported by a growing and helping the 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 Decap CMS related things on Slack.
  • Ask and answer questions at the designated Decap CMS channel in the Decap community forum.
  • At GitHub Issues, you can report bugs, request features, and comment on existing issues.

When It Should Be Used?

Decap 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

[@portabletext/react] Unknown block type "prosCons", specify a component for it in the `components.types` prop