When Netlife decided to rebrand, we didn’t only do so with a new visual identity that included our own typeface, but we also decided to explore new technologial frontiers. We’d been very happy with our previous website built on top of the versatile Craft CMS, but decided to explore if headless CMSes with a detached front-end on the web lived up to the hype (spoiler: they did).
If you’re considering going headless, here’s 5 reasons you should consider giving Sanity aÂ spin:
Launch your terminal, write
$ npm install -g @sanity/cli && sanity init updated 1 package in 14.462s This utility walks you through creating a Sanity installation. Press ^C at any time to quit. Looks like you already have a Sanity-account. Sweet! ? Select project to use Create new project ? Informal name for your project test-project ? Name of your first data set: production ? Output path: ~/Sites/SanityDemo ? Select project template Clean, minimal project âœ” Bootstrapping files from template âœ” Resolving latest module versions âœ” Creating default project files âœ” Fetching packages â–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ª 100% (0.68s) âœ” Linking dependencies â–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ªâ–ª 100% (14.26s) â— Linking dependencies â–«â–«â–«â–«â–«â–«â–«â–«â–«â–«â–«â–«â–«â–«â–«â–«â–«â–«â–«â–« 0% (0.00s) â— Linking dependencies â–«â–«â–«â–«â–«â–«â–«â–«â–«â–«â–«â–«â–«â–«â–«â–«â–«â–«â–«â–« 0% (0.00s) âœ” Saved lockfile Success! You can now run "sanity start"
While other headless CMSes provide a control panel for editing the content models and fields, I prefer to do it in code. That means it’s easier to reuse patterns across projects. While it’s wise to keep this code fairly verbose and simple, you can also generate fieldsets by iterating over arrays and so on. You can also modularise the usual suspects, such as a title field. It’s pretty nifty!
Figure: Starting from scratch is easy. If you put a
block type in an
array type you’ll get the rich text editor. Adding other types to the array gets available in the â€˜insert’ menu. Yes, rich text is just an array where one of the types happens to be block text.
What makes Sanity stand out is that its editor, i.e. Content Studio, can be tweaked, extended and tailored to whatever you need. The first step is to configure the previews of your content. This is done by attaching
preview object to the type you want to display in the preview. You can also customize it even more by sending whatever you’ve selected through a
Figure: We use Sanity for handling registrations to workshops and other events. Here we can preview how many seats there are left on eachÂ event.
We have already begun to use Sanity for client work. In one our projects with the U4 Anti-Corruption Resource Center (still under development!) they wanted to integrate the rich text field with a service for text analysis to help them keep track of text quality. I’m no React expert, but I managed to extend the rich text editor to include a line with a small selection of the many data points provided by readable.io’s API. You can see the proof of concept underneath. We have also made a spreadsheet-ish input field for creating and editing tabular data, and rumour has it that there exists an input field for a live 3D rendering of protein molecules(!).
Figure: I set the editor to check the text every five seconds of writing. It’s also interesting to have the running estimated reading time while you write. Hopefully it will encourage brevity.
The whole reason of choosing a headless CMS, is that the content can be accessed through APIs. Typically that has been RESTful APIs, which can be somewhat of a hassle to manage. Although it often make sense, building a slightly advanced website, or any application really, on such APIs can also be a hassle. Especially when you’re required to query the API many times in order to get the necessary IDs to get the data you want. This is partly why Facebook made GraphQL, which now seems to be the weapon of choice for up and coming headless CMSes and “backends as a service”.
Sanity doesn’t come with GraphQL (yet), but arguably something much better: GROQ. The first thing I thought on seeing it was that it felt like “Markdown for GraphQL”. The syntax is also something you’ll have to get a little used to, but oh man, once you are: ðŸš€. If you wanted to query for the articles I made in the example above, it would be as easy as typing
*[_type == 'article'], but you can also go a bit crazy with it:
Figure: We use a version of this query to generate the topic list on U4. It is way easier to write than to read: “Fetch documents with the type â€˜topics’ and return the title in addition to the number of documents of the types â€˜publication’ and ’helpdesk’ that references each â€˜topics’-document and place them under the key â€˜relatedCount’, sort this array after this count descending from the largest, and give only the five most referenced topics-document”.
Despite the fact that you configure the data schemas and the content studio locally, Sanity CMS is cloud hosted, and all the data is instantly synced, which means that the studio is also real-time. Making your Content Studio configuration available to others is a simple
$ sanity deploy in the terminal.
At time of writing, the pricing for hosting and SLAs are not yet announced, but we’re pretty sure it will be sensible both in terms of expense and features. It will also be used in the academic sector to power a solution for online research publications.
Figure: With the Craft by Invision plugin we can also use Sanity to provide real content when designing new interfaces.
There’s something powerful in being able to adjust and tweak the content model, the input fields or even the preview during a meeting or workshop just to test out the suggestions. The fact that new content fields are instantly reachable through the APIs once they’re made, removes so much friction for front-enders. We have never before been able to so effortlessly build an information architecture so that both front-enders and content editors can experiment with it instantly.
The devil is also in all the little details that are too many to explore in this post, but to highlight some of them: Sanity analyses the color schemes of your images (say goodbye to text-on-image contrast troubles!), handles pastes from Microsoft Word handsomely, lets multiple users edit the same documents at the same time, exports and imports the whole dataset with one terminal command, has CDNs, has plugins to preview OpenGraph-tags, lets you write your own plugins to the studio with a simple
sanity init plugin, lets you make your own marks and annotations in rich text, and lets you ask for your images in whatever size, crop or rotation you want. The list goes on and grows every week.
Neither has it ever been so easy to tailor the very editor it all happens in – it makes for new and exciting ventures!
It should be noted that we have no financial ties to Sanity, other that we use it to help our clients, whom we bill by the hour. If you’re interested in trying out Sanity you can learn more by reading through its documentation. We’re sure the folks at Sanity appreciate feedback, questions on either gitter or in the various github-repos.
If you’re interested in working with Netlife on a project with Sanity, just send us a good old fashioned email, and we’ll figure something out!