Supper Club × Simen Svale Skogsrud and Espen Hovlandsdal from Sanity

you really just Start to love it because it's so easy to describe what you're actually looking for.

I think it's super interesting how, like, Take a look at that and render out the UI,

successful.

GraphQL or any other thing. Like, once they once they take a look at Grok and start using it,

that that reaction to it. Like, what it that that you just described was, whereas like, what is this new query language?

And returning this data, but then you're breaking sort of the the contract for that API.

And I think If you just have a single consumer of that API, that's fine.

but it also, or,

I have a lot of opinions on this. I think,

There's, like, tooling, of course, for rests,

or at least traditionally, it's it has been a lot more fragmented.

cycles.

I'm not Sure. On the details, but, like, if you have

GraphQL is, But the real power, of course, by having the studio integrated into your codebase like this is that you can do it much,

Repositories more low level. Like, you can actually get the data and just pass it directly down to, like, a React component and then

operate a GraphQL No. I think that's the, the alternative They often see is these pitfalls where people, alternatives for what GraphQL provides built in. So just having, like, A single way to document an API, a single way to mark a field as deprecated, component based rendering,

Yeah. I I will say, especially if you're building, version of your website or something.

And it so I think it's like it leaves a lot of power Yeah. Yeah.

this for you can for instance, you can use things like Next. Js, and you can then have a slash studio router slash admin if you wanna go the old, render that in line.

really think too much about changing data over time and the stability of GraphQL APIs Can be good, but it can also be very complicated for the person who's gonna scale this to actually be able to do that. Yeah. Because you don't know if you're running expensive queries on the client side. You're just telling, their business, basically. And write that in if, technology that was familiar to them. So we didn't want to, like, Because people think that it's very easy to,

give me this, give me that. Yeah. Yeah. And computing, I don't know. Feels integrated rather than just to hear some database tables or something about your your application.

that was it. Everyone's the next thing, everything. And here we are, probably 6, 7, 8 years later.

But in a lot of,

A lot of flexibility, I I think it's so fascinating to see how many of our customers are actually never reaching for, there is, of course, every once in a while, this, like, very correctly pronounced. Very, very nice, Nice one, Scott. I am a, principal developer on the studio team at Sanity, and I've been, been with Sanity for 6 years now.

is, like, impossible

external consumers, fall into these, but it does require you to understand the sort of

should we go back to rest, or is there something else?

ways, it's not what was intended for. It was meant To be like that that stable thing that could evolve over time.

But there is a certain, like,

x amounts of nodes that you're fetching, it can, like, potentially block that off. But you kinda wanna know that Before you go out and fetch all of these things. Right? So it's it's complicated to write an API that has that sort of logic built in. But do you remember back in the days where we fired up, like, a 120 different queries and joined everything on the client side. That was also quite expensive for everyone. So I guess that's true. It's a it's kind of a step forward still.

way to build APIs,

For breaking changes between 2 versions of a GraphQL schema, experience. I mean, we don't really like that term as much, but we do wanna think it's important that our content Should be,

it's hard to know, Familiar paradigm of having your app in a page? The,

nested complex,

This feeling of GraphQL being a little bit of a pain in the ass to to sometimes like, totally agnostic to whether where you actually want to use that content, and so we don't wanna be per like, super prescriptive on whether you wanna use GraphQL

well, not the API, but, like, there is a built into the tooling, like a way to check for, how how we just expected everyone to to sort of have that,

to scale, basically, because you're fetching basically All the data that's in this other service.

So with GraphQL, it's I think it's easier for developers to sort of think more holistically about what data you wanna fetch up front and then do the query, Pass it down to the different components on the page.

and users

but it's so fragmented. It's, it's, like, 5, 6, 7 different tooling,

But I do think it has a lot of tooling that that preview pane. Oh, React seemed like a good choice.

operations. Like, say, the GitHub API where you have The pros and cons of GraphQL. Like, I don't think people,

Sort of lacks,

I think GraphQL is a really powerful, using our own tooling for all of this. So right now, it's really just React components

Is is GraphQL still it? Like, is that the best way to You might not necessarily know the paths that you want. And then Now it's obviously been a website and a mobile app now, but now it could be a website and a mobile app and and,

to query data and to use in a website? Or,

You kinda want a a computer cost upfront if you wanna block that. Like, GitHub, we probably has some limits.

and favorites, and you can go all the way down on these things, which will provide

being able to to ask The GraphQL API,

up to the consumer, which the studio has always been a React,

Do you wanna wanna talk a little bit about that, and then we'll go into, like, what 3 point o is? Yeah. I can talk a little bit about that.

but the, like, actual, like, editing UI, you have access to the code if you wanna change that.

I guess, like, the editing experience, The not just the UI editing experience, but, like, you can see where what other people are doing. And I always thought that was it was kind of neat the way that you've approached that in that,

UI

So Sanity Studio is the

Oh, like like, what are they doing making another like, we have GraphQL, but then, like, I I got into it. I thought, oh, okay. This this actually makes sense is that like, when somebody buys something or,

what you want. It will fire a webhook, and then you can rebuild your site or send a notification or or whatever. So I thought that was That was really cool that, you could do that inside of of Sanity. Did you all notice any bit of pushback

Which is you can

We really like GraphQL, but our view on GraphQL was that GraphQL is actually a language for implementing

basically

We were, of course, looking at GraphQL at the time.

controlled APIs. It's like when you wanna lock down your API, that's where like, it replaces rest. It's just a huge improvement on rest.

say, I want

when an image is updated or or literally, you can describe any state

query matches Yeah. I I think that that's good. It's like it's no longer just a website.

Yep. Nope.

at that time, everyone knew GraphQL was the next big thing, but also very few people knew actually what it was, in any detail.

You all landed on Grok, essentially. How did that happen?

On the grok front from people who are wanting to pick up Sanity, was that ever a, concern you had? We knew it was going to be a controversial, So, decision, like, we wanted definitely, like, just to be able to say we're using GraphQL. We know everyone would be asking because,

It's super suitable. Even for huge companies are using it for for a lot of stuff. So When, when GraphQL is like rest for the future, let's say that. So so in a sense, it's general query language for JSON. And the way we designed it was it was Optimized to be great at powering GraphQL API. So it's kind of great at being the kind of thing behind the GraphQL API. So, actually, our own GraphQL APIs are just kind of translations from GraphQL to Grok, and then it just passes it down to the content page. Yeah. I I thought like, the 1st time I saw Grok, I was like,

And then when That and then and then hits publish when when they're ready to go. But

with the the query.

Grok What can you explain to the audience? What is

I kind of knew like, I we worked a lot to not make rock, to put it that way. Like, we really didn't want to make rock. It just felt completely necessary.

So so so that were kind of a a challenge.

and, maybe a little bit of why why,

because I feel like, when Burger King actually runs part of their Greens on the kind of equipment behind the counter, like, where the kitchen staff works to kind of Mhmm. Operational information for for for that. So they have integrated everything from, like, the DoorDash app and down to the various screens on the people who've actually actually flipped the burgers, completely separate,

So Grok is kind of designed as kind of it's it's like SQL emergency so so I'm the CTO, and I'm a cofounder,

What it isn't really good at, is like general curious. Like, I don't know what's the shape of my data. I don't know, like, there doesn't have an API yet. Like, how do I Describe how I want to fetch all of this data.

for Sanity. Like, What are some other stuff that people are using it for? So some people are are using

is it like, they are using it to run,

about these the Xfinity itself is hosted for you,

ways of working with their content that was kind of specifically suited to them. So we wanted the the CMS, on any kind of kind of data structures. So that's what we made, and, Surprisingly

are run from the same single Source of truth.

Sanity always keeps your data in a form that is not there's no HTML. There is nothing kind of special for a specific display technology. We don't even keep your images in a specific crop. We a crop insanity is like, want to keep this part of the image, and I don't want to use want you to use this part of the image. And then we can kinda recrop that image for any form. So as soon as you redesign your website or you use your content elsewhere,

That's awesome. I'm curious,

something we created because we used to be an agency. We were frustrated with the kind of content tools we could give it to our customers.

Of course, a lot of people use Sanity to power apps because the one of the things that was important to us is Even though it's, like, excellent for web apps,

health care training doll made for your different apps, the noise is Actually, in the app, that's kind of amazing and cool and makes lets people work fast. But also it's problematic problematic because it makes you not have controlled APIs. If your data changes, your API Slightly changes. So, actually, I want to move in a direction where we use Grok to power graph GraphQL kind of proxy APIs. And then those can be kind of Stable and controlled. But I think for most projects, it turns out Grok is better than I expected.

the not CMS, to be open source. But also, we wanted a a hosted back end. We want we didn't wanna deal with all of that Kind of running and scaling a back end.

health care training goals.

So we wanted a completely,

It's very important for to us. Now so

Programs that create contents for emergency

Yeah. That's us. Oh, you're the low down on sanity. So as you know, sanity is not a CMS. Like, that's what it is. It isn't. It isn't a CMS. It's

this to run, Yeah.

That is kinda reshaped or can be reshaped. So

We wanted a not CMS

totally customizable where we could build Exactly the kind of content authoring experiences that our customers needed. We wanted to be able to give them, like, awesome people really like that it's It's open ended. It's fast. It it what what happens is a lot of the knowledge about the information you need and how it's supposed to be put together Ends up in your in your front end, in your specific client, which is kinda nice because now instead of having loads and loads of different APIs so all kinds of stuff. But I think the real power comes out when people

content database that was globally kinda distributed on all of those things. And we wanted to be able to have real time collaboration like Google Doc style collaboration My my the president thought, do I have bacon in this specific franchise right now?

Like, Simon Sveil. I just given up on I'm pronouncing my last name. It's actually

that's what Sanofi is, I guess, in one perspective. Is that fair, Espin? Yeah. I think that's a pretty good summary.

sanity for us, it was

rich media attached to that and and whatnot. Like, you can kinda see that. But I'm curious about, like, other use cases,

Like, I think we can all understand the types of stuff that this might be used on a website where you have different pieces of content, and they can be related to each other, and you have,

interested to hear other people's,

Okay. Chris, you can use the best one of those. Okay. Mala.

and we're gonna be talking all things Sanity, we have Simonsfell

Hovlandsall. Hovlandsall. Yeah. Yeah. Go for it.

It's it's funny. We've had them sponsor for for so long, but we've never actually had them on the podcast. And now that we've been doing these supper clubs now, it's kinda fun

to bring people on and and have them talk about the stuff that we've been trying to talk about For for all these years, the one thing that really made it click for me is the Grok webhooks,

Yeah. We're we're gonna be talking all things Sanity today in just a little bit about What they have going on over there and and just about how awesome Sanity is overall. My name is Scott Taliski. I'm a dev from Denver. With me, as always, is Wes Bos. Wes, what's up? Oh, not too much. Excited

Hovlandsall.

and then as well, Why don't you give us a quick rundown of what Sanity is? I'm sure most of the audience knows, but I I'm always

Two awesome guests from Sanity, one of our favorite sponsors over here at Syntax,

and Espin Hovlandsfall.

quick rundown of what it is.

to chat with the folks from Sanity.

why don't you guys give us a quick introduction of of both who you are,

So So it's been a been a journey, and, I live in Oakland, California currently.

but, like, who cares? So I was actually more surprised about the lack of resistance. Like, I I see people are more about Grok than maybe even I am,

of Sanity.

So so I'm I'm,

Like, the actual player that we're using from our actual syntax site. And I think that highlights it really nice just, like, Just the ability that you you said you have the ability to use

Sanity just as 1, like, page on your on your single project with, like, your entire website and also your CMS in one thing. But still your content, like, your kind of data management stuff is still offloaded, And Espen is actually the first Developer at Sanity who like, you're the first one who kind of worked full time on Sanity. Right? The 1st person in the universe, actually.

at the time of this recording, at least. We just released the the New version, so we're kinda keen to see what people build with it, but I I think that's definitely, like, a big,

I think it was like a syntax,

Just a a project for us where you would import it all of the episodes and everything, but then embedded directly into that content editing experience is,

Very often, that is, one of the first things that people have done. And so in the past, it was very common for people to use, like, an iframe approach Where,

now you can also have this super tiny simple project, like,

one thing I think is amazing with this, The solution is that now, Sanity is just a React library, like you said, Espen. And are using their content, the same Piece of content in lots of different contexts.

the things that you've already built inside of your editing experience and get to experience that content in a way that's more,

so you don't have to think about that. So you can have self everything that you care about changing and everything else is going to be taken care of for you. Yeah. That that's really cool. I'm curious about now you're talking about React components.

you can't take Sanity to this. Like, this is used by huge Corporations that would deploy like 700 different studios on Vercel and whatnot. But then also

in the TV version 2 of the studio where you have, like, an iframe, and that would render, like, a slash preview

And are are you seeing people using that for, like, a live preview or just be able to model what something might, like, render out to on the page. Is that what it is? is,

few files.

So that's something, that I think we will see much more of going forward.

wow factor once you Once you get all of the components, they're rendered directly into We just released,

fine grained,

Somebody edits text and hits save

it's not always just

Organizations are much more complicated than that, and there needs to be multiple hands

Let's talk about workflows as well. This is kind of another cool thing that I like in Insanity

It might be a bit of a pain.

Welcome to syntax.

This

is the Syntax supper club.

On this supper club, we have

We're taking sort of a step back from from, And you have this, like, single page App running in your browser, you could edit these schema files and all of the custom components that you might have in there, and you saw everything like hot reload.

called Sanity Studio, and then you can embed that inside of your existing application,

single page application,

Sanity all the way. So you can actually take, like, a a React component Mhmm. And, you can then just mount the go all the way down to something like just Plain old JavaScript, but, I I'm Aspen Hovlandstall, or any technology really. Gatsby has its own, like, source plug in to fetch data from Sanity. So it's, like, It's up to you how you wanna fetch it.

Sanity for us.

Showed itself over time. So the version 2 was like this

using React. So that opens up a lot of doors. It's a lot easier to for people to understand, I think, as well because it's, things like that is super super powerful with GraphQL and something that I always miss when I go back to rest.

which I think is really powerful and differentiates us quite, significantly

Y'all put us put together a a syntax.

studio react component in there, pass it a configuration, which is just JavaScript,

The reason why we chose React was, of course, that there was a lot of developers that were familiar with it, and we wanted to be able to provide, like,

a really easy way to customize the studio.

has I can just add a new field, or I can just change the the The way this field is,

Inside of your Sanity studio. Oh. It's the exact same code base. Yeah. You know, it was it was fun. When we first had a demo of

But, what we've done now with b three that really shows the power of using React is that it's now,

framework you you span up like a dev server when you run sanity start. It started like a a that classic stack that you're might be used to, like a webpack dev server.

over time, Whereas when you have these very, like, fragment or,

So have people write these custom input components and tooling that they might need for their, in different frameworks, we already have, like, a preview kit for Next. Js, for instance.

and that will it will then API endpoints and rest, It often leads to fetching data and, like, leaf nodes, basically.

from a lot of these other things Because that means that you're basically inside of your own app. You can reuse all of the sort of, react components that you might be using in your website

like, even from the very first version.

And I think that power really comes out,

Burger King signage into it, you know? Like, it's kind of nice to not have you don't start

Your data as a website CMS, you start

Cool. Well, let's Talk about Sanity Studio 3.

all of your content in one place, and now you're free Free to data. You have one API for all of our content. A lot of teams are always waiting for someone in their organization to build, like, a bespoke API to solve some problem or other. As long as, you get your content into Sanity, kind of all the APIs are there, and every team member knows that API. So that's kind of the idea of the content like that was, So I'm actually more surprised.

kind of a layer back, which is just like you. What do you call it? The content lake? That's where everything goes. Yeah. What what is that content like? Yeah. Yeah. Good question. Like, my thinking, when we when we kind of frame Sanity was, like, I want Sanity to be a place where, like, Every piece of data that I want to present to an audience should be insanity. Like, if my my my my my my stock in my store,

All kinds of information that I want to present to an end user, to an audience, should be kind of something should be suitable for that. So we thought it's similar to a data lake. Like in analytics and marketing, you have you you feed all of your different piece of information from all of our sources into a data lake so you can ask questions. Anything you wanna analyze, any questions you want to be able to answer, You feed it into the data lake. So we thought, like, this is like that, except it's for content. You want

somebody who needs Integrate

Couple of, couple of things like filtering and project projecting, you can then reuse that for any query. And it's really easy to

Has it, like, caught on anywhere outside of your own tools? No. So it's important for us to say that we it's open source in terms of the the specification is open source. There's an open source JavaScript implementation of this.

totally new field inside of a GraphQL API that then does that operation for you. You could just ride it straight into the query. So it's it's it's super nice. It was kind of shocking to us, like, when we saw the kind of queries that Sorry. Coming in very early on. People basically replacing half the of their kind of like, all of the code that was, like, fetching data and baking it, preparing it for rendering was kind of basically replaced replaced with 1 single huge query. So we realized, like, okay. We have to optimize this thing to do, like, huge queries, because people just wanna do 1 single query.

And once you just understands the sort of, like, Grok deep

To, like, take that knowledge and then just play around with the query until you get just what you want. And, yeah, it's so nice to be able to, like, write a query that Just like maps over an array and picks out that 1 property that you want and then aggregates that into, like, a single string or something.

We so we we won't say it's proprietary. It's not like although it kind of is because it's only us running it. I kind of it's interesting to see now that other CMSs are getting, like, feature requests to add Grok support. It's pretty hard to to support those. So so that might take some time. So What what are your thoughts about GraphQL? Because when GraphQL came out,

outside of Sanity using Grok at all?

So yep. Yeah. I mean, it's almost problematic, I would say, that people end up with these. Like, they they wanna put everything into 1 Grokery. They they wanna, Like, replace their entire back ends, but you would just want to get the query, and then that's very hard to optimize, I would say. Yeah. Totally. That's the same problem in GraphQL. Do you do you find people

I guess, it's a lot faster than writing a

Grok or GraphQL or any of that. Am I still choosing all of that those decisions myself in my React app? You are choosing that yourself. I think it's very important for us to Try to maintain that sort of headless,

So what what's the let's say I'm building a rack component that,

a list of pizzas,

But I could definitely see us, providing some kind of data binding libraries down the down the line for React specifically since it's so rest where to draw the line because it's You can build these arbitrarily

in terms of How you want to render that.

And that data is insanity, and I wanna put it into my React application. Does does any of this new Sanity 3 point o Self help with that

Key to sort of the sanity experience in the studio. It kinda ties really well together, I think. Totally. What so, Grok,

But, for the most part, we we wanna leave that up to the user, as, Scott

lists out

to use,

or am I still choosing my data fetching, caching,

I'm sure we will provide a bunch of tooling over time to make it easier,

Oh, I'm starving.

Wash those hands, pull up a chair, and secure that feed bag, because it's time to listen to Scott Talinsky and Wes Bos attempt to use human language to converse with and pick the brains of other developers. I thought there was gonna be food,

so buckle up and grab that old handle because this ride is going to get wild.

I sure hope you're hungry.