We sit down for a chat with Steve Sewell, CEO at Builder.io, to talk about the experiences that inspired him to craft a visual CMS and start a company around it. Along with coding and running a company, Steve has become a popular content creator, and he explains why he believes short form TikToks are a great format for teaching people to program.
Episode Notes
Steve was working as an engineering manager at ShopStyle and found that an increasing amount of his team's time was spent working on custom requests from departments like marketing and sales. They tried headless CMS but the data and components couldn't keep up with ever evolving needs. They wanted a drag and drop system connected to their code, data, and components.
This pain point inspired him strike out on his own to create a new product. The vision was a tool that would allow colleagues from across a company to make changes to web pages without requesting dev time, but would also ensure that any changes made would be up to the standards of the design department and not introduce errors that engineering would then have to fix.
Hence, the company's pitch for a plug & play system that integrates with your existing sites & apps. It relies on a few key ideas:
- API-based infrastructure that is native to your tech stack
- Works with any frontend or backend
- Build with your own data, like product catalogs or customer data platforms, to create rich, dynamic experiences
You can check it out for yourself over at Builder.io.
Follow Steve on Twitter and TikTok where he breaks down websites and effects he finds interesting.
Congrats to phoenisx for being awarded the Necromaner badge after answering the question: Property 'share' does not exist on type 'Navigator"?
TRANSCRIPT
[intro music plays]
Ben Popper Hello, everybody. Welcome back to the Stack Overflow podcast, another live at the Next.js conference edition.
Kyle Mitofsky Woot woot.
BP I am here with my good buddy, Kyle, who is an engineer on our Public Platform Team. I'm the Director of Content at Stack Overflow. I know a lot about content and not so much about programming, so I brought Kyle along with me to ask the hard questions. So we're very lucky today, we are being joined by one of the speakers here, Steve, who is the co-founder of Builder.io. Steve, welcome to the show.
Steve Sewell Yes, thanks so much for having me. It's a fun setup we got here. It's a pretty fun day.
BP Yeah, it's been a great day.
KM Steve is actually just the perfect join of both of us. He knows a little bit about content and programming.
BP That's right, that's right. We had to have him on the show both for his TikToks and his coding wisdom. Steve, for people who don't know you, tell us just a little bit of background. How'd you get into the world of technology and sort of work your way to where you are right now?
SS Totally, yeah. So I originally went to school interested in technology entrepreneurship. The business program was definitely a consulting program, not an entrepreneurship program. Computer science was a little too theoretical. I wanted to build iPhone apps out of the gate so I drop out, start learning iPhone apps, start learning JavaScript, start learning all the things to spin up a startup, an application, a website. After years, a couple startups, both kind of medium success in various ways. One got acquired by a company called ShopStyle, so they're like a Google shopping alternative. It's actually a pretty good place to go browse apparel from a ton of different retailers that they crawl. And we did this huge sort of transformation to bring them headless. So we had an AngularJS front end, all API backend, this is 2015, and learned a lot in that process. Things like Next.js, Vercel, Quick, et cetera, did not exist back then. There was a lot of challenges. We made it work well enough. Ultimately when we ran into bigger issues around content management and marketing team that needed to spin up and modify pages daily, and an engineering team that could not code as fast as the marketing needs and experimentation needed.
BP Ooh, I've been to this pain point before. Okay, keep going.
SS Yeah, you can maybe relate. So what was funny is we tried headless CMS. It's great, but the structure of the data never fit the ever-evolving marketing needs. We had these components in our code, we just needed people to always rapidly assemble them in new combinations. So that got tedious, the backlogs got long, and marketing got tired of three month wait times for an edit, whatever. And so at a certain point they grabbed Webflow I think it was, or Wix, they grabbed a drag and drop builder. They made one of the pages they'd been asking for. They were very nice about it but obviously frustrated, and they're like, “Hey engineering team, can you please just kind of copy and paste this onto our Angular website?” And it was like, “That's not how this works.” So the next thing was “Well, can you embed it like a YouTube video?” It's like, “That doesn't work either.” And they're like, “Okay, what about you take our ShopStyle custom product catalog and all of our Angular components and put it inside of Wix or whatever.” And I was like, “That doesn't work either. These are not options. These drag and drop tools like Webflow or Squarespace or Wix or whatever were not designed to plug into your kind of bespoke technology and vice versa.” But I remember just thinking my job seemed to have devolved into managing a team of people just producing marketing content and really did feel like we needed to figure out if there's a way to make a drag and drop system connected to our code and components and data that can just plug into our website. It had to be performant, had to be flexible, had to be intuitive. I didn't know if it was possible. That's when I left that job, made the initial MVP– I made like 10 MVPs of Builder. The ninth or tenth actually worked pretty well and that became the business we are today, and that led to other open source projects which we make it into.
BP Okay, that sounds great. So you were solving your own problem. Did you set out, as you said, to do an MVP all by yourself? Did you have a little team with you? How'd you get the sort of genesis of this going?
SS That's a great question. All by myself. And it's so stressful doing things by yourself. You have nobody to even rubber duck. I would rubber duck things to my girlfriend and she's like “This is not an interesting conversation.” But it was good too because in the earliest days of creating a proof of concept, things are evolving rapidly and some engineers are great at that. Like we've got Mishko, the creator of Angular now Quick on our team. We've got Adam, creator of Ionic and Stencil, and we've got Manu, creator of Gin and Stencil, and they're great at flowing with things. We can just develop things rapidly and the sort of learnings can change the project on a day by day basis and it works. I would say for many other engineers who are used to structure and clear requirements and stuff like that it's hard, so it was definitely a benefit to be able to grind through iteratively, and I learned a lot too. One of the biggest learnings truthfully was embracing this nimble MVP experimentation driven workflow. So the first year I tried to make proof of concepts of Builder, I spent a whole year building what I thought was just the perfect implementation for the problem that I had in my head, and at the end of the year I went to show it to Everlane, a large eCommerce company, pretty good brands, and I was demoing it to them and I realized within about 30 seconds of demoing as I was for the first time explaining how they would use this that I totally missed the mark on a decision I made nine months prior. I had made it not plug and play enough. I was like, “Wait, this actually wouldn't integrate with your React app very well.” And it spun it into, “This is just a tech demo. I'll come back to you next month with something that's more actionable.” And I actually went back, I threw away all the code from the last year. I made something enormously simpler and more built on top of what they could plug into their stack more easily, and went back and actually they were like, “Too late.” My old company, ShopStyle, got them as a customer, then later got Everlane and kind of really embraced this iterative feedback driven workflow instead. So testing your assumptions constantly on real customers, not ending up nine months later realizing that assumptions you made long ago were wrong and paying deeply for that.
KM So I love the idea of having a drag and drop editor for the web. I got my start doing .NET development and we had Winforms and we had Webforms. And all of it was drag and drop. You didn't have to lay out UI, you just moved the thing where you wanted to. There wasn't even this ‘asterisk dev’, that was full dev work, and I don't think we should have the asterisk. I think that's a different conversation. But it made it exponentially easier to see viscerally what you were working on because you could absolutely see the output of it. I think the progress we've made with things like hot module reload has taken away some of the absolute necessity of being able to see what you're working on. But even having done web dev for 10 years, if I look at an HTML file, I don't know what it looks like until I run it. It's going to take me until running it to actually see anything that that page contains. I know it has some inputs, but I don't know what it looks like and I think that's really important. One of the challenges of those drag and drop tools, they had this amazing impact of that you could see it right away. One of the challenges was, you drag it an inch, just like this meme in a Word document where you have an image and you drag it and then everything just blows up. You drag it an inch and then it says, “Oh, you know what? I'm not going to lay out just because I'm a child of this thing. I'm just going to absolutely position myself 1192 pixels from the top and 82 pixels from the bottom.” And how do you solve that combination of being able to drag and drop UI while also having it still tidy up behind the scenes to actually something that a dev might be proud of or be able to actually commit into source control and have meaning beyond just the UI components.
SS No, it's a great question. So we're lucky enough to be in a position where we can take inspiration from more small business oriented drag and drop tools. So a lot of the pioneering research and development on what makes for an intuitive responsive drag and drop editor is kind of already done by Squarespace and Webflow in particular I think did a really good job with that. Those kinds of locked-in easy ways to think of things are a lot like writing a Notion doc. Things by default flow from top to bottom, and if you put something side by side it kind of snaps to column. So the combination of really those three things, Notion was a good influence, I think makes for a good set of defaults where you think responsively, you put your pieces where you want. No absolute positioning, oh my goodness. I actually went that direction originally and realized it was a bad idea as you've already found out. Now, what I think is interesting for the future though is, some research we're doing now that I'm really excited about is to address the challenge that responsive design still can be unintuitive. So the idea, like you mentioned, of repositioning an image in a Word doc, there are definitely cases where you just want your button a little bit over to the side. And we've got keyboard shortcuts, you can use arrow keys and we'll adjust margins, paddings, that's really cool. But there's certain cases where you just want it to feel more like Figma, and if you use Figma autolayout, it's less intuitive than just Figma absolute layout, and so we're doing some interesting research now. Builder actually secretly has two modes and one has always been very, very, hidden. But the second hidden mode is the absolute positioning mode. We don't service it because we don't want you to use it because that's not what production code should look like or a production user experiences. But what we have is actually a secret button, maybe somebody will find it listening to this podcast. There's a very secret button.
BP There's an Easter egg somewhere in this podcast.
SS There is an Easter egg in the product that somebody maybe will find. If you do, tweet at me and then I'll figure out how to hide it even further. But there is a way to switch to absolute mode so it feels completely like Figma. And it's fun because it's using your React components. If you have a cool product cell you can drag just inside of a Figma-style experience. And that's cool because I've been talking to people today about challenges of the design system they have in their components and what they have in Figma always being disconnected. What if actually Figma was just inside of your React app and completely seamlessly connected? Then you have complete certainty, your designs are spot on accurate to what's in the code, because you're actually designing with code. Now the challenge is, can you automatically convert absolute layout back to responsive layouts? And I found that there is this sort of technique we were able to whittle down to, and we may eventually use a little bit of machine learning to assist this to do that within certain constraints. And we might have to give user experience flows to say, “Hey, whatever this nuance of a layout just can't automatically convert.” But you'd be surprised, most designs in an absolute fashion, as long as you design for desktop we can convert, I'm just going to roughly say 80% of just designs to be responsive in an automated way. It just snaps in your responsive mode, and actually all the little highlights change color. So like in Figma, how by default things highlight blue, but components highlight purple, we have an orange highlight color for absolute elements and they snap to responsive and it's blue. And we need to make that seamless bouncing back and forth, but I do think there's a world where today everything is responsive, but maybe next year we can actually make it more intuitive to design in a more Figma-style, Google Slides style way, and just make it responsive again. And I hate modalities, I hate having modes for tools, but I actually think there might be a good use case here, and we'll see if this reaches the light of day next year to help solve this too.
BP Very cool.
[music plays]
BP The future of identity is so much more than a login box. Help Auth0 by Okta build that future of identity. Visit auth0.com/stack. Use that link and you'll let them know the podcast sent you.
[music plays]
BP What was the name of the clothing brand that they featured in the video, do y'all remember? Super Party. Super something. Super cool? Super hot?
SS Super kids? Something about kids, I swear.
KM Yeah, Super Kids clothing.
BP We were backstage here, Kyle and I, and one of the guys from the clothing brand was talking with one of the folks who was on stage from Vercel and he was saying how much he had fallen in love with Next.js and built a bunch of sites that way, and now is having this problem where when he wanted to hand it off to somebody more junior, they wanted to use Builder.io and it was very annoying to him because maybe he should just start using from that and then he wouldn't have to train them. When you were listening to the presentation today about what's new, and when you think about somebody making a complaint like that, where's the handoff between somebody who's a bit more sophisticated or maybe wants to get a bit more into the weeds, and somebody who just wants to throw up an e-commerce store and doesn't have a lot of background in programming, and how do you bridge those two worlds?
SS Yeah. This has always been a strength of our platform, but we're realizing that to make things easy we need to be more prescriptive. So the strength is there's a sliding scale. On one extreme, we have a Shopify app where you just click and it's integrated to your Shopify store, click to make new pages, and you can use what we call bespoke mode to just completely make anything from scratch. You don't need any components, you don't need any developer involved, you just make stuff like Webflow but published within your Shopify store which is very cool. And other people integrate Builder in a similar way. In fact, ShopStyle is another one. They use it in bespoke mode, so a very Webflow style mode. You don't need a developer, just integrate one time– done, move on with your life. But many, many other companies want to have more constraints. I'll take an example. Take a Fabletics or something. They may want you to use your design system of components that already exists and they want those things to stay seamless. Components on the homepage created by marketing should look identical to those on the product page more owned by engineers, and that's where a larger company like a Fabletics or whatever will usually opt for that more constrained component-driven path where you actually say most people don't have permissions to go full bespoke, full Figma style. You're just composing our React components to make sure things are a little bit more seamless and strict and more in the engineer's control. In most cases we find though that a very engineering oriented organization will start in the strictest possible mode and then eventually get tired of, “Well, marketing needs one unique thing,” and they're like, “It's for a one day page that's a one day sale. Do we really have to make a component and deploy just for that thing?” And they start loosening it up and they say, “Okay, our designers can have design permissions. They can make this really flashy hero that's for this one day product launch that's totally unique,” like the Next.js conference site, right? That has all kinds of components that are probably not on the main Vercel site because they're unique to this event. And if your marketing team can actually produce those without engineering getting involved because they're ephemeral anyway– awesome, do it. And you can connect to your design tokens and stuff anyway so it's all on brand. So the double-edged sword, the blessing and curses, you can choose your own adventure. You can go full flexibility to full lockdown control. The question most companies have for us is, “Well, which do I use?” And we say, “Which do you want?” And then it's a back and forth. So we're figuring out now what is the best defaults to have a streamlined path and it's usually something in between. And then over time as people get comfortable they figure out the best workflow for their team, their structure, their company.
BP Nice.
KM KidSuper was the name.
BP KidSuper!
KM I’ll link to it in the show notes. We had a great conversation. Very passionate about building in Next.
BP Super passionate about building in Next. I don't know if he actually owns a folding phone, but hey, that's cool. Thank you Samsung for sponsoring this event. The folding phone looked great. And yes, shout out to the StackOverflow.co domain where marketing can do whatever we want and don't need engineering's permission. So let's talk TikTok. What does your favorite programming and developer TikTok content look like, and to what degree is that stuff actually useful? Not just catnip, not just something to sort of ease your brain at the end of a long day.
KM Well, so TikTok is the thing to ease my brain at the end of the day, but just like anything, the algorithm starts molding around your interests. And so you watch one dev video, and boy, then all of a sudden it's like I'm doing work in my free time. I'm learning about all this cool CSS stuff. There's this interesting study in The New York Times that came out a couple months ago about how the younger generation doesn't go to Google stuff anymore. They go to TikTok or they go to YouTube. If they want a restaurant recommendation, they search TikTok for restaurants in that area. That's where they are, and I really like this idea of producing content where your users are, where the end user is. If they're going to get content, TikTok is actually a pretty prime delivery vehicle for these things. The other thing it forces you to do– TikTok historically has only had 60 seconds to record a TikTok.
BP Right, a short life hack.
KM I think they eased up on that. Compared to YouTube, YouTube sometimes is like, “We're only going to monetize you if you talk for 10 minutes.” You see all these videos that are 10 minutes and two seconds long because they want to get monetization, they really drag it out. TikTok forces you to succinctly really talk about interesting topics. You have a very short time to capture your audience and you have to very succinctly do something. So I had originally found Steve just watching his TikToks about stuff, and I just think it's such a fascinating way to create content for a dev market and find people in different corners of the internet where they are already spending time. So Steve, walk us through, you're creating a TikTok. What inspires you?
BP Yeah, is this your DevRel strategy? Is this just a passion project? How do you pick your topics?
SS The two things I like most about the short form content, besides the fact that I like consuming short form– I mean, if you can tell me the same message in one minute as opposed to ten, oh my goodness, please do. And you can say it can lack nuance, but when you combine it with that it's a rich media platform, it's got visuals as well as audio, you can convey a lot of information in terms of visuals and diagrams in a very short time. And so for me, I started making TikToks because compared to Twitter or almost any other platform before TikTok, YouTube's a bit of an exception, you really had to build your own audience. In TikTok, the algorithm's job is to find the audience for your content. So at first I was like, I like that idea, it sounds like more efficiency, less work. Second is, I am extremely experimentation driven as an individual. I hate making assumptions. I like testing every little thing. I swear the tiniest tests you learn so much from, and I just want to test everything. And so with TikTok, in fact I was just talking to Swix yesterday and he was laughing because he was scrolling through my TikTok feed. My most recent video or two are like a million views on TikTok. If you go back just 50 videos or something, just a few weeks prior, I was making these cringey videos that were getting a hundred views, and they were bad. But I went through several bad videos and I tried a variety of things and you get nearly instant feedback on what people want to see and don't. And so you kind of try things and then you start seeing what works and you try variations of that and then you kind of keep honing, almost like the natural selection process in evolution. Just variations and then replicate or make variations of winning variations, et cetera, repeat. And I was able to do that with TikTok extremely quickly because unlike blog posts or YouTube videos, it can be very quick to produce this content. And so once I started finding patterns that people seemed to like, in retrospect, I remember thinking, “Oh, I like watching this type of stuff too. Show me something interesting and show me how to make it and make it succinct.” And so I have a few different types of videos I found people like, and the process is usually simple. One thing I would do is I’d browse websites and I'd find something really cool on like apple.com and I'd be like, “Huh, I wonder how they made that.” And so I'd open up the dev tools and start poking around and be like, “Whoa, they're doing some weird stuff here.” And then I’d be like, “I could make a TikTok just breaking this down. Look at this cool effect. Let's reproduce it in like a JS fiddle, and make that in a minute.” I'll usually pull up Excalidraw to make simple sloppy visuals, kind of explainers. And I like to use Descript to record myself and edit the heck out of it, to take out all the fluff, to compress information and any empty space is gone. And then post it, and it's always just a hold your breath and see if people like it. I still mix it up. I tried a weird meme joke the other day that nobody liked and I was like, “Eh, it's part of the process.” And Swix was joking, he was like, “Yeah, he likes that I just leave those.” I'm human. They're not all successful and I just leave it there. And it's fun because people engage a lot on TikTok so they'll ask for future videos that I'll make. “Okay, can you cover this topic?” “Yeah, totally. You just saved me having to do research on what might be an interesting thing.” And lastly, one thing I like about it is, so I have a hierarchy of how much are people nice on a given platform and how much are they jerks? Hacker News in my experience is the number one place where people are very anonymous and very mean. They just don't care. Reddit is maybe next. Twitter starts to get a little better, people are pretty harsh on Twitter still. LinkedIn gets a little better. It's connected to your resume, you might be a little more careful with words. But TikTok has been one of the most friendly, nice, inviting areas. Because again, experimentation means making a lot of mistakes and it's going to be a lot more digestible to make mistakes if people are empathetic and if they give feedback in an empathetic way versus Twitter where I've been blocked by big influencers because they had issues with my content. And they were not wrong, but it still was very painful to have someone I admire block me or reply saying very negative things very publicly. It's hard, and TikTok was much more inviting and conducive to experimentation which I liked.
BP Cool.
KM Very cool.
BP All right, so what are the things that you are most excited about coming out of this weekend? Either the news from today, some people you met, or the best TikTok you saw this morning. I don't know.
SS Totally. So the biggest thing that's fascinating to me is server components. So the new layouts, RFC coming out. I really think that the exploration of how to get more code running on the server and less on the client is really big. Especially for any website at scale, you really can end up drowning in client-side JavaScript which really lowers your time to interactive, your core web vital scores. It's very painful. We have our own exploration with the Quick JavaScript framework that has its own interesting techniques, and React server components is another angle trying to solve the same problem. And I like that the announcement today really focused on that this is mostly a data fetching pattern which is what I think today's server components are best for. I think it was very nicely done and I'm most excited about that.
BP Very cool.
[music plays]
BP All right, everybody. It is that time of the show. I want to shout out somebody from the community who came on and helped us answer a question or maybe they asked a great question. The badge I'm going to pick today, let's see. Awarded 38 minutes ago to Phoenix: the Necromancy badge– answer a question more than 60 days later. This badge can be awarded multiple times. Thank you to Phoenix who explained why property share does not exist on the type navigator. We will have the answer for you in the show notes. I am Ben Popper. I'm the Director of Content here at Stack Overflow. You can always find me on Twitter @BenPopper. Email us with questions or suggestions, podcast@stackoverflow.com. And if you like the show, leave us a rating and a review. It really helps.
KM I'm Kyle Mitofsky, a Senior Software Developer here at Stack Overflow. You can find me on Twitter @KyleMitBTV.
BP Steve, let the folks know who you are, what it is you do, and if they want to learn more about your stuff, where they should go check it out.
SS Totally. So I'm Steve Sewell, co-founder and CEO at Builder.io. You can learn more about Builder at Builder.io. And you can find me on Twitter or TikTok or YouTube or just about anywhere. My username is always Steve8708.
BP Okay, sounds good. Thanks for listening, everybody. We'll talk to you soon.
[outro music plays]