CMS
+Sanity.io
+React
+Backend
+
First impressions of Sanity as a content management system
Published: 2020-04-07
What is Sanity
Before I go into details about what we've been using sanity for, I would shortly describe sanity.io for you, and why you should consider using it for your upcoming web-application.
Since you're here, I would assume that you are looking into potential CMS systems for your upcoming projects. Technologies are evolving all the time, and Sanity is a proof of excactly that. The company behind this, has the following description on their website:
Sanity is the fastest, most flexible platform for delivering content to digital devices and products.
I would say, that it's pretty accurate. The amount of stuff you can do with Sanity seems limitless, but it takes the right amount of skills to handle it.
The basics behind Sanity
Sanity is a React.js based system, that stores your data and outputs it as an API that is converted into GraphQL. React is a javascript based framework developed by the team behind Facebook and GraphQl is a langauge favored by many developers all around the globe. Your content is also available with the GROQ query language. I wont go into deatails about this, but you can find more information about this topic here.
The Sanity Studio

As mentioned previously, Sanity seems to have no, or close to no boundaries, when it comes to setting up the studio. It's a real playground for developers, but I would say that I've spent countless hours scrolling through their documentation.
Sanity takes effort to learn - and since it's a fairly new tool on the market, not many videos and tutorials are available currently. Including the tutorials on Sanitys own youtube-page, these are the most helpful videos I could find:
- Getting Started with Sanity
- Getting started with Gatsby.js and Sanity.io - Preview content changes with watch mode
- How to customize schemas in Sanity Studio: Part 1
- How to customize schemas in Sanity Studio: Part 2
- How to customize schemas in Sanity Studio: Part 3
- How to customize schemas in Sanity Studio: Part 4
- Build a Portfolio Site with Sanity.io and Gatsby — Learn With Jason
The backend part

The Sanity Data Store is where your content is stored and accessed. You access the data store via the Sanity API, either by using one of their client libraries or directly via the HTTP API.
In order to customize and structure your backend, you have to use a Code editing software. I'm using Visual Studio (VS code) and in the picture above, you can see a snippet from this exact site. With VS code you can arrange everything, structure the content, setup custom post-types, create unique modules and much more.
Everything (Postypes, text editors, custom elements) is placed in the folder Schemas. If you want to cusomize the way everything is displayed, you can add a file called desk-structure. I would highly suggest that you read through this part of the Sanity documentation first, since it can get a little tricky.
Is Sanity worth it?
Short answer is yes... Sanity is as far as I'm aware, one of the most affordable Content Management Systems available at the moment - especially because it's free. You can find similar free CMS's like Strapi.io, but the docs and learning experience is in my opinion even more complicated.
On the contrary you have popular paid CMS's like ghost.org and contentful.com - which I haven't had the time or right project to test out yet. Both seems a bit easier to manage - however, the prices are much higher compared to Sanity.
What's included in the free version?

If you're a small company or a blogger - well I couldn't recommend you Sanity enough. With the free plan you get:
- Up to 3 users
- 5gb of storage
- 10k documents
- 10gb of bandwith
- and much more.
You can see the full comparison between the paid and free version here. Most people would propably argue that 5gb of storage wouldn't be enough for a blogger - and I would agree, if it wasn't for image compression. Most people forget how efficient good image compression can be for your blog or website. With Lightroom you can easily get your high quality images down to 200-300kb, which would give you enough storage for 2500 images. (Thats alot of images!!).
It should be noted that all plans have pay-as-you-go, that means you can add a credit card to the free plan and pay $1 per additional 2GB per month (if you are frugal you still might want to compress those images). But more importantly: You won't be forced to upgrade plans if you go over the quotas.
What Sanity is missing...
As much as I admire sanity, as much am I hating myself for saying this - but Sanity is not perfect. I have often found myself questioning if Sanity is too customizable. Especially when it comes to the Rich text editor. For example it seems weird to me, that I have to go through alot of trouble, documentation and tutorials to setup Internal Links. I wonder why this isn't premanufactured and build into to sanity from the get go. It seems even more strange to me, that the text editor doesn't include some sort of text align button - this seems like a pretty standard tool in most text editors. I understand that not all websites would need these functionalities - yet I would prefer to have preinstalled from the start at least in one of their templates.
Finally I would say that I'm hoping the plugins and the entire community of developers behind them will grow larger in the near future. At the moment it seem a bit limited - espacially when compared to the limitlessnes of Sanity. The amount of plugins is low and the documentation for some plugins can be very compact and not that well described.
Try Sanity before you love it
As I mentioned earlier, Sanity isn't for everyone. Some may find it too complicated - others may find it too limitless. In my opinion, there's is only one way to find out - try it yourself.
If you find yourself in doubt try reaching out to the sanity developers trough Reddit or Slack. They have a strong dev-community and they are often able to help you. You are also welcome to contact us to hear more about Sanity - maybe we can help each other out somehow.
More Insights
SQL vs NoSQL: Critical Differences you need to know!
Published at: 2020-11-17
A professional web development workflow in a small team?
Published at: 2020-11-16
Gatsby.js vs. Next.js | First impressions with the best react framework tools currently!
Published at: 2020-11-12
What can you do to get a faster website? Tips for beginners and advanced developers.
Published at: 2020-04-20
What is the Pomodoro technique?
Published at: 2020-04-13
Four Day work week
Published at: 2020-04-11
Javascript SEO: Server side or client side rendering?
Published at: 2020-04-10
Gatsby.js - Is static generated websites a technology of the future?
Published at: 2020-04-09
The basics of statically generated websites.
Published at: 2020-04-09
What is Netlify
Published at: 2020-04-08