How to build a modern site with Next.js and Builder.io

And we're live. Yeah, all right, yeah, this is so exciting, man, I can't believe I'm on stream with Mr Blue call or coder himself, Jack Harrington- what's up, man? Oh hey, I'm going full time with this stuff. That's what's up. So I'm super excited about it. You know, it's like the community has given me enough support where I can go out there and get some good sponsors and then go full time with it. So I'm really excited. So amazing man, I'm so privileged and thank you for joining us and thank you, hey, it's my privilege to be here. Thank you, you know, I'm a big fan. I've been a big fan of yours for a while now. Well, thank you, and it inspired me to write a few pieces on my own, like from your videos. I kind of worked it out. If you remember, you did that the video about next JS and model Federation. Oh yeah, I'm like, yeah, back in the day, it's been a while now. Well, you know it's still going on- but like, oh, those two things are always fighting with each other. You know, it's like, yeah, yeah, yeah, yeah, it's hard. Well, we'll see what the what Zach is doing right now. Now to the Joint fight dance. But right, yeah, that's pretty cool. Wow, that's really cool. So maybe it's a a good idea to introduce myself as well and yeah, absolutely yeah, I'm devrel and developer experience at Builder Io. If you don't know me, I do a lot of the blog stuff at the Builder and streams and whatnot and whatever I can. That just to get a developers knowing who Builder is and what we do. And it's a quick and Builder and mitosis and party town. So we got lots of stuff going. Yeah, party town is super cool and Builder's super cool and quick is super cool. Yeah, you guys got it going on. I don't really know much about mitosis. Maybe we should do something about that sometime. Well, for that we would probably need our very own Sami, who does most of our sdks, and he, he's kind of in charge of mitosis. He had this great, great talk he gave. I don't remember what conference it was, but the, which he kind of called- I think he called it the defragmenting the web and it's a whole story of him and how he kind of Compares himself to Sisyphus. Show more

Um, eventually, yeah, compare ourselves right, he had to kind of do more and more things to kind of get everything together and working out with all the Frameworks very nicely, which was interesting. And then the Frameworks change. Um, yes, it always changes. So you were asking me, before we went online: what, what is my handle, what's going on? Oh yeah, what's with the Hamada Yogi thing, because it's like sometimes, and then other times, Yogi, what, how do you even say it? So, first of all, it's you all right, I'm sorry, I thought I heard it's fine. Americans have this problem all the time. It's funny to me because, you know, I, I'm, I'm American as well, like my dad is American and he named me and I was like, what were you thinking, man? Right, you just gave me a hard time, you know. Yeah, so the story behind the kind of the screen name is, well, my, a lot of my friends call me Yogi. Okay, oh and, and Yogi is kind of a mix. There's reasons behind. So, first of all, my name is joav gun power. So it's just kind of taking yo into GE and making Yoji, right, that's one thing. Another thing that kind of works is: I am. You know, I'm a mixture of everything. I'm half American, but I'm also half Indian. Right, I'm having my mother's parents are originally from India. I love it, yeah, so that's kind of also connects to the yogi part [Music] and the Hamato Yogi thing is now it's becoming trendy again. But do you remember Teenage Mutant, Ninja Turtles? It was not my thing, but yeah, I do remember it. Yeah, maybe Michelangelo and all that sort of stuff, yeah, right. So Splinter, who was, oh yeah, the rat? Yeah, it's not like my thing. Well, this is a little bit more obscure thing. He had a master, okay, and his master's name was Hamato Yoshi, oh, and then I just tipped that play and it was a screen name of mine. And gaming, yeah, I like it. Yeah, that is deeply obscure, I like it. Yes, very obscure. So, beside obscureness, let's talk about something that's not obscure, like: would you build it? Yes, oh, yeah. Show more

And Builder, yes, oh, hopefully Builder's not obscure anymore. No, no, no, no, no, no, definitely not all right, yeah, let's talk about next year. Yes, let's talk about next year. So, yeah, next JS, and we're gonna, let's talk about next JS, let's talk about, oh, yeah. So what we want to do is kind of see how we're gonna build a modern site with Netflix and Builder IO, right, yeah, yeah, yeah. And you're kind enough to just come on and let me kind of lead you towards starting a new project right with, with building right. So we're gonna do the operator right, right, right for that router and all that fun stuff. We're gonna start because everybody's talking about RC's, nextjs. It's a great piece of tech. It is such a big fan I- I love that stress man. I've been a fan. I've been using xgs since version two, right, yeah, yeah, way back in the day, he needed SSR like nextjs. You don't want to roll your own, you really don't want to. I've seen it done. It's not not good, but, yeah, nice, JS is the way to go. Show more

Yeah, no doubt. So SSR with react, that's the only way to do it. You have remix, right, remix Redwood Astro, yeah, right, different kind of things. But again, yeah, like nextjs is a little bit more mature. It's been around for a long time. Or sales has done an amazing job of being a great custodian of it, always kind of updating it and and keeping it Backward Compatible. So it's a great fun and and at Builder, we love next year so much. And even the site- the Builder site- is built like the whole platform is built on top of xjs at this point, oh, nice, okay, some some parts are quick and we're starting to move over and over, okay, but that's, that's a process. But we're not here to talk about quick, we're here to talk about next right, and I say we just jump in. I'd say we just jump in, let's do it. Yeah, so you're the driver man so you can share your screen and kind of maybe just open up a terminal window. Okay, I'm gonna go over, get a terminal window so you got my screen showing or like I'm I'm sharing, right, hey, there we go cool. Nice, let's move you on top because you're driving the side seat, right. All right, so what's? Are we gonna go and just build out a new MPX, a new xjsi? Is that the idea first? Okay, go ahead. Okay, we'll call this builder app builder rap. Okay, I'm assuming you're gonna use typescript and yes, Tailwind, yeah, why not? You already click this? No, so you know it's. Yeah, I like app. And then we'll obviously use the app router and we will use our standard input or Alias and let's see, let's see, right, okay, like usually I I did like source and app directory and kind of like those other things. Show more

All right, so we have an xjs site, right, and we got our nice big fonts and our GitHub co-pilot and get out of the way for us. Okay now. Okay, now we go over to Builder. I'm guessing, or what are we doing? Oh no, we're not doing that yet. Oh yeah, okay. Okay, now we open up the turtle on the window, again npm in it, and this is going to use pnpm, don't worry. Oh okay, app builder, okay, Flash, oh no, dot IO. Oh okay, athleticist at latest. Okay, that's it. Yep and yep. Let me make this a little bit bigger so we can both see it, would you? Yes, I definitely want to do that. Okay, you want to integrate it, right? Oh, yeah, for sure. And look at that. It's. It's going and check out what it's doing. It's updating your nextjs config, okay, oh, and it made some changes. We can actually go and see what changes it made. It's installing the dependencies and it's adding. Okay with Builder Dev tools. Nice, all right, right, right, webpack plugin. And shout out to Adam Bradley, who, who made this integration possible. Adam is one of our- uh, one of my- main contributors to Quick. He is the guy behind Party Town. He used to be on ionic and stencil and now he's doing quick with Manu and mishko. And he's also, of course, doing stuff for for Builder itself, because, again, we gotta, gotta make the product better, right, yeah, yeah. So this is a Dev dependency, like I. I get why devtool is obviously a Dev dependency, but why are reacting the SDK? Why are those Dev dependencies? At the end of the day, you only need them for development because the Builder, the way it works, it gets built and build type, but you get just react components and then against and then the way. Okay, I'm excited to see how this all works. Okay, right, what's next? Oh, all we did is run that command, which is pretty cool, right, yeah, so we got that very cool command which was for all those numbers, npm and app builder, IO, latest, got it, okay, and now you know what? Let's just see if our app runs. So, yeah, okay, yeah, okay, all right. And then I'll go back over to my arc and I'm going to create: oops, not in that window, over in this window, and You tab for localhost 3000, cool, and whoa, whoa, what? Show more

Oh, wow, wait, what Isn't that cool? Yeah, that's a little UI. How is this working? Okay, the behind the scenes, the way this works, is kind of Adam went and patched into the dev server of nextjs right in webpack. Okay, the way it kind of does, it kind of writes to file systems and then he adds a little overlay like in HTML that wraps on to your app and then starts this whole process. That's really cool. So that's all. The magic over is over here with the next JS config. Show more

We want to do this, require web with the builder Dev tools and all that. Oh, that's awesome. Okay, well, let's get started. So there you go. There you go, guys, wow, wow. And it has an authorization. You authorize your space. Okay, sorry, I, I flip through that too quickly, my bad, but there was obviously a. I have built, or I I just logged into builder at one point because I was like curious as to what Billy row isn't, and so I had that already, right, so if you wouldn't have been logged into the, taking you to create an account and then you grade your account, obviously right, but basically what this kind of thing did is authorize your app to work with the builder UI. That's freaking cool. And now you just push a button, seriously, just go to your app. Okay, wow, that is, that is smooth, that is really smooth. Show more

Okay, and what do I do? Oh, okay, so I've got now this new thing where it's like like I'm scrolling over stuff and these are: ah, so these are CMS segments. This is, on my guess, a default page, so or not? What is slash Builder demo? So this is content that actually is coming from Builder, right, right, and if you see, you have that little, first of all, you have that little button over there. But you also look to your right hand side. You have your building Dev tools, right, cool, we'll get to, yeah, okay, but the first thing we can do is just click that button, kind of see what happens if you hover over component. Okay, so we're gonna go and do our let's see register. Next components, let's do that. One open and Builder, right, so what this does is goes and opens while they're inside the UI and you get into our visual editor. Show more

No kidding, now this is individual editor. It's your Swank dude, thank you. This is what. This is what Swanky, Swanky, sweat, Swanky. It's like it's it. This is slick, it's like it's really well done. I'm, I'm very impressed. That's what that is. This is that's a new word for me, really. For my thing, I was like, maybe schwifty, like Rick and Morty style. I I'm I'm halfway tempted to Google it, but I don't know what we're gonna find. Well, I don't know if you wanted to, but maybe it's gonna be like: not safe for work. Oh, okay, yeah, maybe it's a Philadelphia thing or something. To me it's like that was what you'd say when you thought it was you know. Good, okay, sorry, yeah, yeah, okay, you know what you say in Hebrew. Show more

Yeah, oh, what do we say? Which is cool? Oh, I like it. You know, we need a new state manager with that, as the name was like: oh, I'm gonna pick the name for a state out of out of Germany, you know. And then I had I had to learn how to pronounce that name in German, because otherwise people in the comments give me all kinds of stuff about it. Oh, you're not pronouncing it, right, you know, whatever. Yeah, it's like people not being able to to pronounce- and I'm the only one who cares- like I go and I talk to other developers and they're like it's Dustin and I'm like no dude. And now I'm making I'm the official advocate of out there, right, exactly, with the German pronunciation. Yes, yes, you got the guttural thing going on. Okay, let's stop. Show more

Let's stop yesing, let's, let's keep going. Yeah, I'm digging on this. I want to know how to integrate, react more deeply into this. I'm excited, all right, so let's have a look at what we have here. Right? So we, we are in the Builder UI. What you have is actually the exact same thing, that kind of renders inside your app, like we saw this in localhost 3 salad: right, right, right, Builder component. Now on the left hand side, three thousand, and then this is what we're looking at. In fact, actually, we put them. We can even put them side by side if we wanted to, but that probably might not look good. Yeah, okay, you're gonna lose your space for the editor, you know, yeah, yeah, yeah, sorry, okay, I was, I was gonna get tricky there, but let's come on, you got it okay, come on, you gotta either close it or move it. It's kind of: yeah, yeah, yeah, yeah, yeah, yeah, hold on, hold on, okay, separate tab from the split. Okay, there we go okay. Oh yeah, I didn't mean to throw us off off track there. Okay, it's all good, so fun. So on the left hand side, we have, you see, we actually can see our layers. So those right on the left hand side, right, you can click along in here and see this is: yeah, that's pretty, oh exciting. It's a react founder. Yeah, now, if you go, you see that you're right now on like a tab there right on the left pane. You have right, yes, and you have the plus and over here. Yeah, I have a custom component there. You have a counter. You want to drag and drop it inside there. Okay, there you go. Oh, for some reason it starts off at 99, but we're good. Oh, I see we have an initial count even on this thing. This is pretty cool. So it's: hold on, we go back over here. Why can't I like, okay, whatever, I know 60 or whatever. Yeah, yeah, okay, cool, I mean, I'm, I'm assuming at some point, like if I, when we Mount this on the oh wait, actually here, if I go back over here, am I going to see it? Okay, not yet, not until I hit like save or something. Okay, you gotta publish your changes, right, oh, yes, makes sense, okay, so, yeah, we can do that. Okay, publish your changes. However, now just a little caveat. Show more

Right, you got to refresh, yeah, okay, and there's a kind of a funky thing right now. Okay, let me just give a little disclaimer here. Right, okay, is still in beta, this is, and we're still working on the SDK for next JS, etc. Etc. So right now there's kind of a funky little thing happening here, which is there's a really heavy Reliance on caching with: oh my gosh, yes, yes, at Browder, oh yeah, yeah, so we, we might need to even like reboot the service, not reboot the server, oh okay, oh, oh, yeah, okay, can I just do like a forestry: clear cookies, clear cookies, refreshed, ignore cash. Let's go see inside our next JS app. Oh, there we go. Show more

Okay, that's okay. I. I forgive that totally because, like app router caching is, yeah, it's still, it's not messing around, right, and there's multiple, and then there's multiple levels of caches. So, yeah, that too, and they also kind of monkey patched fetch there, and there's all kinds of weird things that go, oh yeah, turns out, maybe they're gonna undo that. So I'm happy about that. There's actually going to be a react fetch. We actually have to go specifically get it, which I always thought was a better idea. Anyway, like, don't monkey patch things, please. No, I think it's. Yeah, yeah, that should be fast, it is what it is right, but let's get back out. Oh yeah, did you see what? What just happened here? Wait, what happened? What happened? What component? Right, which is a custom component and what is a custom component? We didn't talk about it even no, no, no, yeah, I mean, I get it. There's a counter and all that. That's awesome. I'm assuming we have an ability to register that somehow. And let's look at our clothes: oh, go back to our next set. Is there an? Okay, all right. Show more

So, oh, wow, we got a lot of stuff. Now, when did that all happen? So that happened while you ran the type server. You went through the UI as soon as you registered that and you went to your app, you brought in the Bill of content, but during that phase it also generated the counter and the example kind of, and all the generation of of these files. Right, I definitely know in that mode. So let's go back: components calendar counter. Oh, look at all that. So, look at that, we have a counter. Yeah, why it started at 99? Because we have already noted the initial count, right, okay, and you're actually doing like the type: oh, wow, look at that initial count. Show more

Okay, and I'm not. I had expected, kind of like you know, sort of the usual kind of attribute, you know, type, number or whatever, blah, blah, blah, blah, blah- default 99, that sort of thing. Thank you, GitHub copilot for like I mean, not that there's anything wrong with that. Data stocks are awesome. Yeah, well, I mean, I, I expected that and yet, no, you went in and actually I mean I'm not seeing any in anything outside of wow, this is really cool. So you basically went in, saw that there were these props and they're like: okay, we're gonna actually basically break them up on the camel case. And we see that it's a number. Therefore, we're gonna make it a number. That that was that's slick. Okay, you want to see something cooler about that. Let's go back to our next JSL, like: okay, oh, wait, our next JSF. Yeah, got it, the localhost, the localhost. Show more

Now maybe it's time we look at the actual Dev tools. Like, we have a button there it says open, yeah, no, oh, yeah, well, I mean, I'm sorry, maybe we should. It's fine, it's really cool. Yes, all right, whoa dude. Oh, I see, okay, so that's that one. And then we get the oh wow counter and look at that: oh yeah, wow, okay, oh, I see. So I could actually make some amount of change correlate with wow. Okay, cool, nice, you could change the Builder input name so you saw initial count inside the Builder UI, right, yes, and you can actually change it from here to kind of give a better display name, if you. Oh, I see really cool, cool input counter start thing. Oh, wait, it limits me inputs. Yeah, that's fine, that's, that's reasonable. I'm down for that, okay, and then back over here we go back. Show more

No, kidding dude, that is sweet man. Yeah, that Adam went all, all guns placing into this. Yeah, it's like lots, lots of web sockets magic going on. I'm guessing there's the. Okay, so it's an iframe kind of post messaging back and forth. Okay, there is a websocket. If I'm not, if I'm a member, correcting just for for this part. But like the Builder UI, the way it works also is we have to have kind of an iframe inside the editor to kind of get the changes percolated inside. Sure, we have also websockets and it talks to the dev server and post it back and forward. Dang, okay, again, very slick, very, very slick. I'm glad you like it. So now we saw that we can actually kind of just change our inputs and stuff. But the we want to say, maybe we kind of want to create our own components and and see it just being registered or something. Show more

Can we just make one? Yeah, let's give it a try, okay. Yeah, sure, man, I'm always game, you know me, infotechst, you know, or just, we're gonna make a folder of it. Okay, so make input text exports defaults. Okay, I don't know, initial value or something. How about that? Yeah, oh, sure, why not? Yeah, hello, okay, sure, thanks. Get up Copilot, sure, okay, cool, I love them. I love how GitHub copilot helps you so much, like he. Like he gets us right. He really does, he gets me, except he does not get me at all by doing that. Are you kidding with me now? Wow, I actually had somebody in the comments once. It was like saying: you know, this is what true react developers do. They don't use jsx at all. And I'm like: are you what? No, what, why should you do this? No, it's crazy. Show more

Well, the funny thing is that it'll also get another, like the other group of folks who's like: when Deus Ex first came out, a lot of folks were like: you're mixing my, my Js and my, my J and my htmls, like my peanut butter, my chocolate, kind of thing. I don't like it, yeah. And then, like in the past couple of years, when people don't get jsx, they're like: oh, where's my jsx? Wow, you're right, that's changed, it's the same. Like CSS and JS. They're also like: why is the JavaScript and CSS mixing? Okay, here you want to have some fun? Yeah, generate this, convert this like that great element to jsx, let's see if it can do it. Interesting, yeah, why not? You know what the heck? Except? Thank you, GitHub co-pilot. Now you've actually done the right thing, although we're going to see: oh, yeah, label, okay, fine, I gotta have the label. Yeah, fine, fine, fine, fine. Yeah, we gotta have semantic HTML, right? Oh, yeah, I'm glad that it. It gets on my case for that. No, it's either. You put a label next to it, for, yeah, I gotta get the html4 thing going on. I don't know, although, did you know this trick? Oh, no, please, yes, so if you take the label and put the input within the label, oh, thank God, because, yeah, because otherwise it's going to be like: uh, yeah, you had to create this ID and then, if you have multiples, then how do you manage that ID? That's a drag, so that's no fun. This is like: thank you so much for that. You're welcome. Seriously, I can't believe I teach Jack something. No, no, no, no, dude, every day, every day, I see this stuff. So, okay, so we want to do. I didn't make that a div, so we're gonna layer these with some Flex. Give us those little Gap. Make this 2XL [Music]. I love it. They all win, I do, I do, you know, I do too, like, okay. And then actually, here we go. So it should generate: make this. Give me the class name for a Tailwind input. That looks really nice on a white background. I mean, I, I don't know anything about this, oh, that's not gonna work. But whatever, I'll just grab out the class name and then undo foreign, I don't know what. Sometimes it works and sometimes it doesn't like it's. Oh, I have a great idea. How about we replace the entire file like that? That's exactly what I would have wanted. You know, it was kind of it exaggerates a little bit too much, right, yeah, sure, otherwise I'm, I'm fairly okay with this. I probably would have in line to handle change. But, yeah, this works for me, okay, what's? How do we get this over and Builder? All right, so let's go back into our localhost 3000. Show more

Yeah, okay, right here. Okay, let's go to our jar. Now hit that back button, okay. And now again, again, okay, hit the bed. Looking again, did we save the file? We say the file, yeah, but we didn't add it to the registry. Open Builder dot app registryts. I'm guessing that's something that we have to do. Show more

No, no, no, no, no, go back, go back. You missed what you missed it. Oh, unregistered components. You dog, you dog, that is so cool. Wow, so it automatically. Oh, why, yes, why, yes, please, I will take that, thank you, wow. Okay, Isn't that cool. That is cool. Starting correct value. I mean, I would know it. I wouldn't probably name it that, but whatever, that's, that is sweet. Okay, can I actually drag it? I, I can't really drag and drop from here. No, right, that's something. Not from here, that's no, they got to do it. And to believe UI, that's fine, but I'm actually cool with that. But if I go over back over here and I'm going up to here, I'm guessing that, oh, look at that starting text: fight, wait, what that? Okay, that might be a little buggy. Yeah, whatever, okay, how about refresh? Oh, but, dude, you caught the freaking Tailwind. Oh, that is so smooth. Just, you just write your code, you, you flip a switch and then you can pass this over to whoever like- your designer, your product person, okay, and it's already something that's ready. Yeah, okay, hold on, hold on, hold on, okay. Show more

So if I do over here and I go like text color, oh there we go. It was getting cranky about hinting or something. Let's make it, I guess, really light so we can definitely see that it's teal. Oh you dog, that is so cool, dude. No, seriously, I was looking at kodaks and I'm looking at figma and trying to figure out, because I swear to you like somebody actually posted a poll on this just recently, I don't remember who, maybe it was Theo. Oh, no, no, no, no, no. I'm sorry, it was Your Man, Steve, who like said, like how much time- it wasn't, I think it was on LinkedIn- but like, what percentage of your time do you spend as a front end Dev converting from figma to IRL? You know, actually, like going through all that rigmarole and I'm telling you, man, oh, it's terrible. And like, yes, figment got Dev mode and all that sort of stuff, but it's not, it's not. Yeah, you know, yeah, it's not great, right, it's not there yet, but but you know what? The biggest time sucker is what you just did, right, a designer comes and says I want to change the, the label, to green, and you're like, oh God, no, please. Because you're like, oh, this is. You know, blah, blah, blah, blah. But this is like whoa, you could just literally like be on the zoom call or on yeah, whatever, when you're on your team- Microsoft teams, if you sorry to be you, but you know like. You can be on the team's call and be like, okay, what do you want? You want it bigger? Okay, cool, hold on, let me, let's see two. Show more

Oh wait, two XL. How'd that work actually? How about three, 5xl? You know something like that: hit save guys like, yeah, that's it right there. You know he bang done. You know perfect. Also, do you want a little gapping? No, make it happen, right, I know you can also say how about we change the order of the of, like where that image is sitting? Now, I want it. Yeah, above the counter. So you know what you can do now if you're a designer. Just just move it, grab it. Yeah, just move it. Okay, where am I grabbing? I'm like, oh, I'm grabbing, oh, I'm grabbing basically anywhere, and let's just scroll down and can I like push it down? Does it actually do that now? Okay, son, yeah, I can like what this might be working. Yeah, okay, yeah, but you know what you can do. You can also go back to the, the left pane. You have your layers. Oh, right, right, you can change. Yeah, I can just go take that down and you're like: okay, so there's the start here and oh, and then there's a whole section for learn more, which is that: oh, that's down there, okay, I see, okay. So if I want to put that, I could just drop that below counter or I could actually move that into, like this, this section, yeah, yeah, or around before a link or something like that: oh, look at that, oh, wow, so hold on. Oh, this is a grid, Okay, cool. So why don't I? How do I set my gridding to like be responsive? Yeah, baby, this is cool. You got all the CSS properties you want, almost right, nice, add them, change them, you can also, okay. But what about like for? Because I'm assuming if I, if I get back over here, wait, hold on next step, if I go like this, like, is it? Yes, okay, I'm gonna get rid of the dev tools here for a second. I don't. How do I get rid of the dimples? You gotta just refresh or something. No, no, either refreshed or just open it up again. Do you have the your, your arrow? Yeah, we'll just refresh that, right, okay, so it went columnar, awesome, so it's definitely responsive. So how am I doing that? Show more

So, Builder demo: this is kind of more advanced. Builder control, right, yeah, I'm sorry, you know, you're with me, all right, I'm all about the advanced stuff. No, oh, Advanced maybe. No, no, it's not about, not literally about- Advanced, not that it is Advanced, okay, yeah, but you can go okay. So, if you, I need to see it, so you have the inner layout right. If you see right under the layout, first of all, you have the alignment above, then you have the width. Show more

No, on the right hand side, right, yeah, right, so you have your mind. Besides that, you have, like you're in a layout, yeah, and then this is actually a flex container and it has a center to justify in the lung. Yeah, we have like set defaults for certain things like Flex. If it's a row under, like mobile, it kind of just wraps down to Vertical, sure, and there's all kinds of default stuff. You could change it. You could actually kind of like write your CSS and add some video currents if you want to, okay, but what are the break points, though? I mean, is there a way to say, like, get small, make it this a bit large, make it that kind of thing. It's again, it's like regular CSS. You could add the media query and do that. I'm- I'm honestly not aware of what exactly- are very concerned, but you also have the option to kind of change the the screen size within the editor if you want. You see on the clock, yeah, yeah, yeah, yeah, yeah. So this is now down into cell phone size. Ah, that's nice too. Yeah. So I was gonna say, oh, the other alternative here on the whatever is like the kodux thing I was looking at as well to kind of get this, this feedback cycle, you know, so that your designer and your developers were talking a little bit more easily. But this is, this is killing it. I like it. But now, what else? What more do we want to do? What we want to do? I think, okay, go ahead. No, no, I mean I, I, you're the driver, come on, I want to understand, like, how this is like, okay, how did this page actually render? Like I mean, what are we? Show more

What's going on over here? Like, like over to my code, like, what does that route look like? Go Back to Basics here, get out of the way, let's understand it. Very handy so far. But, oh, I see, okay. So under app page: all right, that doesn't look like what we'd be looking at. That looks like: yes, all right, got it. Okay. So now we got our next biblical key, which I'm guessing we're gonna want to show. Oh, okay, wait, oh right, yeah, and this is a- oh, this is an RSC. We do not have a use client at the top of this and this is an async function page. That is really cool, yes, like there is a trick that we're doing here right now. So if you go and open up the render bill of content, which is a component that we actually generated during build time, your your devtool build time, right, so we're returning the render Builder content, okay, and that is actually a client component, right, all right. Okay with the definition on that. It's inside your code, right? So what does that look like content? It looks like content we're working on making, like, the typing's a little bit better, because you know it's cool. Basically, we can. The thing is, you can put anything you want inside a component, right, and also, yeah, create within Builder any type of component you want. You could also have state inside a builder component and kind of connect it to to different data sets. Show more

You can also Loop within the builder stuff. So you know there's a lot of like juggling here between typings and and having an SDK. That kind of also works on every kind of tech, right. But currently the content it gets back is kind of blocks. It's a Json blob. Yeah, it has an ID, it has the blocks itself, it has a lot of information and metadata about what it is and this is kind of how we- we- build stuff. So it also has property, like when it was updated, the one of the folders are what model ID it is right, where were you? It was made to get it. So this also has like the kind and the less preview URL and if it has links inside or if it has children or if it has custom targeting. Show more

So if you want to build personalization, you can also use the metadata and kind of have different content render for the same thing. According to. I don't know if you're in in the US or in Europe, right, so you can personalize stuff. Yep, you've got an internationalization, all the rest of it. Yeah, wow, all right, and that's actually a very. That didn't seem like a massive payload to me, given the amount of stuff that's on the page, but I guess that's that's these blocks here, right, right, yeah, if you want to adjacent stringify, yeah, each, each block is massive within the thing, let's, let's do that because we're we're those folks, all right, yeah, go for it. Show more

I've done that a few times. I always like doing that, yeah, yeah, yeah, all right. So I don't know if you've ever kind of tried it. It's big enough. This is big, okay, right, yeah, yeah, it has to have the responsibility. Yeah, you have lots of stuff there. Think about this, like, what would you have to kind of do if you were building a lot of react components? No, yeah, intricate. Is that page like all the Json payload that it needs to bring in, right, yeah, no for sure. And to do it all responsibly and all the rest, right. And then, if you look actually at the let's see the view Source on this guy, right, yeah, okay, so you would actually be able to see it in here as well, right, but don't forget, we're inside of Dev mode right now and this is not gone through the build process, and this has also stuff that it'll work. Show more

Oh, No, actually, that's that's next year. Yes, it would be in there. No, I know, I know, yeah, yeah, even in build mode, you're gonna have a Big Blob of Json inside, but are we gonna get the HTML though? Oh, yeah, yeah, totally. So we get the pre-built HTML. So your SEO folks are going to be like: yes, Rocco, okay, cool, nice, and we got some really good. I mean nice, okay, this is really cool guys. All right, we also like our images. We have a CD. So something that a lot of people don't kind of realize about Builder- like besides the dragon drop, the editor thing- is: we're CMS, right, we're a headless CMS as well, right, oh, yeah, yeah. Show more

So I, I wouldn't want to be able to search. You like, I want to have a list of, like classic sort of content management management system. You got like a list of products, right, and you want to be able to search by those products so you can have the search function then have all the skus and everything with that. So how do we do that? Or are we going to go through that? Because that seems like a like we're 40 minutes, we're 40 minutes in all, right, we haven't even answered any questions. [laughter]. Right, do we have any questions? I don't even look at the chats. Oh, I don't know, yeah, between, let's see, all right, I've been having such a good time that, yeah, yeah, yeah, I, I majored just you, you being excited about this, because you know I was maybe scared. Maybe he's not gonna like it. Are you kidding me? I'm geeking out on this. This is awesome. No, seriously, when you like, oh, when you had that, like the Tailwind stuff, how does it? Show more

Oh, okay, how's it work? I want to know how it works. I'm sorry, that's confidential. No, stop it. No, the way it works at the end, right, what does it have to do? The way we register components? It's basically it uses your code, right, yeah, right, just renders within, like the thing. All it does is post a message with, like the your properties and whatever you have in, but it's still running within the base of your app, right? What you're seeing inside the editor? Yeah, oh, right, okay. So, yeah, over here, this is actually straight up. This is localhost. Yep, Simplicity of that I like. It's like: yes, okay, that makes a lot of sense and it just like: adds on then all the the overlays to do, you know, the duplicate, all that sort of stuff. Show more

Yeah, nice, awesome, awesome, really cool. So what do you see? Do we want to keep looking at how we kind of get data, and I don't know if we're going to do a whole like product thing. I don't know. Yeah, let's do a couple of things actually. Yeah, I use mid-journey and made some random products, you know, a couple days ago, so that's true. Let's just stick him into the CMS first. Yeah, let's do that. Yeah, right, so in order to go back: yeah, you have that arrow on the top right. Got it okay. Well, I didn't publish updates. So what has happened to those changes? Is it like they're still gone? No, if you go back to your Builder demo page, okay, do do that sort of sorry. Show more

No, no, well, some are, some are okay. Yeah, I think we, we should have put it up. But if you did command save, it would have worked. It's like in vs code, like if you didn't turn on your auto save, it's not going to turn on the safe, right, it's fine, okay. So let's see. So, page models: it's clearly not a page model. Structured data models is what I'm guessing we're going to look at. Yeah, so we want to do a structured data model and we want to create that. Okay, and we want the data data. Okay, products, singular and plural. No, whatever, whatever you want, you can name it however you want. I don't know. Okay, I mean, if you're in, please provide a valid description. Products we want to sell. [laughter], please, I love that you always have to have a description. Yeah, all right, and please, you know, please buy that. Okay, yeah, please buy them, please buy this. So, in order to kind of create a product, what do we need? No, that is: look at that. You stop it. Wow, yeah, okay, this is really okay. So what do we want to do? We want model type options. Okay, cool, cool, the web hacks. That's nice. I need a field. I would need a field like name. I would like text. Is it required? Yes, okay, default value, nothing. Show more

Local, oh, look at all that. Local. Yes, of course you'd want to, you'd want to localize that, but I don't really want no one do that right now. And then price, and that's going to be a number. All right, price or a number number. You can just type: oh, there we go. There's a little streamline, stream yard sharing thing that's sort of inconveniently placed wherever I want it to be, where I don't want to be. Okay, default value, I don't know, 100 bucks. And then let's see, oh, and then the last one I really want to see is: I want to see image, because this is always the hassle. Come on, all right, yeah, now um file somewhere in here. Where this file? I'm just blind, I'm blind. Okay, yes, and oh, no, we don't want webp, why not? I'm just kidding, it's a joke, like you know, whatever. Oh, oh, I see we can have a default. I, I actually have like a I I said to a friend of mine last night this little handy finder trick that allows you to convert webp files, because, like so few things can use webp files that you want. I just want a JPEG or PNG. Just make it PNG and in on the finder. You can actually, I'll show you because we need these files, right? So, let's okay, so, and I think that's it. I don't, I don't know. All I have to do is upload them to the Builder UI and we'll have them filed. So it will save this. Okay, name is okay, and we want to choose a final photo? Yeah, so hold on, let's see, do I? I just drag and drop sort of thing. Second, drag and drop, or you can load from a URL or you can like. In our not free plans, you can also generate AI within the Builder products. Show more

You guys are all into the AI. I love it. That's great. We gotta try this thing, right, oh, there we go. Okay, let me. Let me just go find with that project I was working on. I don't know how your desktop looks, but mine is always such a mess. My desktop is clean. It's my, it's my folder of like examples that I really need to go through. Like at some point. It desperately needs some work. Actually, hold on, uh, because you really want to show off your work in mid-journey, right? Show more

Oh Lord, oh no, I don't want to do barberheimer, that's. That would be. That's too. Forget about it. Let's just use it. We also have an option to use free stock photos. No, stop it. I, I want to get this on there because I think it's very cool, like hold on. So, all right, man, I'm not gonna, I'm not gonna- kill your Buzz. Yeah, right man, yeah, don't harsh my butt. He's like: okay, oh, by the way, Steve, Steve, I, I missed this thing, but you don't need a command s. It should save, like figma, Etc, like automatically. Okay, yeah, come on assets, of course, looking for this is like yeah, also, something that Steve mentioned is, we're right now like working on the next JS SDK and we're gonna have our RSC SDK. Basically, that's gonna not send the Json payload. So when you do like server components- real server component, okay, whatever, okay, sorry, I don't want to mess your up your demo, like I didn't know it was gonna be doing. Not mine, man, this is your thing. Yeah, you really want to do this. It was so an owl. How about that owl owl photo? Yeah, there you go. Nice, maybe 10.. Versions history: dang, please give the answer name. Yeah, what am I naming? Oh, wait, what? Because you need it named the entry itself. Oh, cool photo, but I guess, yeah, I, I see where you're going with that. Okay, that's fine. You know, this is something we've heard feedback that it would be might be nice to if it generated just a hash or something, or- yeah, that's okay, an ID. Show more

Well, I'm sure you can do a programmatic import. Right, yes, you can. Yeah, you can also write. Yeah, I'm assuming that's what most people would do, because they've already got an existing product catalog. They just need like dump it in there. Yeah, and there you go. So I love the fact that Steve is right now in the Stream and entering the YouTube stuff and he's saying you can set up a field to Auto populate the name too. Show more

Oh, nice, oh, that's cool. Oh, gotta get that guy. All right, um right, what is that? A hedgehog or a squirrel? What is that? It's not a hedgehog, it's a. It's a. I think it pops up. I didn't even note it, I don't know. Yeah, it could be, of course. Yeah, funny meerkat. Well, let's go with meerkat and meerkat photo again and we will paste that over there and we'll do your cat's worth 200 bucks for sure. Okay, yeah, so now we've got some data in here. Yeah, meerkats are very cool. Actually, groundhog, was that what I was thinking? You know things that pop up and yeah, yeah, and tell you if you're gonna have right, I think. I think groundhogs are bigger. I remember from Groundhog Day. The groundhog is a significant Beast. Yeah, they're big. Show more

Okay, so now there was a really cool like recommendation of like API endpoints that we had before, but that's fine, I'm sure it's around here somewhere. So what are we doing? What are we doing with our mirror cat and cool, cool, all right. So, first of all, to just to kind of be in time. I see we're, we're getting, we're cutting short to to like our deadline of the end of the Stream. So what we're going to do is just let's get this data inside our next JS app, right? Yeah, sure, like you saw, we had APA and Billings. Show more

So in order to do that, you can just flipping around too fast for me, Jack, all right, my bad, okay, fine, I'll stop. Go back. Go back to the UI of Builder, right, oh, oh, okay, did you want it? What you wanted to know? This one, this one, right, and in order to see, like, how we can do it very easily, we have, like, inside our data models, on the left hand side you have where we inserted the data. So, yep, that one's the model, yep, right, and you can click on your product. Oh, and yeah, there was, there was, there was. Yeah, yeah, that was what I was looking for. I'm like, oh, yeah, okay, yes, okay, let's just, that's fine. Let's go over to new page, my page. Yeah, just remember when app router, right, and we have a catch-all route on a dot dot dot. Oh, right, yeah, yeah, yeah, okay, right, sorry, yeah, okay, hold on my page. Yeah, sorry, and that's going to be. I'm I paid, yeah, [Music]. Yeah, yeah, yeah, although I think, just because we have the capital route. It's gonna catch all of our, our stuff, right? I don't think we're gonna able to get to my page. No, I think I think it'll find my page first because, more precise than the catch-all, the catch-all is gonna, I'm thinking. I think I thought that and I tested it out and it didn't align with what I believed was right. Show more

Well, we'll find out. Get to know every day, right, great. Learn something every day, right, exactly, how about? I don't put me? All right, so do something of the data. I love it. Yeah, all right. But there's another method on the Builder instance, which is: get all it's in order for us to get. Oh, so you can, yeah, and then you don't have, and then you don't have to use the promise, because it's already a promise and you could do just delete the promise, or you can do a wait, and then products, and each product. It's an array, right? Oh, yeah, yeah, okay. Well, what am I getting out of here? Oh, I'm getting Builder content, okay, cool, yeah, so we're working on getting the types also and we're going to think of how to do it. Show more

It's still okay, here we go: Master Test my page. Oh, we had in the comments. The prairie dog. It might be prairie dog. That's the one. Okay, that's an interesting function. That's an interesting error. I've never seen that one before. Yeah, what are we doing here? We're doing a building right now. Oh, my page. Lowercase my page, that'll work. Oh, there it is. There we go, boom, I was right. Yes, criticality of the whatever of the Precedence of the router. Uh-huh, so look at that. That's how easy it is to get, like data back. Yeah, yeah, that's great. I mean not like perfectly formatted, because I just did Jason stringify, but yeah, I know, obviously, yeah, obviously, but but you can get your data like people that need to enter, oh, and I can even. Okay, so if I wanted to go and just manually do that, oh, I want I could. Just, I was hoping it was meerkat, but the meerkat would be this guy, whoever. Yeah, oh, it's just so much cuter. Yeah, cool, all right, this is awesome dude. So, yeah, questions like because we are, I think we should right, but I think I see, like some of our my good friends here, my team has been doing a great job answering the people. Show more

That because we've been geeking out and just, yeah, I've been having a great day. This is the most one I've had all morning. I'm so happy. All right, so let's, let's have a look here and let's see if we have any questions that aren't answered, because I'll just add one more thing: so also a builder you can have. Oh yeah, actually, can we answer moral geez, I'm interested in search, because that would really be a thing like: okay, let's say that we had some we want to search for and I can go and well, while you're explaining this, I can go and like: fix prairie dog there, so we can let's go and find prairie dog, because that that ass, I wanna. I want a complete [Music]. Okay, so the way that our API works is kind of: we have the rest endpoint that we could use and also send the kind of queries to. All right, so you could do something like inside the Builder SDK you call Builder, right, okay, so it is an options tag, and then you add a query so you do get, for example, okay, oh, okay, okay, not, not, and then after that like: do options, cool, and then you have- that doesn't seem right, no, that's not right. Show more

A Q micro desk. That wasn't even query high level. I think it's inside. Yeah, yeah, it's a title hole for everyone. But why are we doing that? We can go into: oh there we go, query. Okay, there we go, and you do kind of they. So because everything comes back on the data object, you have to do like data dot, something within the string. Dataname- yeah, we want, yeah, but it's either. That name equals, if I, if I'm remembering this correctly. It's basically kind of Mumbo where somebody's it's an, it's an object syntax. Okay, yeah, here, Steve, it's somebody. Steve, jump in, baby, it's an object syntax. Okay, give me the URLs. Dave, is it possible to share Builder CMS with a customer, with some limitations? Oh, you mean like probably, yeah, so we have all kinds of different like roles. Show more

Yeah, yeah, obviously. So somebody can be an editor, somebody can be a designer, someone could be a coder and you can access different parts. There's also kind of content governance, so you can also schedule things, and some people can schedule stuff, others can't, some people awesome, edit. So you have, we have all kinds of the deep fine grain control here. So you got to go Builder dot, get and product and then we call it product or product, product, yeah, and then, oh, I, I can't. Show more

Oh, I can't actually see all of his um comments. You need to walk me through this. What's in, what's inside of that, all that? Yeah, so, because I, it's like lighting up the or slack or whatever right I, I was so entailed with you that I'm not even opening my computer on stuff. Oh so now I can't find the Box. Well, that, actually that's a really impressive demo, guys. Seriously, he didn't have his computer open and we were still. We got just looking at you way far into this. That's awesome. Yeah, there's something that I can't like. My head doesn't hurt, I don't have good memory. I'm getting old. Also, like, people don't appreciate that about me. They think I'm young but I'm not all right. So you got to kind of do [Laughter]. All right, let me open up a split screen and then I can start just searching for through the docs, because we're not going to get the end of it. So, yeah, but I think it's a very I actually think we should. If we can get this going, that would be great because, like, this is definitely a question that is like: all right, all right, all right, let me find that. I'm sorry, I always get confused with the like we got like used to to, you know, co-pilot and stuff doing for us. It's like, seriously, I, I, I always kind of, um, okay, yes, it is among the bigquery syntax- and then you kind of have to go and where is this? I gotta do a product, the editorial, for example, so you can do where do I find this? Say we have a product we do, okay, so you can do a query. And then you do data dot name. Is this interesting? In the string it's data dot name, because the name is and it could be like whatever you you put in there. So you thought like, uh, and suddenly I lost a little bit of this. Let's see, you know whatever, let's see how it goes. Oh, technical difficulties, I can't hear you, I don't know. Show more

Oh, we just passed the boundary. I lost, I lost all audio. I can't hear, can you? Oh no, I can hear you. Yes, I can hear you, but I can't hear you. This is great, wow, okay, apologies for this, I can't hear anything. I'm trying to fix it. Let's put it back on a nice big home screen so we can make sure. Show more

Builder and speaker. I'm literally at that minute, Mark, at the minute mark. It dropped well, at the hour. I'm sorry, Jack, I just can't hear you. I can't hear you, it's okay, maybe we'll get Mike just to finish this off, just so we can kind of get. I don't know what happened to my computer, just died. Oh no, speak, I'm here. Yes, hello, coming through loud and clear. Yes, hello, not happening. Okay, I lost it. And is there anybody in the comments? Show more

We can hear you both says Geo. So hi, Geo, hey, hey, how's it going? It's going to cry and to die out, like right at one hour. I'm like oh, yeah, yeah, I, I don't know, I don't think it was intentional, but something, through my, my naivete about all this, I certainly learned something. I thought it was great, I thought it went very smoothly and super fun. We've actually got Steve here at. Steve, if you're ready, I can actually add you right into the stream. Oh, awesome, hey, how are you doing? I'm great. Do you want to walk me through this? The the sentence: yes, you do. I know on YouTube chat six times one line. Show more

I see one line. I slapped what's up. Are you what's up, joov? So the query it's a. It's mongodb queer syntax. So, yeah, you're right. Delete what you have after, okay, okay, and open up a new object. So yeah, the key is going to be a string dataname, okay, and the value. Actually you could regex for nothing. That's actually. Oh, yeah, okay, so I can register for, I can write against for prairie dog. Then exactly that would be a simple way to do a search. Let's see how do I get? Oh, it's probably cashing heavily. That should generate a new unique string. Do we have prairie, is it? It'll be case sensitive so we can apply the options modifier to the query. Oh, yeah, yeah, there we go nice and hit it again. So close. Sure we're doing dog product name. Could you go over to the product real quick? Can we open? Yeah, it's going weird. Show more

Yeah, okay, here we go. Funny, meerkat, which is name photo. That seems right. Try capitalizing the D. Maybe we're doing something wrong on the among the query. We can also just apply an exact value to: yeah, okay, I do want to like maybe. Oh, I know what it is you need to do. Actually, do you want to get one or do you want to get multiple? That's the first question at all there. It'll work now with dot games. Okay, it would have worked from a little while ago too. We, we got the. We got the dog, we got him. Show more

Thanks for that. Safety, Steve from the win. Well, I was planning. I was actually just checking. I can only imagine I I know Steve and it's like I'm sure he was just like, oh God, get this going. I listen to the docs but I mean you gotta- I mean before, like before we even try to do this, like it was such a smooth, like perfectly smooth, yeah, and come on, like I mean, how long do we struggle with this? Like five minutes, and it was only because of the whole chat thingy, whatever, it was totally fine here. Don't let me, now that we have you all back. I was gonna close us out if we didn't have you off here, but so let me distract Jack. You and me can catch up another time. This is super fun. Your comments were hilarious too, but let me let you guys finish this out. I'm all right, Steve, seriously, though, really impressive, genuinely right. Yeah, I'm excited. I'll be in the background. I'll pop back on if you need me again. Otherwise, this is. You guys show thanks again. Okay, all right. So, yeah, we got that going and sorry for the technical difficulties. That was kind of I don't know. It just died on me. Yeah, it happens to browser. Yeah, you were like: oh, no, the devil girls are gonna like us today. No, the demo Gods loved us today. This is a good demo. Yeah, it was, yeah, not bad, not bad, so we got it. So, like it was great. It was great. Critical. Geez, okay, I'm a Virgo, so I don't- I don't have no idea what that means. I'm a cancer, I don't know. I'm a redhead, so I'm, I've got a fiery personality. How about that? Uh-huh, I'm in Israeli, so I got good spot. No, hey, I like that. Yeah, and you do. Yes, all right, so we saw how we can actually query data, so we can actually search, right, just yeah. So we answered eventually his query, but I, I, yeah, morals query, which I think was a really good one, and it's definitely one of the things that you expect from a CMS. So like primary CMS functionality, because you want to drive that search page, right, right, you got the search page and we obviously can also connect to to like different API resources if you want, so you can connect to third-party apis, you can connect to other cms's and get your data inside of Builder. Show more

We also have a write API, just everything you need. The way I describe Builders, so I- I used to use Builder right before I joined Builder. That's kind of kind of a gut: oh, wow, that's great. That's always a good recommendation, right? So I used to work at Fiverr for for listeners, whoever doesn't know- and in Fiverr they- I built a product- needed one fiber. You didn't work for Fiverr like, yeah, you work at fiber. Yeah, we're doing fiber gigs. Yeah, there's nothing wrong with that- not that there's anything wrong with that. It's a great platform. Lots of people use it. It's awesome. So I built a product within Fiverr, right where you're doing this whole Marketplace thing. And when I found out Builder and I just hooked it up, we were a small team and we needed to move quickly and Builder was just an awesome fit for us. Just, yeah, I can imagine, like, because I had, like, the CEO sitting here next to me and saying, okay, our landing page doesn't look that good, you got to change this. You gotta change it all right here, right, yeah, exactly, and you could probably, I'm guessing, like schedule: oh, we're releasing this new thing next week on at 8 AM, blah, blah, blah, blah. And literally, like you, you, and here's what the homepage is going to look like at 801.. Make boom kind of thing, right, you know? Yeah, one one thing we didn't touch upon, is it? It can actually have also sections of your page as like Builder content. So you can, yeah, like a section that's a banner for, like a sale for winter or specifically, if it's a women or men's products differentiation, so you can show a banner that has like something for for women's products and something for for men's products, depending on if you know these kinds right. Show more

So I would have to go get the okay, so we'll go up to page models, which is we have page, so go back into our demo page and show off. Yeah, okay, so right, if I have, let's say that I have metadata about a customer and it's, you know, this is a, you know, female customer, so we want to show her. You know these kind of products, blah, blah, blah. Like how do I get that over to to Builder? All right, so the way you would go about that is you could do it twofold ways. Now I'm not sure, just because you're on the free tier, now I'm not saying sorry, we don't have to do it, we just walk through it. No, but then you walk through it. Did you have conceptually? Okay, conceptually, you have a tab that also you have targeting and then you can add queries and kind of, according to metadata, this or that, just show the variation A or B. So you have okay. So I hold on to the, the person's metadata, and then I make a request and that request has on it then that structured whatever. However I choose to divvy up that, that cluster, that person, blah, blah, blah. Okay cool, yeah, great controls. Everything has all right. So, thank you, you like it. Yeah, thank you gladly. I got shown it because it's hecka cool. All right. So do we have time for like one maybe question we missed out here? I know that Mike here has been inside- how much did you cover in this session would be most of what's needed to a typical project. So I think what we covered here is is like most of what you need even to to build kind of an e-commerce store. Right, you could have landing pages for stuff. You can store your data and your products within it. You can. We didn't cover this completely, but you can Target different audiences to kind of show in different things. You have a B test, you have your insights, you have versions for different things. You can save your data. You can register your components. It's amazing, yeah. So I was going to actually answer Rafa cakes there who asked about Tailwind classes, and you got a color that's coming through as a Tailwind class. Show more

Oh hey, oh well, look at that, this is like it. It's like a screen mirror, so like a serious stream. Right, serious dream. So one of the issues with Tailwind- not issues, but one of the things obviously- is a huge CSS class Library. So at build time they're going to want to go through all of the HTML in your application. Obviously that is a runtime parameter because you're going to get that out of the color, is going to get out of out of Builder and it's not going to know to go look at Builder to go and see that you're using a color. So you'd have to White list probably the the colors, all the colors that you think you would ever use. No, the thing is, if you want to do it, okay, the way it, like Tailwind, again, it goes through build time. But remember, we registered from within your code base that is statically analyzed and the CSS that's going to come out of it. It's going to have the class name of whatever is used. If it's user, if you point it the right directory, then it should have the class name within your app CSS. Okay, it has nothing to do with Builder, right, maybe? Yeah, I mean, I think it depends on how, like, if you have it as like a fixed set of options, it's like: okay, so here are the, the colors that you can use. But if the data only resides over in the mongodb of oh yeah, then I could be in there. Yeah, no, it wouldn't. So you're using any random like tl-900 or something like that? You have to whitelist it. Yeah, potentially you could, but you probably have, like semantic colors anyway, you know where you want to have, like this is the the primary color, or this is the secondary color, or the sort of like. Yeah, so there's a way to set up colors- again, I, that is, through the UI. You would kind of get closer to that side. Yeah, there you go. Show more

Ccg, ccg, tutorials- whoever that is has it nailed. Yeah, you could do a draft on custom field. Yeah, yeah, you could do that. That is a good one. There you go, set up a drop down because the field selections of colors. There's all kinds of ways, there's a lot of ways. You could also put the data in Builder and have your color palette and then call it the API to before you build and then add it to your talent: config and running. Yeah, there's lots of them. There's always kind of work around that you can get. Yeah, well, I don't know what about you. For me it's kind of late already. Okay, well, I'll let you go. Well, it's coming up on lunch to me, so at some point you're feeling that Rumble right. All right, it's been a pleasure. It's been a pleasure, Jack. Show more

So thank you so much for having. This is like a kind of a drink. Well, I think you had me with you. Yeah, and sorry for crapping out on on the stream for a minute there it was like five minutes and Steve came on. It was fun, it was. I think people were so happy to see Steve suddenly. You know, yeah, there you go, all right. So once again, thank you, Jack, and thank you all, to all our viewers, and if you have any questions about belberry stuff, obviously you can try and reach out to me and to Steve and to anyone on the team and we'll try to help you with whatever your needs are. And, yeah, and catch the next streams. We do get on the Builder blog, check out, Jack stuff, because it's awesome. Oh, yes, please, yeah, yeah, blue color coder on YouTube, on YouTube, right right, and have a good one, have a great weekend and talk to you soon, man, yeah, absolutely, cheers. Show more