Improving page builders in Sanity CMS

Are you working with page builders in Sanity? In this video, we'll show you how to get to the gold standard with minimal effort. Get following along and just for the effort, we'll even throw in the prompt for Cursor.

Links ↓
The Cursor prompt (gist) - https://gist.github.com/jonoroboto/e9...

Book a meeting ↓
https://robotostudio.com/call?ref=you...

Socials ↓
https://robotostudio.com/
https://x.com/studioroboto
  / 11290247  

hey how's it going I'm going to jump
hey how's it going I'm going to jump
straight in this is how to get your page
straight in this is how to get your page
straight in this is how to get your page
Builders from a sloppy not so good not
Builders from a sloppy not so good not
Builders from a sloppy not so good not
so editor friendly version to a really
so editor friendly version to a really
so editor friendly version to a really
really nice gold standard page builder
really nice gold standard page builder
really nice gold standard page builder
okay so you've probably seen this before
okay so you've probably seen this before
okay so you've probably seen this before
um this here is what a regular uh page
um this here is what a regular uh page
um this here is what a regular uh page
builder would look like now you can see
builder would look like now you can see
builder would look like now you can see
it only really has the title that's
it only really has the title that's
it only really has the title that's
working in here that's not so good what
working in here that's not so good what
working in here that's not so good what
we're going to do is we're going to fire
we're going to do is we're going to fire
we're going to do is we're going to fire
through these very very quickly using
through these very very quickly using
through these very very quickly using
cursor uh IDE which is an AI IDE super
cursor uh IDE which is an AI IDE super
cursor uh IDE which is an AI IDE super
useful I'm going to include the at the
useful I'm going to include the at the
useful I'm going to include the at the
bottom uh but we're going to fix this up
bottom uh but we're going to fix this up
bottom uh but we're going to fix this up
real quick so let's take hero so I'm
real quick so let's take hero so I'm
real quick so let's take hero so I'm
going to press command a I'm going to
going to press command a I'm going to
going to press command a I'm going to
press command K and I'm going to say
press command K and I'm going to say
press command K and I'm going to say
refactor this to have an icon from
refactor this to have an icon from
refactor this to have an icon from
sanity icons we're just going to use the
sanity icons we're just going to use the
sanity icons we're just going to use the
default icon Library you can use lose
default icon Library you can use lose
default icon Library you can use lose
side or any other version that you've
side or any other version that you've
side or any other version that you've
got um and include a preview with a
got um and include a preview with a
got um and include a preview with a
fallback for the
fallback for the
fallback for the
image um is there anything else that we
image um is there anything else that we
image um is there anything else that we
need I think that's it so what it should
need I think that's it so what it should
need I think that's it so what it should
do is it should go through and you'll
do is it should go through and you'll
do is it should go through and you'll
see it's going to add the icon at the
see it's going to add the icon at the
see it's going to add the icon at the
top so icon image icon from sanity icons
top so icon image icon from sanity icons
top so icon image icon from sanity icons
the descriptions so because of the way
the descriptions so because of the way
the descriptions so because of the way
that I've set the prompt up it will
that I've set the prompt up it will
that I've set the prompt up it will
always populate the descriptions the
always populate the descriptions the
always populate the descriptions the
best guess for the first version um it
best guess for the first version um it
best guess for the first version um it
actually uses my definition of a button
actually uses my definition of a button
actually uses my definition of a button
here but I'm going to remove that
here but I'm going to remove that
here but I'm going to remove that
version um so everything is good other
version um so everything is good other
version um so everything is good other
than that button so let's change that to
than that button so let's change that to
than that button so let's change that to
a string because this is a demo
a string because this is a demo
a string because this is a demo
environment and you can see how we have
environment and you can see how we have
environment and you can see how we have
this Media or else an image icon um you
this Media or else an image icon um you
this Media or else an image icon um you
could also do things like if there isn't
could also do things like if there isn't
could also do things like if there isn't
a title make it so um title needs to be
a title make it so um title needs to be
a title make it so um title needs to be
set so title needs to be set that's
set so title needs to be set that's
set so title needs to be set that's
another nice one that's in there so
another nice one that's in there so
another nice one that's in there so
let's see how this looks so data in here
let's see how this looks so data in here
let's see how this looks so data in here
looks good to me I removed data in here
looks good to me I removed data in here
looks good to me I removed data in here
fingers crossed title needs to be set
fingers crossed title needs to be set
fingers crossed title needs to be set
cool you can do whatever you feel like
cool you can do whatever you feel like
cool you can do whatever you feel like
in this and we going to do the same
in this and we going to do the same
in this and we going to do the same
thing um so we can do this for another
thing um so we can do this for another
thing um so we can do this for another
one just to show you the same example
one just to show you the same example
one just to show you the same example
let's do it for Split Image um so
let's do it for Split Image um so
let's do it for Split Image um so
refactor to include a preview with
refactor to include a preview with
refactor to include a preview with
fullbacks for the title and image um
fullbacks for the title and image um
fullbacks for the title and image um
also include an icon from sanity icons
also include an icon from sanity icons
also include an icon from sanity icons
and that should be it there should be
and that should be it there should be
and that should be it there should be
enough to go through the whole thing um
enough to go through the whole thing um
enough to go through the whole thing um
give you good descriptions hopefully
give you good descriptions hopefully
give you good descriptions hopefully
give you an icon okay so it's image icon
give you an icon okay so it's image icon
give you an icon okay so it's image icon
again because it's Split Image you
again because it's Split Image you
again because it's Split Image you
there's more icons out there but for the
there's more icons out there but for the
there's more icons out there but for the
sake of this demo perfectly fine so
sake of this demo perfectly fine so
sake of this demo perfectly fine so
you'll see this go through and this
you'll see this go through and this
you'll see this go through and this
should ultimately make a much better
should ultimately make a much better
should ultimately make a much better
experience and this is not all this is
experience and this is not all this is
experience and this is not all this is
kind of like the first layer so let's
kind of like the first layer so let's
kind of like the first layer so let's
have a quick look down here beautiful
have a quick look down here beautiful
have a quick look down here beautiful
it's remember the same thing I set on
it's remember the same thing I set on
it's remember the same thing I set on
the previous one it's gone through the
the previous one it's gone through the
the previous one it's gone through the
process of doing preview and then
process of doing preview and then
process of doing preview and then
prepare select and then prepare um so
prepare select and then prepare um so
prepare select and then prepare um so
great this is great let me flip
back interesting I seem to have lost the
back interesting I seem to have lost the
ti the sub oh I know something that
ti the sub oh I know something that
ti the sub oh I know something that
we're missing uh so something that I
we're missing uh so something that I
we're missing uh so something that I
always like to have inside of here is a
always like to have inside of here is a
always like to have inside of here is a
subtitle so I like it to say whatever
subtitle so I like it to say whatever
subtitle so I like it to say whatever
the actual block is so make sure we have
the actual block is so make sure we have
the actual block is so make sure we have
that on both of them so uh this should
that on both of them so uh this should
that on both of them so uh this should
be a hero so let's flip back and you see
be a hero so let's flip back and you see
be a hero so let's flip back and you see
look here hero nice and easy to identify
look here hero nice and easy to identify
look here hero nice and easy to identify
Split Image especially when they both
Split Image especially when they both
Split Image especially when they both
have the same icon so this is good this
have the same icon so this is good this
have the same icon so this is good this
is the first step I'd say that we've now
is the first step I'd say that we've now
is the first step I'd say that we've now
moved from like an F tier page builder
moved from like an F tier page builder
moved from like an F tier page builder
to a you know a
to a you know a
to a you know a
C+ now what I want to show you is the
C+ now what I want to show you is the
C+ now what I want to show you is the
latest and the greatest stuff from
latest and the greatest stuff from
latest and the greatest stuff from
sanity so I'll flip here very quickly um
sanity so I'll flip here very quickly um
sanity so I'll flip here very quickly um
and I'll go to the actual page builder
and I'll go to the actual page builder
and I'll go to the actual page builder
itself now this is a very very simple
itself now this is a very very simple
itself now this is a very very simple
Page Builder and something I've done
Page Builder and something I've done
Page Builder and something I've done
earlier is just here so this is the
earlier is just here so this is the
earlier is just here so this is the
insert menu okay so this is you put it
insert menu okay so this is you put it
insert menu okay so this is you put it
in options insert menu and you have
in options insert menu and you have
in options insert menu and you have
things like uh the ability to actually
things like uh the ability to actually
things like uh the ability to actually
group these so for example we could
group these so for example we could
group these so for example we could
group The introductory blocks which is a
group The introductory blocks which is a
group The introductory blocks which is a
hero storytelling blocks which may be a
hero storytelling blocks which may be a
hero storytelling blocks which may be a
Carousel and a Split Image upsell blocks
Carousel and a Split Image upsell blocks
Carousel and a Split Image upsell blocks
which is all three of those um and the
which is all three of those um and the
which is all three of those um and the
ability to give different types of views
ability to give different types of views
ability to give different types of views
so we have this View and we also have a
so we have this View and we also have a
so we have this View and we also have a
grid view but here's the here's the most
grid view but here's the here's the most
grid view but here's the here's the most
important thing to take away from the
important thing to take away from the
important thing to take away from the
whole video the on the grid view we have
whole video the on the grid view we have
whole video the on the grid view we have
this thing called preview image URL
this thing called preview image URL
this thing called preview image URL
which basically reads the schema type
which basically reads the schema type
which basically reads the schema type
name from the static so keep an eye out
name from the static so keep an eye out
name from the static so keep an eye out
on the static over here where I've got
on the static over here where I've got
on the static over here where I've got
Carousel PNG hero.png and split
Carousel PNG hero.png and split
Carousel PNG hero.png and split
image.png that directly correlates with
image.png that directly correlates with
image.png that directly correlates with
the name of each of these um blocks so
the name of each of these um blocks so
the name of each of these um blocks so
watch this I'm going to save this I'm
watch this I'm going to save this I'm
watch this I'm going to save this I'm
going to flip
going to flip
going to flip
back and I'm going to go press add item
back and I'm going to go press add item
back and I'm going to go press add item
and you're going to see this incredible
and you're going to see this incredible
and you're going to see this incredible
new way and again all the icons of this
new way and again all the icons of this
new way and again all the icons of this
have broken through so uh again I could
have broken through so uh again I could
have broken through so uh again I could
do the same for Carousel but I'm just
do the same for Carousel but I'm just
do the same for Carousel but I'm just
going to keep this nice and simple um
going to keep this nice and simple um
going to keep this nice and simple um
but you can see how when you flip
but you can see how when you flip
but you can see how when you flip
through these you can see all the
through these you can see all the
through these you can see all the
different items inside of there and
different items inside of there and
different items inside of there and
that's pretty cool so we're probably up
that's pretty cool so we're probably up
that's pretty cool so we're probably up
to a B+ but get ready here's the AAR
to a B+ but get ready here's the AAR
to a B+ but get ready here's the AAR
version you hit this grid and boom you
version you hit this grid and boom you
version you hit this grid and boom you
see exactly what is going to get put
see exactly what is going to get put
see exactly what is going to get put
into the page now if you want to go a
into the page now if you want to go a
into the page now if you want to go a
little bit further and you want to make
little bit further and you want to make
little bit further and you want to make
this a little bit nicer I would
this a little bit nicer I would
this a little bit nicer I would
recommend keeping the same canvas size
recommend keeping the same canvas size
recommend keeping the same canvas size
for each of these thumbnails I haven't
for each of these thumbnails I haven't
for each of these thumbnails I haven't
done it but it's going to make it look a
done it but it's going to make it look a
done it but it's going to make it look a
lot better and a lot more consistent
lot better and a lot more consistent
lot better and a lot more consistent
however for the sake of this demo this
however for the sake of this demo this
however for the sake of this demo this
looks slick and you know exactly what
looks slick and you know exactly what
looks slick and you know exactly what
you're getting yourself into you know
you're getting yourself into you know
you're getting yourself into you know
what the title's going to be doing you
what the title's going to be doing you
what the title's going to be doing you
know what the description is going to be
know what the description is going to be
know what the description is going to be
doing before you even get the live
doing before you even get the live
doing before you even get the live
preview working so this is one of those
preview working so this is one of those
preview working so this is one of those
great user experience little tips that
great user experience little tips that
great user experience little tips that
make your whole editorial experience
make your whole editorial experience
make your whole editorial experience
that much better hope this has helped
that much better hope this has helped
that much better hope this has helped
have a great day take care