Marco Heine_

Blog

TypeScript tooling in Prismic

Edit this Post Opens in new tab

Photo by iMattSmart on Unsplash Opens in new tab

a table with some tools on it

I researched a lot about Content Management Systems, before starting my freelance web developer career. I tried a few, disliked some and got stuck with Prismic. The mental model of shaping websites with custom types and slices just clicked for me.

So far, Prismic offers everything I need from a headless CMS. A great user experience for authors, a lot of flexibility for developers and a great community where asking for help is easy.

Table of Contents

My problems with Prismic

There is one thing Iā€™ve missed though and that made my work harder. It was to manually create TypeScript Types and Interfaces for my Prismic Custom Types and Slices.

My usual workflow with Prismic goes like this. Figure out which pages and what kind of repeatable elements we need and turn that into Custom Types and Slices.

After that I head into my Next.js app and query for the data. The next hours are spent setting up Types and Interfaces for the Custom Types and Slices.

TypeScript is a no-brainer

Working with TypeScript is one of the things I learned on my last job as an employed software developer. It is something I would never like to miss anymore.

This blog post wonā€™t be about why you definitely need to use TypeScript. But I like to highlight a few points that make working with TypeScript in Prismic a lot of fun to me and improve my workflow.

It makes me faster because my code-editor tells me what kind of fields I have on a specific element and which fields I donā€™t have. Itā€™s that simple. I think thatā€™s always been the main selling point to me.

My code knows whatā€™s there and whatā€™s not. What exists and what does not so a mispelling of a key in a JavaScript object wonā€™t cause the UI to break. This prevents bug and improves the developer workflow.

So setting up Types and Interfaces for my Prismic Custom Slices and Types was a lot of work but necessary. I would query for the data, look at the Prismic API response and write the Types.

At some point I had built my own types folder which I could reuse on projects or use it as a starting point. It still was a lot of repetitive work.

Improved TypeScript tooling

But guess what: this is now work of the past! Prismic recently released a lot of awesome features around TypeScript tooling! There are two big improvements. Prismic ts codegen and automatic types in Prismic Client.

Prismic ts codegen

Prismic ts codegen is a new cli tool that generates types for Custom Types and Slices. So everything Iā€™ve done manually on my last projects will be taken care of. Awesome!

Itā€™s super easy to use and I encourage everyone to implement it in future (or even current) Prismic projects. First you have to install the package:

npm install --save-dev prismic-ts-codegen @prismicio/types

Next you have to create a config file in your root folder:

npx prismic-ts-codegen init

Finally you have to tell it where to find your models for whom types should be created. If you use the Slicemachine and thus have them in your local project folder it already should be filled in.

Now you are all set up! If you run npx prismic-ts-codegen Types for all your Slices and Custom Types get created in a single file. And if you need to update them, just run the command again. Itā€™s so helpful and such a great thing to have. My prismic developer workflow improved a lot since using it!

Prismic Client automatic types

The Prismic Client was also updated to use these automatic types created by prismic-ts-codegen. This makes working with Prismic and TypeScript a love-love realationship.

You automatically generate your Types and they are used throughout your app without needing to do anything. Thatā€™s awesome.

When I started working with it, I quickly discovered a case were I thought that I still would have to do some additional work to run everything smoothly. Iā€™m talking about typing content relationships. Because querying for linked documents is not automatically typed in Prismic. But Prismic also got us covered here. In the docs Opens in new tab they share exactly how to solve this case. Great!

Conclusion

Working with TypeScript in Prismic just got so much better with the release of this huge improvement for TypeScript tooling. As I already said many times before, this improves my workflow a lot and Iā€™m so glad about it!

Iā€™m curious what Prismic has planned for future releases and Iā€™m happpy by choosing it as my main CMS.

Resources

I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me via Email Opens in new tab.

If you want to support me, you can buy me a coffee. I would be very happy about it!

ā˜•ļø Buy me a coffee ā˜•ļø

I wish you a wonderful day! Marco