A better CMS for React
Tags: react, cms
Published: 2019-09-06 11:00:47

<small><small><small>Photo by Hal Gatewood on Unsplash</small></small></small>

Are you a react developer? Then this day and age must be very exciting. [Gatsby](https://www.gatsbyjs.org/), [nextjs](nextjs.org), [netlify](https://www.netlify.com/), the [JAM stack](https://jamstack.org/), you name it. You can setup a complex web project in no time. 

Modern tools are amazing. But, what I want to talk about in this article, modern CMS are not. Working with today's CMS solutions frustrates me. The time spent integrating with a CMS and managing content and its structure doesn't feel right.

I thought a lot about my experiences and dreamt up a new approach to solve my frustrations. A better CMS for React projects. Let me explain further.

## A better developer experience

There are many small points of frustration. The big one for me is content-structure. Most CMS define their content-structure with some sort of types. Every CMS has those: Wordpress has [post types](https://wordpress.org/support/article/post-types/), CraftCMS has [sections](https://docs.craftcms.com/v3/sections-and-entries.html#sections) and Contentful has [content types](https://www.contentful.com/developers/docs/concepts/data-model/). They all refer to the same: A table in a database. This works great for structured data like blog posts or ecommerce products. 

It does not work well for websites that have a lot of unique elements. Plenty of times your website consists of things that only exist once. For example: an about page with a hero component, a background image and a CTA button. It is hard to normalise websites into database tables. 

**The solution:**
Derive content-structure from code. Guess what knows most about your website's structure? The code behind it! 


{% youtube ByfwjPee-Tk %}
<figcaption>Video showcasing developer experience.</figcaption>


This also solves a lot of related pain-points I have encountered:
- No need to manually define your content-structure through a web-UI
- It is far easier to test different content values
- You are probably versioning your code already with Git. So your content structure is versioned as well.
- No need to migrate your content structure to other environments, just deploy your code


## A better editor experience

CMS UIs give editors a hard time. We developers sometimes look down on editors, because they have a hard time understanding how the CMS works. But think about that for a second: There are dozens of input fields hidden in a nested tree structure. Editors have to match those with the website in their heads. Without knowing about the code or the content-structure. 

Headless CMS's have become popular because they let developers choose what technology they want. As a result the website moved further away from the CMS. Editors are the ones that lose out. 

**The Solution:**
Merge CMS-UI and website. Editors should have the feeling they edit the website. Every change is immediately reflected on the website. We build websites with React, a powerful frontend library. Why not use it to power the CMS too?

{% youtube _5Z8KegSd9k %}
<figcaption>Video showcasing editor experience.</figcaption>


## What's next?

All I have right now is a prototype that uses local storage (as seen in the videos above). The next step would be to publish an NPM module and to develop a simple data syncing service, so we can try this in a real world scenario.

Are you fed up with the CMS landscape? What do you think about the approach described above? I very much appreciate every opinion and every reply. Thanks for reading.