Visual Page Building With Plasmic

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON: Hello, everyone. And welcome to another episode of Learn With Jason. Today on the show, we have I didn't ask how to pronounce your last name, Yang Zhang, is that right?

YANG: Yeah, yeah, Yang.

JASON: So sorry, how do you pronounce it?

YANG: Yang usually.

JASON: All right, Yang. Thank you so much for joining us today. I'm so happy to have you on here. We're going to learn a lot today. We're going to get into visual page building, which I think is such fascinating space, because it's one of those things that when you say it out loud, oh, of course, everybody wants that, but it's so hard to get right. So, I'm really excited to see how you're doing it over at Plasmic. But before we get into that, let's hear a little bit about you. You want to give us a background on yourself?

YANG: Awesome, yeah, thanks for having me. I've been a long time fan of your show. So, it's exciting to be on this end. Yeah, little bit about me, I've been working on Plasmic, which is this visual building platform. And the way that I got here is, essentially, long time ago, I actually used to be more of a back end person, worked in distributed systems, and things very far removed from front end. That was what I was studying in grad school. But after grad school, I got into startups, and building products, and learning about just getting exposure to building the front front end of things. That's when I really fell in love with everything front end. And, you know, these services that users actually touch, and impacting, you know, their lives in various ways through the work. And also just process of working with designers and other non developers on the team. And also getting exposure to design tools, you know, visual tools for creation. That sort of thing. And that's sort of what, ultimately, led me down the path of working on Plasmic, which is, you know, something that was born out of a lot of frustration with kind of the process and the workflow in various teams I've been a part of.

JASON: For sure. It's interesting, because my path to front end was somewhat similar. Like I didn't go to school for this stuff, but I started out in PHP. I started out doing design. I was in a band, and we needed posters and stuff like that. But where I immediately found myself drifting toward, I don't want to update content, so I got into building I got into PHP and MySQL so I could add an interface, people could update the tour blog. I was really into the back end side of things. All my front end stuff, I want to build the template, I want to design this, but I really don't want to do this going in and messing with a little bits of content shift. I don't want to do this maintenance. I want people to be able to do that themselves. So, it leads to, I think at the time I was doing this, early 2000s. Okay, then you have to use WordPress. So, you start getting into WordPress, advanced custom fields at the time was the only option out there for sort of page builder sort of thing. So, I'm in there architecting these really complex blocks and advance custom fields. And it always it was always fine, you know, but it became so prescriptive, because you had to define your pages as, like, the team at Netlify calls them pancakes. I don't know what they are actually called, but like these blocks on the screen that you stack. These kind of rectangles. And within those rectangles, you would let somebody choose. Is this a hero, a newsletter signup, another thing. And then within that, if you wanted to, you could build out a million options, but it wasn't flexible, right. It was I've given you three layouts. Choose one of the three and live with it. Or you can hire me to build you a fourth layout and a fifth layout. And it just felt like it was sort of half of what I wanted. I really wanted people to be able to build things that were beautiful, but with flexibility. I wanted them to have the ability to say, well, I like this newsletter thing, but I don't need this image. I'm going to pull that out, and it doesn't blow up the block when you do that. Don't fill out the image field, it's not like an empty space. It's actually adaptive. So, that is, like, it's interesting to me, because it's so obvious to go and build a company out of that. And, you know, it's such an obvious pain. I don't know a single developer who works on the web who hasn't had this exact pain. I think the chat is confirming it right now, right. And, so, how did you go about doing it? What were the questions you were asking yourself, and what were the problems you were trying to solve when you dug into starting this?

YANG: Yeah. Really good question, and, yeah, I do think that there are definitely real problems to solve here. I think the question of whether this is something that because there's a lot of website builders and page builders that exist in the world, and, you know, I think we get a lot of questions about, okay, how exactly is Plasmic different, or, you know, how does it fit in. And I would summarize it as, you know, Plasmic is, essentially, a visual builder that integrates deeply with code bases. Which I think is the big distinguishing aspect of it. Our most common use case is, basically, yeah, editor for Jamstack websites, et cetera. Essentially, letting non developers jump in and use it as a no code tool, directly in the context of your Gatsby website, next JS website, that way developers plug this into the code base and folks in marketing or design or any other team can just go to town. Update new landing pages, do A/B tests, just freely without repeatedly coming back to the developers and filing requests on them. This just kind of enables all teams to move at their fastest pace.

JASON: You bring up such a salient pain point. Where what I found in the vast majority of tools, they optimize for one user. So either got it built for developers and hard, or it's the tool for designers, and then there's this very manual process to pull out the design and give it to developers. And in each of those cases, you can tell what type of organization you've joined by who's at the top of that food chain. Okay, you've joined a company, and all the tools are built for marketers, you know that leadership is marketers, because they optimize for their style of workflow. And you join another company, and the whole company is saying, hey, I know you're in marketing, but you have to go to GitHub and write Markdown. This is a company run by developers, right. So, what I love is this idea that you can build tools that's good for both sides of this. It's good for developers and pleasant, and also it's pleasant for marketers to use and people who don't write code, because they can go and edit things in a WYSIWYG, but not in the expense of a code experience. This is the holy grail, what we're all looking for. So, I love, love, love hearing that's the angle that you're coming from. Are there any specific differences, because I feel this is a space we're seeing a lot of people entering, a lot of opportunities where companies are getting you put code in here, people edit like this. Is there a is there like a unique thing when you talk about Plasmic that's like this is why you should use it?

YANG: Yeah, definitely. I think, yeah, there's a whole space of headless CMSs and other tools like this, where, yeah, at a high level, it's a similar shape of problem, but I think when it comes to the actual tool itself, I think the big distinguishing factor about Plasmic is it is an actual no code tool. So, you could actually create things entirely from scratch in it if you wanted to. So, it actually gives you a lot of freedom and flexibility. You can bring in code for wherever you want, really, and you can make it as locked down and as strict as, like, you know, any kind of headless CMS set of components. But if, you know, for those times where, you know, you just kind of get a second call to action on that hero section, or can I get, you know, a slightly different layout on the pricing section, because I want to add a new tier. Or whatever it is, right. These things really come up frequently, and for those teams that, you know, do want to give, you know, the non developers a little bit more freedom and flexibility. That's really where our platform shines.

JASON: So, you're saying that with Plasmic, this isn't one of those things where we're trying to make both marketers and developers happy, but you have did I say "happidy"? But you're also optimizing for a case where you only have one or the other group. So, a team that is a team of one, that is somebody who's not a coder, could theoretically start with Plasmic and build their business. Or build their website for the business, and then as they grow when they bring in a coder, the coder will be able to then use what they built in just the WYSIWYG and expand it into a more mature, like, code, rigorous sort of setup. Am I hearing that correct?

YANG: It could be. Also even in teams where, you know, you have already a team of developers, and a team of designers, and a team of marketers, even in those environments, you know, that freedom and flexibility can help just your organization move faster and scale out to even while retaining that speed.

JASON: Yeah.

YANG: Yeah. So, yeah, the whole idea is that, you know, developers essentially plug this into the code base and that way the non developers can create new pages. Possibly out of the sections that come from the code base, but also with arbitrary layout, as well. So, I know it might it's probably a little bit abstract right now, but happy to, you know, show rather than tell exactly what that means in a little bit.

JASON: Yeah.

YANG: Yeah, I think that's kind of what makes Plasmic special.

JASON: Yeah. It's interesting to me hearing you say that, because, like, what I like is that you're almost embracing the necessary messiness of the relationship between a business's needs on the content side. You will always need to adapt, and it's probably going to be fast. Oh, something just broke in the news, we need to adjust the homepage to account for whatever. Like, we support X feature of version 7.8 of whatever thing just dropped today. Or you have an event happen and you go, oh, no, the news is really bad, it would be pretty tasteless to launch this thing today, let's go pull that back down. And you don't necessarily want to rip the whole production road map up and say, hey, whole engineering team, come over here and make these very reactive changes to the website. But you also don't want that full free for all of your website looks like a Microsoft Word doc with Clipart because you're saying, hey, CEO, whatever you're feeling, just go here and move stuff around, it's all drag and drop. Don't worry about it. And what I like is you're saying there's a gradient here. We can go in and as pages mature, like homepage, for example, really brand important. Probably something we consider pretty strict, right. It should go through some checks. Okay, lock that down. We've got a tough schema, you got to conform to the schema, and if you want to make visual changes, you will need to go through a design process, because that's how this works. You need a coder to go and fix this. Landing page or a quick reactive thing. Oh, yeah, we're going to run a promo today because something's trending on Twitter and we think it's funny, we're going to run a promo around that Twitter trend. That needs to be up in 20 minutes, get a landing page fully freeform, go Clipart with it, it's an experiment, rapid, and the content team should try that and see what happens. I love that, because a lot of times you have to choose one or the other. Moves flexibly, but there's no restrictions or guidelines, or there's so many guidelines that you can't do anything without three weeks of reviews.

YANG: Right, right, exactly. That's exactly right. That gradient, or spectrum, is kind of what we really try to capture in the tool. Yeah, you could have certain parts of the website, where, you know, you want that to not break. You want to enforce consistency throughout the design and whatnot. But then there's maybe other parts of the website, where you're just trying to experiment and iterate more heavily. And some of these teams that we work with, they have a lot of campaigns, a lot of activity, you know, iteration that happens on the website. Tons of tests happening at the same time. And those are actually some of the environments where a tool like Plasmic really thrives. So, it's not just the solo makers or what have you. You know, we also want Plasmic to work well for. But, yeah.

JASON: Yeah. So, I got a couple questions in the chat here. First is Ryan asking if I want my client to be able to edit and update the customer facing side of a site, but not edit the business facing side, is there a mechanism to allow for that?

YANG: Yeah. So, I think if your website has different parts, different sets of pages to them, you can actually break your website up into multiple Plasmic projects, each of which has a different set of permissions and set of configurations, as well. So, you could, you know, give folks edit access to just certain parts of the site. And that edit access can also come in various forms. And, you know, maybe some folks you want to give free rein, like we were talking about just now. And maybe other parts of the website are really locked down, and you can only use the predefined components and what have you.

JASON: Right, yeah. Follow up question, not even a follow up, different question from Dr. Verm. Are the web components served by Plasmic, or can they be edited and added to git?

YANG: Really good question. That is, actually, an important feature of Plasmic, the ability to bring in your components that you serve from your own website. So, it's not like you're uploading your code to us or anything like that. You're actually the visual builder is very deeply integrated into your existing website architecture. So, you can actually drag and drop your arbitrary React components, fetch data at pre render time, et cetera.

JASON: Yeah, yeah, very cool. I see Kenny is in the chat doing additional flavor here, saying Plasmic also has a content creator mode that allows certain users to be able to just edit. So, that was what you were saying about really lock down fields.

YANG: Exactly, exactly.

JASON: Nice. Yeah. Looks like we've definitely found we have Ryan Roga's number today. Can't stress how often I've thought about exactly this kind of project. Yeah, I love and, really, as you were describing some of those things, yeah, we need an extra CTA to the hero. Oh, my God, that is so much of a web developer's workload, is tiny tasks like that.

YANG: Yeah.

JASON: For example, at Netlify, we have dedicated an entire day. We call it tiny task Thursday, to deal with reactive stuff like that. But, as you may have just deduced, chat, Thursday only happens once a week. So, even with as reactive as we are, unless it's an actual emergency, we have a one week latency on making these content updates, because otherwise the team is just constantly, whew, here we go, we got to react really fast, never get road map work done, because we're always responding to inbound tasks. So, this, theoretically, solves at least a portion of that. All right, so, I'm excited to actually just dig in and start looking at this. So, I'm going to move us over into the paired programming mode here, so we can start looking at the code, because I want to try this out. So, first and foremost, let's give a shout out to our captioning. We've got Ashly here with us today doing all the live captioning. Thank you, Ashly. That is from White Coat Captioning. And that's made possible through the support of our sponsors, Netlify, Nx, and New Relic, really appreciated. And if your company is looking to sponsor somebody, hey, I got a slot. Hit me up. That is all that I needed to say about that. So, let's instead talk about Yang. You can follow Yang on Twitter @yaaang. That's a great handle. Let's see what else, we're talking about Plasmic today. Head to Plasmic.app to take a peek, which is where I'm going to start, because I'm now at the end of my knowledge about Plasmic. So, what's the best way for me to get started?

YANG: Awesome. This is the fun part. You can go ahead and sign up with a free account. So

JASON: Okay.

YANG: If you use Google log in or anything like that, you can sign up that way.

JASON: Let me just make sure the whole thing is on screen here. There we go. All right. I'm going to sign up with Google. That works. And we'll call it spell it out.

YANG: You can skip this part and do it later.

JASON: That's okay.

YANG: Now that you're in, let's go ahead and create a new project on the top right corner. You can see there's a button there. Let's start with a blank project on the top left.

JASON: Does it matter which one I use?

YANG: The top left one is probably easier to start with. And once we're in

JASON: I do like there's a mobile first option. That's very called out directly, where it's saying, yes, this is mobile friendly, like a template, first thing you've got to do with a template is check. Does it look good on mobile?

YANG: Exactly.

JASON: I'm already excited. Look at this. This is not what I was expecting. I was expecting more like a WordPress dashboard, and seeing something that looks more like Figma.

YANG: That's right. Kind of give you this infinite canvas of boards, but it is a page builder. Everything you're creating is real production grade, et cetera. The art boards here are actually two different views of the same thing, as you make if you change the text there, that's actually changing the text, what it's going to look like, on mobile. So, you can actually, you know, make these overrides, essentially, on mobile.

JASON: So, I did an override on mobile, but what I wanted to do is update the whole site. So, this is where I'm working. This is if I need something specific.

YANG: Yes, exactly. Yes.

JASON: Right.

YANG: So, you can set up your workspace like this, so that you have everything in view, and you can always keep an eye on what things look like across different device sizes. But it is, essentially, this very freeform page builder and kind of web design tool that lets you lay things out exactly however you want. I think maybe for this exercise, just to make it, you know, grounded in something concrete. Say we're building a landing page, just a generic product landing page on some e commerce website or something like that. And, so, what you can do is if you zoom out a little bit and select that

JASON: Got a little over ambitious there.

YANG: If you select that, yeah, you can select this root box here.

JASON: Okay.

YANG: On the top left, see that big blue plus button? Yeah, let's go ahead and click that. Inside of there, under template blocks, you can see this will let you insert

JASON: Oh, okay!

YANG: predesigned sections. So, maybe we'll start with a hero section, which is the hero Section 1, let's say.

JASON: All right.

YANG: There you have hero section one. You can click around and move this into the top. You're already ahead of me. Yeah, feel free to, you know, play around with any aspect of it. You know, you can keep inserting more sections below it if you want.

JASON: This is super intuitive for what I am looking for, right. It does what I expect. I've got the pieces that I'm after, and, like, you know, I figure what we can do is I've got, on the site I've got this duck. So, we can use this as the thing we're selling.

YANG: Awesome.

JASON: And, so, if I what do I need?

YANG: You can go ahead and, yeah, you can also right click that image and hit copy. Copy image.

JASON: Oh, I can paste it right in.

YANG: So, you can choose a place where you want to paste it.

JASON: Where's the actual background image for this if I'm looking at

YANG: There you go.

JASON: Backgrounds. Oh, whoops. Just pasted it right in. That's cool that worked. I need to hit the replace image button, then paste.

YANG: There you go.

JASON: Do I have to click it?

YANG: Yeah.

JASON: Paste there, got it.

YANG: Yeah.

JASON: Obviously, not quite the right size there, but it lets us do some pretty this is cool. This is very cool, okay.

YANG: If you want to adjust the position and whatnot, you can play with all the CSS goodies, essentially. Yeah, if you want to set it to probably for, yeah, an image like this, cover, and you can kind of drag around these maybe the top one, you can drag it down, so you can see the top of it.

JASON: Oh, custom. And then this moves? What am I doing wrong?

YANG: If you just keep it on cover on the top there, yeah, there you go. And then that, where it says top, click that 50%.

JASON: I can click the 50%, okay.

YANG: That's probably the easiest way, yeah. You can play with that number, or drag it around to make it something else.

JASON: Feeling that. I like that. So, then we've got the duck. Just going to shamelessly plug that I do, in fact, have these for sale, and I do, in fact, have a storage unit completely full of ducks, because the minimums on a custom rubber duck are very high. So, please, buy a duck. So, we've got a hero image, we've got a shop now button. We've got some pieces set up here. If I want to drop another version of this duck in. Is it going to work if I just drag in? Oh, my goodness. Does exactly what I want. I love it. So, then I can take one of these. We can kind of float it. Take this one, and we'll float it.

YANG: Oh, yeah. If you want, yeah, if you select that section, you can go ahead and insert. If you press one of the insert buttons, the big blue sort of

JASON: This one?

YANG: Yeah, that works. Scroll down. There's a responsive columns.

JASON: Beautiful, okay. Then I can move this.

YANG: Yeah, you can drag those guys in there.

JASON: Then I move this into here. Beauty. This is great. This is so good. Okay. So, now, you know, we can probably leave this as is. Say I want to just a tag, so you can grab any tag that you want. That's awesome. This is delightful to use.

YANG: Awesome.

JASON: Okay, next thing I want to do when looking at this, this is my frame, and I want to insert template blocks. I need a footer. This looks like a good footer. We built a whole dang website. I'm being a little hyperbolic here, but I don't know that I am. I could launch this right now, and I need to do links to the actual buying and stuff. But the fact that I was able to very quickly say, all right, I want to gather interest in my service, so I'm going to put together a hero, put this image in here, write a little bit of copy, and see if people are willing to sign up to a newsletter about this thing I'm interested in. You're 20, 30 minutes in, and you're live. That is so freaking powerful. Especially considering I didn't have to do a single bit of code here. I was able to just click, click, click, and off to the races.

YANG: Yeah, yeah. That's the idea. And, yeah, actually, speaking of that well, maybe one more thing before we publish this, you can see a little bit of metadata about the page right now, including on the top right there under homepage. You can see the path, or the route to the page, as well as the title of the page. So, you can set these to whatever you want. If you click the gear icon right above it, there's more settings that you can configure.

JASON: Oh, cool.

YANG: Et cetera, et cetera. But, yeah. Yeah. There you go.

JASON: Then you can do the metadata things, this is good.

YANG: Once you're ready, you can go ahead and well, let's see. How do we want to do this? We can publish this to a code base, and what you want to do, if you have your own existing, you know, Gatsby or Next JS website or something like that, you can press the button in the tool bar to show you a bunch of instructions on how to actually get this integrated. If you just press the code button itself. Different frameworks. The idea is you can drop in these snippets of code, and that way load your design into your app. It can be full pages, like what you just created. Also if you create components in Plasmic, then you can render those wherever you want in your code base.

JASON: Should I start a new project, or do you want to start by publishing direct from Plasmic?

YANG: What you can do, actually, we made it easy to spin up a new code base that already has everything wired up. You can go ahead and hit publish. See where it says push to GitHub further down?

JASON: Oh!

YANG: If you press that, that will actually go through this we always have a CLI version of this, create Plasmic app, which under the hood it runs create next app, Gatsby app, or React app.

JASON: And I need to get my log in to GitHub off screen. That's what's happening here. And there we are. All right. So, now we have my we'll call this visual page plasmic nextjs. That seems to be the default. TypeScript, yeah, we can use TypeScript. That will be an adventure for us today. We'll call this lwj, just lwj.

YANG: Sounds good.

JASON: Okay.

YANG: All right. Now, if you go ahead and oh, yeah. I think you can select commit to main. And then you can go ahead and hit publish, and it will start the process. So, what's happening behind the scenes here is it's actually running as a GitHub action.

JASON: Okay.

YANG: For invoking the create Plasmic app CLI, which under the hood is running the latest create Next app, Gatsby app, or whatever you selected earlier. And after it does that, it adds in the Plasmic specific wiring, so that your, you know, the page that you designed, will just show up automatically in the final website. So, this is, you know

JASON: Nice!

YANG: a very normal, otherwise normal, NextJS app that we're spinning up. And then you'll be able to go in and add code to it and all that stuff. And we'll see how to do that in a little bit. But, yeah, the whole premise of Plasmic is that it's not it's very different from your typical website builder, where, you know, invariably, there are various forms of walled gardens and the thing that Plasmic starts from is that you have your own code base. And you have your own hosting, tech stack, and we actually don't provide any hosting today. And, so, you know, we're assuming that you're bringing all that. And we're fitting into that environment.

JASON: Yeah. Okay. So, we have now we're done?

YANG: Go back to yeah, I think if you go to lwj.plasmic.site, that you'll be able to yeah, see oh

JASON: Cool!

YANG: I think there's maybe some lag that GitHub pages has on refreshing sites.

JASON: That's true. Yeah, they cache pretty aggressively.

YANG: Yeah. So, we'll come back to that in a little bit. But, yeah, that's the high level workflow we try tone able for you.

JASON: I mean, that's pretty incredible. So, why don't we pull this down and just look at it.

YANG: Yeah. Perfect.

JASON: There we go. And we'll open it up in VSCode. All right. So, we're looking at a we got the Next config, and we are looking at pages, doing a catch all page.

YANG: Yeah, so, this catch all page is kind of the bit of glue that loads in whatever pages are available in Plasmic. So, if you already have other hard coded pages in your site, those take precedence. Anything that isn't defined is handled by catch all. That's loading in the Plasmic pages. When I say loading in, that's static build time. Part of the, yeah, happening in git further down.

JASON: Got ya, got ya. Those all clear up. And now we have a running site with no red squigglies at least.

YANG: Yeah.

JASON: Can't tell my spell check not to come on, that's a word. Leave me alone. So, yeah, all right, all right, I'm in. This is cool. So, we're prefetching

YANG: Right above your blinking cursor. That line, Plasmic Component, and you give a component name like homepage, hero section, what have you. That's what actually renders the Plasmic design in your page. So, you could actually put that Plasmic component element anywhere in your app. Wherever you want some Plasmic designs to show up. Serves like a placeholder. Whatever you design in the design tool will show up there.

JASON: Very cool. Yeah, yeah, yeah. All right. So, we've got this. Let's see if it updated for us. There it is. So, site's live, everyone, we got it. Does it give us a cert? Does not. Okay, so, I don't know I don't remember how GitHub does that.

YANG: Oh, yeah. I think they had their own you know, like in reality, you should probably use something like Netlify for your actual hosting. GitHub Pages is really more like a toy, you know, environment to preview things in.

JASON: For sure, yeah.

YANG: But it is a simple static host, so it's just enough to let us see that, oh, this thing works, and build the static site for now. Great. So, now that you actually have this going, the next step I think it would be good for us to explore how do you work with this from the code side. So, let's say you want to build some components, or you already have some components, and you actually want to make them things you can work with in the Plasmic visual editor.

JASON: Right.

YANG: So, for that, the first step is to basically, if you go back to the Plasmic tab.

JASON: Uh huh.

YANG: By the project name in the top left, there's an ellipsis menu. So, if you click on that and go to configure project, here if you just type in lwj.plasmic.site/plasmic host. And also, I think we might have to set it to be HTTP instead of HTTPS because of that GitHub pages thing.

JASON: Oh, I got you.

YANG: Essentially, what this does is it will so, I think it should be loading, hopefully. It is reloading. Huh, let me make sure this is right

JASON: Says it's ready. Did I typo this? Let me check.

YANG: No, I think that's right, actually. I think there's just yeah, the HTTPS issue. I think Bruce is right, there's something going on with certs.

JASON: I'll tell you what, we can fix this really fast. Let's just deploy this to Netlify.

YANG: Awesome. Thank you.

JASON: So, we've got a repo. Netlify init. Create and configure a new site. On this is not switch accounts. Try it again. And my team. And we're going to call this lwj no, we'll call this visual page plasmic nextjs. Match the repo name. Okay. So, that's deploying.

YANG: Let's see. Did the Plasmic Studio load?

JASON: I think it did.

YANG: Maybe it was just running slowly before.

JASON: There we go. Next build.

YANG: Actually, yeah, we can start this deploy, and then I think if you can start up the local host, that will be even better, because then we can just iterate locally.

JASON: Oh, okay, cool. So, that's a local host. Then it would be like that.

YANG: See if that works. Okay, good. If you copy and paste that to yeah, there you go. Configure project. And then, yep. All right.

JASON: Now it's running good.

YANG: So, now we're that configuration is basically what you need to enable you to bring in your own components. And now we could start with just writing a super simple Hello World type of component in code base.

JASON: Also, I just realized that the finite raided us. Welcome, everybody, thanks for hanging out. I hope you had a good stream. And we're working with Plasmic. We've built this page. We haven't written a single line of code yet, and we just cloned it down. That's what we're looking at here. We've got the code base on the Plasmic site that was all built with no code. And now we're going to start messing with it. So, to do that, I need to create a component, which I'm going to do by just creating a components folder?

YANG: Yeah, yeah. Components folder sounds good.

JASON: Okay. We'll put it at the top level. You said hello world, so we'll do a hello world.tsx. Here we go. Export default function, and we'll call this HelloWorld. Return. We'll just do one of these. Good, happy?

YANG: Sounds good. There's a Plasmic init file in the root directory. So, if you go there, at the bottom, there's a little commented outline called Plasmic.registerComponent. The first argument to this, pass in the hello world function you defined.

JASON: Like this. And then I need to import it.

YANG: Yeah.

JASON: That's imported.

YANG: Yeah, there you go. And the second argument, let's pass it as an object that just has a name. You can give it a name like hello world again. And the second is props. So, this is a dictionary. This is another object of whatever props you wanted to accept. Let's say it doesn't take anything right now. You can go ahead and save this, and then if you reload if you now go to the big blue plus button to insert things.

JASON: Big blue here we go.

YANG: Then you'll see, you can search for it, but hello world, somewhere in that list.

JASON: Cool! I want it to go here.

YANG: So, very simple component, but it's, you know, it's a start. So, now you

JASON: That's great. I can see how quickly this starts to become powerful, because if I've got a design system, I'm now pulling these in, and what I have to configure is a map of, like, okay, my design system here takes props. So, let's update this to include some text. And that's going to be a string. Wait, that's not how this works.

YANG: No, no. That's okay. So, actually, if you want, I have a very simple component here. Which I'm pasting into the chat.

JASON: Very simple component in the chat. And I'll pull this

YANG: It's a section component. It takes a few different props.

JASON: Okay, all right.

YANG: So, there's like a children prop, which is probably the most interesting part. Hide heading prop, and there's a Boolean prop, and then a class name, as well.

JASON: Let's do that. Auto format for me? There we go. All right. So, we've got now the ability to pass in these props, typing happens there, great. Oh, that's what I was doing wrong. Got it. TypeScript is my friend. And then we've got

YANG: Has a heading that's, like, optional.

JASON: Okay, when I come back out here, I need these. So, we're going to drop these in. For those to be a thing, are these all objects?

YANG: Yeah. The children one, you can give it type: Slot. We'll see what that looks like in Plasmic. It's basically a hole in the component, where you can drag and drop other things into it, if that makes sense. The hide heading one, we can say type: Boolean. And class name, you can delete the class name. We automatically handle that. So, now I think that is enough to try.

YANG: Reload. Not here, here. Here we go. Oh, I'm not sure if that was exported or imported correctly.

JASON: Oh, good question. Did I actually export this? Export function section, which means that it needs to now be like this. Doesn't like that. No exported oh, oh. Let's fix it. Let's just fix it. It's going to be called section this is going to be section. This is going to be section. And that's going to break everything. And that's totally okay. Going to refresh one more time. Replace with another oh, look at that UX, everyone. I completely broke my code, and you fixed it for me. Beautiful. So good. Okay, so, now I'm going to zoom in here. So, here's our setup. I can see this prop, so I'm going to get out of here. There you go.

YANG: You can play with the props similar to Storybook or other environments. And there you can insert whatever you want. Yeah, there you go. You can insert another thing in there, as well. If you have images from outside that you want to drag and drop in, as well, you can do that. So, this children's slot is something that you can do actual React style composition with. You can drop whatever you want inside of it.

JASON: So, now if I publish, just does a thing.

YANG: Yeah, that's right. So, you can let that run. Oh, for the production side to have this, it would also need your code to be merged in, as well. But, yeah, that's kind of the flow.

JASON: Oh, yeah, okay, fair enough. So, let's just fix this real quick and get it so we can have the HTTPS and stuff. So, we'll go here. There it is. And then we go here. Then we search visual. Why is it Yarn in is this a Yarn project? Okay, okay. Okay. And then I need to commit these changes here, as well, right?

YANG: Yeah, for it to show up in production.

JASON: Okay, so, now we've hooked this up. So, this one isn't really going to matter, but this next one is going to be great. There it is.

YANG: And I think, you know, that component that you built just now, it's a super simple one, right, setting section. But if you have already a bunch of these modules that you want to bring in and let people drag and drop, that's, you know, one thing you can do to just accelerate, you know, getting started in the tool. Additionally, you can bring in more complex components. So, things with interactivity, or data fetching, or we can take a stab at one of those in a little bit.

JASON: Nice. Yeah, while we're this should go momentarily. Here we go. Here we go. The first deploy always takes a while, because it's got all those dependencies. Let's, while we're waiting for that, we can actually just start working on it again.

YANG: Yeah, yeah, sounds good.

JASON: So, in here, we've got our components. What should we do next?

YANG: So, a slightly more interesting version of this component is we can make a little collapse component. Say your landing page you wanted to add FAQs, some of those expandable FAQs. So, let's create a collapse component. And in that gist, just a little bit down, I have the code for that.

JASON: Got it already, perfect.

YANG: Yeah, also very super simple. I would not advise doing this in real projects, because this is not accessible or anything like that. It's just a little demo.

JASON: I love this little feature, if I can get it to stay. Look at it go. Fix my problems, make them go away. I love it. All right. So, now we've got this collapse, and let's just run through it. Takes title, children, preview shown, and a class name.

YANG: Taking two slots, essentially.

JASON: Got it, got it. So, the preview shown is whether or not we're showing the collapsed pieces.

YANG: Right. The preview shown is intended for editors in Plasmic Studio.

JASON: Like the default?

YANG: Yeah, if they want to force something to be open, so they can edit the contents, then that's how you can achieve that.

JASON: Got it, okay. Then I think you have the piece that I need here, so I don't have to type it all out myself. So, we're going to register the component, name it, and for the props a slot, default, children is a slot, body, forced shown is Boolean, great.

YANG: That might be a typo. Preview shown is what I meant to type there.

JASON: Okay. Let's see, got section. I just do as many of these as I need?

YANG: That's right.

JASON: So, we'll drop this in here. Then it was preview shown. This one, going to fix this for me?

YANG: Yeah.

JASON: So good. So, now we've got our collapsed component. And when we come out here, if I refresh. Local host refused. What did you not like? Bad gateway. Don't you argue with me. I'm starting to suspect we might be having an outage right now.

YANG: Oh, no.

JASON: Increased latencies, cool. All right, let's run it with the standard build, or the standard dev command. So, we'll do a Yarn dev, because it's a yarn project. That's going to open up local host 3,000. Which means we need to update the URL to be local host 3,000.

YANG: Yeah, actually, if you give it a few seconds, it will prompt you to update.

JASON: This is clever. There's a lot of thoughtful UX here that I think is great, because I've used a lot of apps where the way they solve those problems, yeah, if that's the case, you got to clear your cache, go into local storage, delete the setting, and it will default. So nice when it doesn't do that.

YANG: Hard won lessons.

JASON: All right. Let's add another one. This time I want to add collapse. There it is. And this one goes here. And this wait. Hold on. I want this one. No, I did want the section inside of it. I'm going to pick the section, put it inside of the collapse.

YANG: All right. Yeah. So, this is the title of the collapse. And if you select the collapse itself, I think it has some padding around it. On the right you see that Boolean prop for preview shown?

JASON: Select it out. There you go.

YANG: There you go.

JASON: Oh, I screwed it up, okay.

YANG: You can move that section into the body if you want.

JASON: Okay.

YANG: Yeah, essentially, now if you are toggling that thing on and off, you can oh, trying to delete that text?

JASON: Do I need to move this in?

YANG: Yeah, if you

JASON: Yeah, there it is.

YANG: Yeah, you can also configure the layout if you want it to span the full width of the page. If you scroll down a little bit to size, you can press that little icon to make it stretch. So, now it's a full page width. Yeah, you can customize any of these contents to be anything you want. Question, make it an H4, yeah. Style it.

JASON: Okay. So, then I've got my local host 3,000 out here. So, I can look at this.

YANG: Yeah, that was your last published version, I think. And if you want it to update actually, one thing you could do is in your Plasmic init file, you can turn on preview mode.

JASON: Plasmic init. Oh, in here.

YANG: Yeah, in the code. If you scroll to the top, there's a preview flag. If you scroll down a little bit. I think it was set to false, yeah. So, this will just fetch the latest unpublished version.

JASON: Oh, AWS is having issues.

YANG: Oh, yikes.

JASON: I got a link to the orange website. Let's see. Okay. That's AWS, that's a bummer, okay. It's always when you're live. It's never like, oh, yeah, everything is fine while you're streaming and it all goes out at night. Although I guess for everybody on the other side of the planet, they feel the same way. Okay. So, we got this. Now we're in preview mode, which means if I come over here and I refresh, I'm theoretically in preview mode?

YANG: Yeah. And you'll have your

JASON: Spelled ducks wrong. Okay. So, what I didn't do was add a way to toggle.

YANG: Yeah, sorry, because I think I pinned it to be true, or I think I asked you to toggle it on there.

JASON: Oh, when you toggle it on, there's no override?

YANG: Yeah. You can make the code do that. I just think I left that out of the code. But if you you can check basically whether you're in editing mode or production. And update the code that way.

JASON: Got it, got it, got it. What I should probably do is go into my collapse, toggle that off. Okay. Then if I come out here and I save, or I reload

YANG: Yeah.

JASON: Do I have to publish to get this to pick up the preview mode?

YANG: No, I think it should be not sure why it's always showing there.

JASON: Let me double check if I did it right. Section, collapse.

YANG: Should be right. Can you try refreshing one more time, just in case. Sorry, the other page.

JASON: I think something locked up. I'm going to publish, because I think it's kind of locked up here. So, I'm going to save. So, let's do add collapsible. Oh, no. Did I short circuit it just now? Start over. I don't want to start over. I just want to keep this, which means I should be able to reload this one. Is that getting picked up in the background, that my partner is screaming at the top of her lungs? Let's see. I need to start yarn dev again, because we didn't good call, Gapinho. Thank you. We didn't pick up again to change the preview flag.

YANG: Oh, I see, I see.

JASON: Now I'm getting a bunch of errors, which means I think that's just a NextJS complaining, because it was trying to fast refresh. Let's just start again. Yeah, you're fine. You're fine. There's our ducks.

YANG: Super simple collapse component is alive.

JASON: This is great. I love stuff like this. So, we've got about 20 minutes left. What I would love to see is one of the things that I tend to run into when you get into these sorts of things is I have the components I want people to manage, but then I have my dynamic components. I want to bring in other things and show. For example, maybe we wanted to show the schedule, right, so I have an API where I can pull the schedule. So, if I wanted to show the upcoming episodes, can I just can we pull that into plasmic with settings, or build a component for it?

YANG: Yeah. One thing you can do, actually, is if you so, first quickly show you how these data fetching components work at a high level. So, if you go back into the editor, it's blanked out. If we refresh

JASON: I think it's because I restarted the

YANG: Oh, got it. In that plus menu, if you scroll down just a little bit, you'll see component packages. This is kind of like a store of prebuilt components that you can actually drag and drop in. Toward the bottom, this includes off the shelf widgets and interactive effects, design systems, et cetera.

JASON: Nice. Wow, body, that's cool.

YANG: At the bottom here, you can drag in data, as well, from like a Shopify store or something like that. Also a structured CMS, but we're unopinionated about where your data comes from. We partner with a bunch of other headless CMS companies that are great platforms. I think let's say you want to insert Shopify products or gallery of those in your page, yeah, you can install that and then press the Shopify tile. So, now it's prompting you to configure the settings, but you can leave it at the default store. This is basically where you would point at some other store.

JASON: I got you. I got you.

YANG: You can see at the bottom there, we inserted your collection of products.

JASON: Oh, cool.

YANG: It's basically this repeating set that you can point at some category. You can choose a different category if you want, or choose a different sort order, things like that. There's nothing special about this component. It's actually just a normal React component, very similar to the ones that you just built. But with, you know, a bunch more props, including drop downs and things. It's a little subtle, but the category and the brand, these are actually dynamically listing the collections from your specific store, whatever you have configured.

JASON: Cool.

YANG: Anyway, there's a lot you can do with the custom controls on the right hand side.

JASON: Yeah. Do we have time to build a rudimentary one that lets us pick a number of things to show?

YANG: I actually have this, in that gist, the final example is kind of a slightly longer file. But this is a small set of components to actually build complete apps. So, you can turn Plasmic this is kind of like a stretch of what you can do with Plasmic, but you can actually turn it into a full blown app builder environment. So, if you copy this into a file in your components folder called I've been calling it app building. And the registrations is in the next gist down. And you can copy that into your Plasmic init.

JASON: Okay. We'll put it here.

YANG: Yeah. I think you'll have to import those.

JASON: Just got to click the button a few times. You're doing it, you're doing it. You got it.

YANG: There's also an at all.

JASON: I've never used that one. Quick fix. And that is

YANG: Then the last thing you'll need to do is in these components, I'm using the ant design system. So, you'll need to run I'm going to paste in this command here. I don't know if you can see that. Turned the at sign into I think that's the right text. But what this is doing is just registering a small handful of components that you basically fetch arbitrary REST queries and also display data in a table. So, we can do that actually with your set of episodes. I'm not sure if my audio is gone wrong, but I don't think I can hear or see you, Jason. I see a frozen clip of Jason. But your screen share is coming in fine. Probably Amazon's fault.

JASON: Okay, can you hear me now?

YANG: Yes, I can hear you.

JASON: Okay, I think other folks can hear me, so I need to fix this. I think my camera just died. So, I have to figure out what happened there.

YANG: Oh, no.

JASON: Audio input capture. Let's add a new one, and we're going to make it the Macbook Pro microphone, and everybody should be able to hear me. So, that was fun. I think my camera just went down. I don't know what just happened.

YANG: All right, you're back.

JASON: Fun. So, whatever that was, was not great. But we're okay. So, I'm going to keep forging us ahead. So, I've got what should be in here are data table. Oh, these are nested. That's cool.

YANG: Yeah, so, you can go ahead and insert a data table to see what that looks like. And this is something where on the right hand side, you can pass it arbitrary data in the items sort of thing there. Some JSON. I think that's kind of the right format as what you had your episodes listed in. I'm not sure if I saw that correctly.

JASON: It will be close to that.

YANG: Okay.

JASON: Might be title, date, something like that. But it's an array of objects.

YANG: Got it. Now, the other aspect is you can also insert an REST query into the page.

JASON: I'm going to go ahead and make this full width. Then I'm going to get a Rest Query. Okay.

YANG: So, on the right hand side toward the top, you should see the URL there.

JASON: Let's grab our URL, drop it in.

YANG: That looks good. And you can actually now drag that data table into the REST query. Yeah, that's fine. Now, where it says items, you can right click items. Oh, sorry, the REST query itself has a div, as well.

JASON: I got it, okay.

YANG: Yeah. You can select the REST query. You can do that also from the left hand side, if that's easier.

JASON: That's what I needed.

YANG: Yeah. And then that data table, you can make it point at make its items prop right above. You can right click that and do something special. This is kind of a new feature that we have, which is using a dynamic value. So, you can just click fetched data and click save. So, now it's displaying that fetched data, but the tables in this, the columns in this table, are needing to be updated. So, under the columns, yeah, that first table column. If you scroll up, you can see under data index, I think enter can be is it called title? I forget what the name of the field is.

JASON: Title, data index, looks to be the name field. Is it a thing I can do dynamically, or do I just type it in?

YANG: Yeah, just type in the key here. Is that the right data?

JASON: That is the right data. And then here we'll do a description. Description. Pretty cool. Okay. And then let's maybe add one more. Actually, you know, let's not add one more, because we're running short on time. Okay, one of the fields that I have, for example, is a poster.

YANG: Got it.

JASON: If we can find it. Where's the actual poster? Maybe I don't. So, this would be a dynamic thing. The way that my site works is if you go to an episode, like I go to your episode here. If I want to get the poster, I can just type in poster.jpg and it will build the poster. This is dynamically generated from the database. But if I want to display this in my table, can I dynamically build that?

YANG: As an image, right, you want to show that as an image?

JASON: Yeah, just drop in the image.

YANG: Yeah, maybe that third column, inside of there, you could add in what was the field called again? Sorry.

JASON: Like an image field?

YANG: In your data, what was that field called?

JASON: It's going to be interesting, because we're going to have to get the slug. So, it gives me like a slug.current. And then we can build the URL out of that.

YANG: Oh, got it, okay, okay.

JASON: Can we do dynamic?

YANG: Yeah. So, what you can do is you can add a in that slot, inside table column, this is getting a little bit into the complex use cases of Plasmic, but, yeah, next to table value, let's start by inserting an image right there. And you can right click the image. Prop on the right hand side. Yeah. Oh, sorry. I think it has to be that gray area. It's a little bit yeah. Use dynamic value.

JASON: Okay.

YANG: And you can actually yeah. Choose one of these items. And if you now switch to code.

JASON: Uh huh.

YANG: You can construct the string, the URL string that you want.

JASON: Is it like a template string like JavaScript?

YANG: Yeah. It's a JavaScript expression, yeah, there you go.

JASON: Dope, okay. Ha ha! Then we'll make them smaller, like 100 pixels. Look at that! Yo! This is awesome. So, I'm going to drop a little bit of this out just to clean up, because that one was just default data. Drop it. And then we're going to move this up above here. That's so cool.

YANG: Just to put this into perspective, none of this was built into Plasmic. That table, that REST query, this is just a normal React component that you submitted from user land. So, you know, it could be you could work with, like, you know, any kind of back end or platform. We had a user who built a whole set of components for, like, building Supabase apps for working with other back ends. It's pretty cool. It's been pretty cool to see, actually.

JASON: Yeah, I mean, this is really, really cool that it's able to do that all so quickly. Looks like this went live. So, let's check to make sure that it did what we wanted. Here is our site, auto publishing. And, so, this will deploy

YANG: Yeah, you would also need your code pushed.

JASON: Need to push, that's right. Git commit and say feature, add more custom components. Do a push.

YANG: So, that last little stretch of, like, you know, REST queries from inside the builder and wiring things up to a data table. That gets into the more sophisticated uses of Plasmic, where usually it's someone technical who's trying to build these, like, these kind of UIs in Plasmic. So, it is I thought it was kind of like a fun little peek into some of the things we're sort of eyeing as future use cases of Plasmic. But the main use case today is, you know, just going back to building landing pages, drag and dropping dynamic data from, like, some prebuilt back end. Kind of like most prevalent use case today for Plasmic. So, the idea is there to to enable better collaboration on your team.

JASON: Well, and I love, you know, kind of what we did here, we went from a straight no code, like I built a whole page. I didn't have to be aware code existed. I was able to just do it. Then I wanted to do something more complex, so we built a simple React component. That can also be the sort of thing where what I want is for somebody to be able to place something on the screen, but not edit it at all, so we can do a React component with no props, and that's the thing. You put this on the page somewhere, but you don't control it. And then we were able to say, all right, we want something a little more dynamic, because then in here, we've got our data table. And in our data table, we have this custom data that comes in here. We've got fallback in case something goes wrong, and it's just very cool how much happened, and how quickly it happened, without having to do any major stuff. And, so, I would be able to come in here and decide, for example, I think this is is this the new site? There it is. Let's reload. See our table live. This is extraordinarily cool. So, I can go in and add more props if I wanted to, to be able to go add filtering, add search, add whatever it was. The fact that I'm able to do this sort of thing so quickly, yeah, I'm just very, very happy about this. It's such a it's one of the few tools that you see, where I can see myself using this as a dev and being happy, also doing a quick edit, where I don't want to open GitHub and still being happy.

YANG: Yeah, that's what we're still trying to do. Thanks for the kind words.

JASON: So, with that, we are effectively out of time. So, what resources should people go find if they want to learn more?

YANG: Awesome. So, our website is Plasmic.app. And that's really the best starting point for, you know, diving in, playing with it, and just exploring.

JASON: Yeah. So, we'll do that. We'll also send people over to your Twitter, if you want to give Yang a follow. And just keep up with Plasmic related news. And we'll do one more shout out to our captioning. We've had Ashly here with us today doing the live captioning from White Coat Captioning. Thank you very much for that. And we made that possible through support from our sponsors. We've got Netlify, Nx, and New Relic all kicking in to make the show more accessible to more people, which I appreciate very, very much. We were showing the schedule a little bit, but make sure you go and check this out. We've got all sorts of good stuff coming up next week. We're going to have Sid on the show talking about Rust. So, make sure you tune in for that one. Lots of fun stuff coming after that, and a bunch of things I keep saying I'm going to do this, but don't do it, but new episodes coming. I think that's it. I think we did it. Yang, any parting words?

YANG: Made it through. Made it through my full agenda. That's awesome.

JASON: Yeah, yeah, we killed it. Any parting words for the chat before we call this one done?

YANG: No. Just thanks for everyone's time, and, yeah, always welcome your feedback. We have a great budding community, and, yeah, thank you, Jason, for having us.

JASON: Absolutely. All right, chat, we're going to go raid web page test, Henry Helvetica is doing a show over there right now. Always fun to see Henri, so let's see hello. Yang, thank you so much for spending time with us today. Really, really appreciate it. We will see you all next time.