The power of Cosmic

Note: I work for Cosmic but this post is not directly affiliated with them and is my own set of opinions. I found Cosmic and starting using it before I worked with them, and actually its how I ended up working there!

Not too long ago I decided to set myself a challenge; create and add new content to my website via a CMS.

So let's back it up. I'm a designer by trade but I tend to get my feet wet in the development side too. If you've read my posts previously or even looked on my site, you'll notice the distinct 50/50ish split of design and development projects and/or posts. Being in control of the majority of the stack when it comes to projects I work on has proven super useful in terms of creative control and individual learning. But one thing I've always found too abstract and difficult to learn is backend development.

Frontend dev and design go hand in hand. I've spoken vocally before about my belief that Designers should understand how their work is built and should ideally be comfortable experimenting in that world themselves too.

Backend has always felt more complex to me, and APIs were a terrifying concept, so I went on the hunt for a headless CMS option to power my website and get my start in implementing API-driven updates to my website. I was looking through a host of different options but specifically trying to get a good free tier that would enable me to power my website fully without having to pay until I was sure it was the right thing for me. This site makes me £0, so keeping it as free as possible to run is ideal (coincidentally this site only costs me about £6 a month to run if you divide up the domain cost per year).

During my hunting I came across Cosmic and saw that it had a super generous free tier, one that could end up being viable for long-term use. Cosmic is a headless CMS that decouples your content from your frontend. By doing this, it meant I could create content 'buckets' (to use Cosmic's nomenclature) to separate my content into different places and power different projects from it (more on why this is great later!).

Below I've written five pieces of value a headless CMS can bring to your project or projects.

1. Decouple your architecture

By decoupling your backend from your frontend you can live in a world of a "separation of concerns". This is important. By separating your content from your UI, you avoid putting all your eggs in one basket. I use Nuxtto build this website [edit: this is now built in Next, so I could have used the content module to write markdown and post into my site. That leaves me reliant on Nuxt or another markdown-driven module, it couples me to the architecture. But by using Cosmic, I'm able to write my markdown (like this post for example) in Drafts and then write a little script to publish straight to my Cosmic bucket (and which now also runs a webhook in Vercel to republish my site and posts a draft into my Buttondown backend to create a new subscriber post). Now I'm not reliant on Nuxt, so if a new framework shows up, or I decide to go back to vanilla JS again, I can still simply integrate all my content again.

2. Separate your content into Projects or Buckets

Your CMS may use different nomenclature for what Cosmic calls a Project or a Bucket, but essentially, each time you're working on a new project you don't need to spin up a brand new backend necessarily. By having a single Cosmic instance, you can spin up as many Projects or Buckets as you like.

For this site I have a single Project with a single Bucket that contains all the necessary objects I need. I can then also target that Project but a separate Object to power my Plugins.run site. I could also push that Object into its own Bucket if my needs grow.

But most importantly, it allowed me to spin up a new Project with some collaborators to build an exciting new Figma plugin project where all content is powered by Cosmic's backend... how awesome is that!

3. Automate the upload of content

On the topic of that Figma plugin, we have a lot of files to deal with from the outset (541 so far to be precise) which meant that we needed a way to get this content up quickly and easily. My collaborator Neef put his skills to work and built a rad upload automation that meant we could easily post all of our files to Cosmic via the add Object endpoint by just dumping them in a folder locally and running npm run upload:assets. This stopped me from manually doing all 541 (I'd already done about 30 manually and that was horrible).

Without a headless CMS with a solid API, this would have been entirely manual and painful when each object has 5 points of metadata that need handling. It doesn't sound like a lot, but that's repetition over 2000 times, and this was just for the first set of data.

4. Power anything

Following on from the above, by being able to power my website projects and also now a Figma plugin, it shows that a headless CMS can actually power anything. You could use one to power a website or app's content, power a plugin or integration or even just as a repository of information you want to store.

My next goal is to start thinking about powering content in a native iOS app with my Cosmic CMS. Not sure on the project for this yet, but if you've got ideas for something, send me an email.

5. Teach you about APIs

Finally, learning how to implement your content via a headless CMS teaches you how APIs work and helps you to understand the relationship between content and UI and how this separation of concerns can improve, future-proof and power any project you're working on.

Also, don't forget, you can go back and add a headless CMS solution to an older project. I did this with my pre-Nuxt website which used bare Vue (and thus didn't have the SEO benefits Nuxt brings) and it worked like a charm.

Time to start something!

Ultimately, a headless CMS offers freedom and power. If you're not sure whether one is the right fit for what you're doing, then I challenge you to try and find a way to make sense of it and do it. Everything you create in Cosmic is just a JSON object that can be returned via the API. So if you're working on anything digital, you can use that JSON to do something. So I'd say, anything is possible!

If you get stuck or want some advice, feel free to get in touch via the form below or head over to the Cosmic community and see what people are building!

Update: I've been working now with SwiftUI for a while and I can say I truly love it. It has flaws, it has missing pieces but it's generally excellent to use. Especially as a designer.

I've spent the past few weeks building an app to support my personal bookmarks and blogs so I can easily view, edit and update from my phone, iPad or Mac any time. It's taught me even more about how powerful Cosmic's headless approach to content is and shows you can literally power anything with it.

And with dashboard V2 in early preview, I can't wait for what's next.