Contentstack Visual Builder for developers

this is Tim from content deck and I have some very exciting stuff to show you today so we just released in general availability visual building and so we showed a demo at content con a few weeks ago but now everybody can use it so me loving being you know patient zero I took the stuff put it on my personal site and I'm going to show you now and so we'll do a quick demo of how I've implemented it all the features we have or at least the basics I want to show today and then we'll go into the code and I'll show you the minimum amount of code that you need to get this [Music] going so as you can see this is my personal site I've added a little bar here that says okay I'm in preview mode so this is a version of the site that has preview mode and so let's see what we see on the screen here so especially let's start here right so I have the pages are stuff or our system knows about I have videos live streams all those kind of things because it just finds the links in my website essentially and there's some blog post of course now we're on the homepage so let's stay there you can see here there's actually an entry selector if I had personalization turn on for this page my personalized variance of this page would be here so I could make a page for marketers or a page for people who like fuggs I can actually edit those directly here um then we have the panel on the site and the website itself and you can see our cursor changes so when I now um well let's have a look at what this panel does right I have my title my URL SEO is like a group field and so I have like my description my image and then I have my components and those are like our you know modular blocks so I can add a block here choose one or I can move them around maybe this wasn't the smartest move but there you go we moved it around this is not exactly what we want to do for life site but that works like that but of course you can also just click here and now it knows hey this is the hero component on that page and that just opened here so of course I can you know try U whatever type that here and you see it on the screen but you can of course all also do it like this it's some actual live editing like if I don't like relations but you know what maybe we do this I can start typing and it works and so there's like subc components here so this is a CTA it opens its own thing can move it to the right like there's a bunch of stuff here that makes this so easy to use and if I now wanted to go back to my hero I could click out and click again but I can also say well let's click here and see hey what do I have above this because then it opens the form as well right now this is my hero and then here I can click my components I get all my components and so there's all these extra fun features like this one this is a rich text field so when I hit edit I get my rich text or I can do it on the side of course um I can also say you know how about I add a comment for my colleague and say fix this with AI please right and so the next person you know who comes here can see the comment deal with it right so um this is a date for a conference talk that I'm doing in the future and then when I hit edit it actually gives me a date picker how cool is that right so there's all these really interesting thing like for example these are my latest blog posts right so this is a component that has latest articles and I buil like a query field that says okay give me only three um what else do I have I have a design field that says you know what let's feature the first one well and then my components understand oh I can feature the first one that's pretty cool or I can make it like a smaller list and I can put it in the two column components so these are my components that understand these properties it's not like a visual Builder give you HTML it just understands your props and shows you live and so what's super interesting here is these things are things on their own they actually exist as articles around right so when I click on this title for example it actually opens that that article on the site and I can change all the things but like if this is a 7-minute read I can just actually I can make that an 8 minute read and it updates that article that's not what we're editing now because this is the homepage so it understands so you can stay in context and let's just fix this because it's actually seven minute read and so it understands where things come from and that makes this super super cool right so how about let's you know add after this another hero because why not right so it now actually added another hero and it somehow magically took this image but nothing else that's all good um let's just add another image because this is actually connected to cloudinary um because this is like you know a platform that connects to multiple things so let's go to my website folder here and cloudinary and find um let's let's see what do we have let's let's add this one and so this is me on stage right so let's start typing Tim on stage and in my props oh this is actually a subtitle that's fine um I I can set what tag I want for SEO this is my personal component so anyone can do whatever they want here and so this is fues Amsterdam I believe in 2020 I don't know whatever this is cool and here I can say you know what this is a header one and so um again I have my little design here so I can say you know what put it on the right in in this case probably not because I'm on the right I can make it smaller though and this is all just set up in my system here and so um let's see what else do I have I can add a CTA and say uh more talks and I can just go to speaking and I'll link to self of course this can also be a link field specifically so it's a picker I just chose not to implement it that way and so I just added something new and it looks really good and it just works and so now that we've seen this oh wait I have a little triack I want to show you as you can see this is a one taker video and I'm so excited I just come up with things on the spot so how about we go and look at this content and let's change this with AI because we have something called brand kit and brand kit knows um about me because I told it who I am so I can have multiple kits currently it's mine and there's also multiple brand voices and this one is Tim's voice like super opinionated like I added the knowledge fold and so it has all my blog posts and it knows about what I like to write about like um how headless is supposed to work all that kind of stuff and so um how about for this little text here let's change the tone to persuasive I don't know what this will be but it has you know my data it knows about me so let's see what this ISS dive into the tech world with my YouTube channel dive into the tech world with me for me it's it's a little blah blah when it terms in in terms of AI right so how about we brainstorm a little bit and say why don't we rewrite this a little bit because um is to much blabber AI um Bots always right please adjust let's see what it does for us and so this is taking into account my brand content explore the realm of Technology it's kind of okay but it's it's probably it's a little buzzworthy right but how about for now let let's accept for now and so we've just used this and of course um this AI system does a bunch of other stuff you can actually optimize for SEO change the length brain storm but it can also create you other things and so it can create you a headline based on whatever this field is so this is a very interesting way to use Ai and um please don't take this as this is what AI does in content stack we do a lot more and a bunch of videos on that are coming anyways I think it's time to look at some of the code behind this because actually you know what it's not that hard to set up this one is a little bit more involved because I'm getting data from different places and I'm using some specific stuff I like so let's take into account a different code base that's actually a lot simpler this is a next js14 codebase with app directory and this is the minimum amount that you need to get working what you just saw so we need two packages the delivery SDK and the live preview utils so I just have a Content stack file and there's only three things in this so we're making our stack this is the delivery SDK you give it API key delivery token environment all the if you know content stack you know what this is and so this is our live preview we're enabling it through our environment variables and so we are enabling all the things we want on our stack then we have a function to initialize the live preview and this is a function here because we want to call this only on the client site not on the server so I've added a few more things you don't potentially need them however what you do know need is well let's enable it and say mode is Builder you can also do mode is preview so now it's essentially just live preview on the site and if I put it to Builder you actually can also do visual building So based on that mode selector our live preview knows what to do so we have to give it our stack a few details and off you go and then there's the final function here that actually calls the page for the URL right so we're calling a page where the URL is actually whatever we give it in this case slash then it finds a page and so there's one extra thing that makes all this work with visual building is this so we have a UIL in our content stag SDK that's called add editable tags and what this does it adds metadata to every field that you can add to your HTML and then our live preview knows exactly what you're editing and so let me show you that now um so the way we do everything be and I'll I'll explain the base before we go into hey how that live editing thing works um we actually have a state for the page normally you wouldn't do this if you just render something right but we want to keep setting the state of the page multiple times on every time you edit something right so when I go here and actually I edit this it now actually um sends a request that says hey Tim was editing something but it's not saved yet and so even if there's a bunch of rules of if I'm allowed to do this they those don't hit yet because I haven't clicked save and that's how this thing works like the moment we turn on visual preview in here and turn this to um enable true enable true it will um actually have a bunch of metadata um in inside these calls that it knows oh now query it from a different place so this is our preview you know database thing and so every entry change you do it gets that content again and then it sets the page every time and in react when something changes it's reactive right so it will update your stuff now that we have the live preview and on Entry change we get data every time now let's render it so this is our HTML and if you know jsx or TSX people know this stuff if you want to have a description on the page you render the description or the title stuff like that so there's the one extra thing and this is that metadata thing right so when we actually um say well if preview is on let's add this editable tags and what you get actually is on the page there will be a dollar object and that dollar object has metadata properties inside of it and if you add that to your HTML our system knows when you click on that element where the data came from and let me show you what this looks like let's just go here and let's say inspect this element so when you look at this you can see that there's data cslp so content stack live preview page this is our page uid type then we have the uid of this homepage then the language then the fact that it's in components it's the first component it's a hero and then it's a title field so all this metadata allows our system to know when I click on this that it focuses this title and when I change this that it all updates and so there's like a lovely easy to add Connection in your code to make all this work and the only thing you have to do is like if this thing exists so I turn on that function well then add this to my HTML and off you go and there there's a few extra things you can do like for example if you don't have any components we have like a visual building empty block parent class if we add that and you don't have any components there's a little button that says add some components those are Little Helpers that we add and so we also have to say to the the wrapper of all components and in this this code base I didn't call it components but blocks after modular blocks that are that is actually our feature for that um so it knows okay this is the wrapper for all the blocks and then each block will have block zero block one blog too so it knows exactly what you're editing in the data anyways um that's about it there's not much here like this is a bunch of HTML with some for loops and some you know metad dat edit then this is probably you know what 10 lines of code this whole thing with you know creating this stack setting up live preview and getting a page 56 lines this is not a lot of stuff to make this happen right to make it work and so um I'm super excited about all this stuff especially on how it integrates because content stack is now a platform it's not just a CMS this is hosted on content stack launch um we are doing a bunch of automation related things from contents that automate that fill up my data for my YouTube talks or my YouTube videos I haven't shown you that that's for later um we have the personalization I'll show you that later as well so there's all these extra things and there's even something like a developer Hub so I can make my own project code that is specific to my stack anyways I'm happy coding feel free to reach out to me personally or come to our Discord Link in the description go to our Academy there's lots of learning like visual learning on all this as well so go there also the link and that's it happy coding cheers