Cosmic Review and Features

Cosmic is primarily used for websites and applications built with JavaScript as they have guides for multiple JS frameworks including React, Vue, Angular, and Node.js, but have branched out to include guides for Go, Ruby on Rails, Java, .Net and Python as well.

User Interface

The design and experience of the web app has that same aforementioned developer feel to it. For the most part, it’s pretty straightforward, but some operations will require a little trial and error.

Here are a couple of screenshots to give you an idea of what to expect.

Your first step is to create a project. Cosmic has a collection of starter apps built with various frameworks to get you going quickly. They are essentially themes that come with a basic design and content. Just clone the repo on GitHub and you’re all set. Definitely, the way to go if you’re looking to test it out for yourself before making any decisions.

Alternatively, start from scratch avoiding a pre-existing content structure and codebase. This does not take much at all especially if you are using an SSG like Gatsby which provides a plugin for integrating Cosmic into your app. Be aware though Gatsby lovers, the plugin requires you to list all content types in the config and you will have to download images locally in order to use Gatsby’s image plugin.

Once you have your project it’s time to add your first Bucket. Buckets contain everything you need to create and manage your content. Cosmic provides you with up to 5 free buckets so you are able to run tests in different environments.

Upon entering your bucket you are presented with an option to create your first Object Type. These are your content types, each containing content known here as Objects. Inside Objects, you will add various fields called Metafields for different types of content. Cosmic has a variety of fields for you to choose from:

There are fields for handling just about any type of content. Let’s dig a little deeper into a couple you will rely on the most:

Object relationship fields are references to other objects. Say for example you created a blog post content type and you wanted to add it to your page content type. These are the fields that will allow you to link one or more posts to your page.

The HTML text area field is Cosmic’s alternative to the modern headless CMS-rich text field. The difference being this field closely resembles that of a traditional CMS editor. There are no customization options and editors are able to do pretty much whatever they want. This can cause havoc on the front end especially if your team decides to integrate a design system. You will also need to create your own custom plugin if you want any kind of advanced control over how your content is rendered.

The media field allows you to upload new files or add existing ones from the Media Library. Cosmic has integrated imgix, a powerful real-time image processing, and CDN delivery solution. Most common imgix features are available including sizing, cropping, quality control, and allowing the browser to choose the most optimal image format.

Sneak Peak of the UI

Here is a basic example of how you might structure your content model for blog posts. I am making use of their HTML text area field for the main body and a single object relationship field for the CTA button.

Cosmic JS API

There are 4 methods for interacting with your CMS:

• Use the REST or GraphQL API
• Server-side in Node.js with their NPM module
• From your terminal by installing the Cosmic CLI. There are numerous commands for creating and managing your content.

All methods are capable of both read and write operations. You will find a separate API key for each in your API access settings.

Support

On the Free plan, you benefit from community support, while other plans offer both community and chat support. With the Enterprise plan, you get an enhanced level of assistance through 24/7 Dedicated Support. This includes phone, screencasts, and onsite technical support.

Cosmic project pricing

Cosmic workspace pricing

A full breakdown of the details of each plan can be found here.

Cosmic JS Pros and Cons

I find myself wondering if this CMS could stand up to the complexity of the modern frontend as organizations and their sites and applications continue to scale. An object-based approach is certainly useful for developers, but consider a site with several hundred or even thousands of pages. How would content editors be able to manage all those objects especially without a customizable rich text field? How easy would it be for unwanted custom HTML and CSS to be introduced into the frontend and go unnoticed in an app that size?

My final thoughts on Cosmic is that it is best suited to dev teams with an object-oriented mindset looking for an API-based CMS for their apps. It is clear that this is the target market they tailored the experience and content structure for.