Transcript for:
Web App Development Tools Comparison

Today we're going to be analyzing Onlook, which is a powerful noode automation tool for building apps locally. Onlook lets you visually edit your React websites or web apps and write your own changes back to code in real time. It's also really good for just generating apps side by side. And we'll be comparing that versus Bolt and Lovable today to see which one performs the best. Bear in mind, you can actually use for free and it is available locally. It's pretty easy to install with a desktop app. So, literally in one click, I installed it. And then you can see we've got onlook ready to go. If we just start off with something super simple and we'll move on to more creative stuff in a second. But if we say okay SEO agency website for Goldie agency as an example, we can hit enter. And I haven't paid a penny for this, right? So it's not cost me anything. It's completely free and you can build locally with it. And if we wait for the Onlook app to generate our project, basically what this can do is like clone different websites and design them for you. So let's have a look at Onlook's website as an example. Today I'm going to show you how. So you can see some examples of how it runs, how it works, etc. You get all the code locally. If we go back to Onlookdev right here, it's just drafting app. And you can see it's got this interactive mode where you can actually interact with the website and test out as well. And you can also edit the elements and change them around. So here's an example of the website that was generated in like literally one click. What's actually pretty cool here as well is we have the mobile version and we also have the desktop version and that is actually available on a local host address. Right? So if we copy that and then we go to our browser you can see that we can actually preview the full website locally in our browser which is pretty cool as well. So this is the designed website looking pretty cool nice and clean looks a lot nicer than some stuff that I've seen for example bolt and other tools like that generate and it was really easy and simple now if we go to the preview section over here we can actually interact with the website we can see what it does etc and then inside the design section we can actually go inside the chat or we can select a different element of our page and then edit it side by side. So, for example, if we go back to the preview, we'll scroll up. Then we're going to go back to design at the top. So, you got two different options, design and preview. And then if we click on, for example, this button right here, we've got that selected inside the chat on the right hand side. We can now say, okay, make this button blue. It's kind of like a vibe coding tool that makes it really easy to edit your code and everything else, right? So it says I'll change the button from amber yellow gradient to blue. And then we just need to click apply over here. And that's changed it. Right? So you actually get to approve the changes as well before you make them, which is really cool. And it just makes editing like so much easier, right? It's a really good way to vibe code if you like that word. So let's test this out side by side to for example versus bolt and lovable. We're going to use exactly the same prompt which was really simple. It's just build an SEO agency website for Goldie agency. We'll hit enter and we'll do the same inside Lovable. Just got to log in here. Now we're logged in and we'll run exactly the same prompt. So before people start telling me my prompts are terrible or something like that. I just wanted to show you exactly how it works step by step and how easy it is to use and also like these we're using the same prompt across all these platforms, right? So it's really down to the tool to work its magic and be creative here. So let's see what we get back. This is looking cool though. B.NE is working its magic. Let's have a look at Lovable. That's doing its magic as well. And by the way, whilst waiting for that to load, if you want all the video resources from today along with a cheat sheet on exactly how to use Onlook, I actually created this sheet inside the AI success lab link in the comments description. And you can see it just runs you through all the key facts and everything else. All right. So, inside here, it shows you the quick start guide, how to get set up, core features versus competitors, advanced tips and tricks, and then also some frequently asked questions here along with a checklist on how to get started and 100 different gamechanging onlook dev ideas, right? So, you can get that all inside the AR success lab. Link in the comments description if you want to steal this stuff from me. So, let's get back to bolt. Now, that is still coding. Now, Lovable is still working its magic. Okay, in the meantime, what we can actually do is we can test something else out now. So, you can see here we've got pages, right? Now, if we click on plus here, we can create a new page. So, let's say, for example, we want to create a about us page about Julian Goldie for example, right? Something like that. So, we can create this about us page. Now we can click on that and now we can say add some information about Julian Goldie and his SEO agency and we can just start building out the whole project. Now the cool thing about this is if you're using something like bolt it's quite timeconuming to build out those bigger projects and it can get really complex right whereas for example if you have a look at this it's an easy way to manage all your pages flick between the homepage about us page etc and then just to build everything out step by step plus I haven't paid for this it's completely free we can also select style section over here so we can actually change all the styles on the right hand side so position width styles colors etc and then And if we go back to the chat, it says, "I've completely transformed the blank page into a comprehensive about page for Julian and Goldie. Let's click apply. Now, let's create the about me page." If you want to preview and scroll down through the rest of it, we can over here, right? And it's actually taking information about me. Create that page. We can insert some images here. It's got the Goldie Agency story, Julia's achievements, and then also a link to book in a consultation. And to be fair, it's actually looking better than my own website. And yeah, it was super simple and easy. Also, all of these links seem to work in the top right, which is great as well. And yeah, it's looking really cool. Now, in the meantime, let's have a look at Bolt and Loveable, see where they're up to. So, I'm going to check these out. So, what we can do is pull these up side by side. So, this is the page from Onlook and this is the page from bold.new. Now, to be honest, I would say the design is actually better and there's more content on the page from bolt.new. I would say genuinely it probably wins on that results. It has hallucinated a lot. Like for example, it's made up all this information about testimonials, people, etc. I don't really like that cuz that could get you in trouble. Let's have a look at the example from Lovable. So, if we compare these side by side, I'm going to say that Onlook actually created a nicer page, nicer website. The page with love boy just doesn't look quite as nice. It feels like a little bit old school. I don't really like that sort of pink and black style. Also, it's hallucinated a bunch of stuff as well. I wish these tools would ask you before they start adding the testimonials, everything in like for example, okay, what's your address or what's your contact details before it starts like hallucinating all the random stuff. But yeah, I'm going to say the bolt came in first there, but Onlook is a really good alternative. And bear in mind onlook is coded locally as well. So you store all the files locally. It's good for privacy and also it's completely free as well and it's a really good option. Now if you actually just wanted to generate more pages or more sections etc. Then you could go inside the chat over here and we could say okay add some testimonials social proof address details more sales copy Alexi style etc. to the landing page plus some FAQs. And I'm pretty sure it' be quite easy to vibe code that out. We'll do the same inside Bolt and Love just see how quickly you can get it done. So Lovable is there and then we'll go inside Bolt here as well and we'll see which one can perform the fastest. Right. So Bolt new is running here. Lovable is running down here as well. And we've got onlook working its magic and we'll see which one comes back to us the fastest. Now if we refresh the page, let's just check if that about me page is set up. Doesn't seem to work locally. Maybe we have to deploy it again. So onlook has already come back to us. We just need to hit apply here, which I've done. And then we'll have the new sections inside there as you can see. So we've added all this new information. If we go back to lovable and bolt, lovable is still writing. Bolt new is still writing the content. It looks like it's got a bunch of files to update. So, it does seem like onlook is a lot faster when it comes to coding as well. You can see that's nowhere near done. And Lovable has come in second in terms of speed. Let's just check the new page. Here we go. Not bad at all. Now, if you want to deploy on Look as well, what you can do is click on publish. And you can either link this to a custom domain or you can publish preview site. So let's click on publish preview site. See what we get back and we should be able to deploy that to a test domain. There we go. So it's hosted on a test domain now. So you can share that with people. And then also you can link this to a custom domain. You do need to be on link pro obviously to buy a domain and that sort of thing. Otherwise you can just change the URL over here. And then you can also inside the project settings change the local URL, the path, the commands, and you can also change like the site like the title, page description, etc. What's also cool is here you get access to all the previous versions. So if you mess one up, you can just restore the old version and you can create new backups all the time. And then you can see the page settings over here along with the preferences and advanced information, too. So, it's really easy to use, pretty powerful tool, completely free, great for like vibe coding and just editing different bits of the project and also really good for just building out like a full sort of website where you can manage all the pages on the left hand side and build out something bigger than you typically would inside anywhere else. Now, inside the brand section as well here you manage you can change like all the branding of your project and then this is not just limited to websites as far as I know. So, for example, we start a new project from scratch. What you can also do is you can paste in a screenshot over here. And then I'm wondering if you can actually build games with it. I've not tested this out, but we'll try this. So, I'm going to go inside onlook here and paste in this prompt to see if we can build out a game sort of website as well. Some people are asking as well, do you like Onlook better than Windsurf? Honestly, I'm not a big fan of Windsurf. Like recently, it just it started breaking on me a lot. Started getting quite buggy. It's quite slow. takes up a lot of memory and also you can rinse through the credits pretty easily, right? Whereas, for example, with Onlook seems like it's a lot simpler in terms of the UI. It's easier to manage, it's faster, and you can still code out locally. Plus, you can code for free. So, you know, Unlook has a lot of advantages right here. So, now we have the page with the game. We can preview that and then we can actually play that step by step. So, yeah, you can build out games and stuff or calculators and the design is super nice. Again, you can change it in the chat here if you want to change anything or you can select which bit you want to edit which section. I also think I prefer this to building out websites versus something like Visual Studio Code, right? Visual Studio Code you can rinse through the credits, it could take ages and then the actual outputs can be pretty bad, right? Whereas, for example, something like look seems to be a lot better. So overall, I'm going to say it creates faster designs than Bolt and Lovable. I think Bolt still wins in terms of the outputs. Like Bolt's page is superior by a long way. I would say the design from Onlook was better than Lovable. So, it's coming in second right there. But it's still a good option. The other way you win here is if you're using Onlook versus Bolt or Lovable, you can code locally and it's free, right? And you can select different elements on the page, right? For example, if we go inside Bolt, we can't really select different sections and then say, "Hey, I want to edit this." Unlike onlook, we can click the inspector over here and then click stuff like this. But you'll rinse through the credits as well, as you can see. So, I said you've used all your remaining credits now. Boom. All right, job finished. If you want to get all the resources from me, plus a cheat sheet on 100 different ways you can use onlook, how to set it up, etc. for all the links plus daily AI trainings as you can see inside the AI success lab. Feel free to get that link in the comments description. This is a community of 9,600 members that you can learn from. We're giving away new free trainings every single day. For example, automation on automated link building, prompt collections, how to build websites, an NA10 prompt builder, etc. If you want to get all these free trainings, feel free to get them inside the AI success lab. If you want to connect with me personally, get three coaching calls per week, plus all my best automations that are basically copy copy and paste, then you can get that inside the AI profit boardroom. Link in the comments description. I've actually just released a brand new automation for V3. And inside here, you'll see all of my best automations for NAN agents, for workflows, for web automation, and scraping. We actually just created a new AI automation that actually automates VO3 videos, which is pretty insane as well. And then also each week what we do is we create a thread like this. We ask you what you want us to build and then we just build it for you and give you the automations for free. As an example of this, you can see we posted here what automations you want to see. 36 people commented inside the AI profit boardroom. And what we did is we step by step answered every single request inside here. created a video personalized for everyone inside the boardroom and then also updated all the links inside the AI profit boardroom as well. So you can just grab these automations and steal them from me. All right, link in the comments description to that. You can also post in the community if you need any help etc. You can get that directly here. For example, we post weekly updates. Marco was asking some stuff. We got that to him straight away. Yeah, if you need help, if you need support, if you want to learn how to actually use this stuff and monetize it and make money, this is the best place to go. So, feel free to get that link in the comments description. And if you're like, Julian, I just want you to automate everything for us. Feel free to get an AI strategy session link in the comments description. And basically on that, we can, for example, look at your website, look at your business, figure out where you want to save time, what you can automate, and then from there, we can just automate it and implement it for you. All right? All right, if you want to hire us to do that for you. So, feel free to book in a free AI strategy session.