what if I told you that there is a brand new open-source fully free and local first vibe coding editor built specifically for creating web apps React websites and editing code in real time well allow me to introduce the cursor for designers it's called Unlookde Dev onlookdev is a visual first open-source code editor that lets you craft full stack websites prototypes and design using next.js GS Tailwind CSS and AI all directly within your browser DOM you can design in real time with live code making visual edits tweak components and generate full layouts all without switching tabs it's like if Figma and Cursor had a genius AI baby it's a sleek alternative to tools like Cursor Bolt Lovable V0 Replet Agent and so many others but it's yours local and totally hackable for example you can just say create me an e-commerce website and the unlock dev will parse your natural language prompt and build it for you autonomously right here within the Dart editor that you see and this is where it's able to build out all the components that you can even edit in real time so it's giving you a lot of flexibility and the best part is it's completely free it's something that you can install as a desktop app you can simply go over to the website and you can install it for whatever operating system you have whether that's Apple Windows Linux and this is where you can easily click on installing the installer for whatever operating system you have and it will easily install it for your computer but before we get started with today's video allow me to introduce today's video sponsor Scribba scribba is a unique learn to code platform that combines video tutorials and live code editors into one seamless experience this game-changing approach helps you learn faster and actually enjoy it with over 80 courses many being free Scribba covers everything a modern web developer needs including the latest in AI development one course that really stands out to me is the AI engineer path a nononsense step-by-step track where you'll build realworld AI powered apps it's built in collaboration with Hugging Face and Lang Chain and it's perfect for devs who want to stay relevant and turn AI into a superpower what makes Scribba truly special you don't just watch lessons you code inside them take over the teacher's code solve interactive challenges and build real muscle memory so if you're ready to level up your skills and futureproof your tech career become an AI engineer with Scribba use my link in the description below for 20% off pro plans today but with that thought let's dive right back into the video after installing it you can simply open it up and it will take you to this page over here and this is where you can easily chat with the onlook dev with natural language queries as well as images to replicate any sort of website or build off of any sort of reference that you provide it even with a natural language query so in this case if I want to ask it to develop an e-commerce store you can simply type it in and it will work on coding out all the components for that now first things first what I want you guys to do is head over to the settings tab and you can set certain things like the default project path you can also set the build flags and replace npm with bunt so if you want you want to make sure you configure these things beforehand once done you can then work on having it create anything like create me a YouTube clone and then you can send in the prompt and it'll work on starting up this new application for you where it's going to clone the template and take my natural language query and deploy to the agents to execute this task from generating the components of my UI to writing all the codes to make it functional and there we go just take a look at that it has now created the YouTube clone for me and you can see that it is actually running on my local host which is the 3000 host it has also created a mobile vision to give you a preview of how it actually looks now you can see it looks pretty similar to Figma as well as cursor on the right hand side you have the AI chat to work with the different pages to design the UI components now what you can also do is if you want to select a component you can then take that component and chat with it within the actual AI chat you also have the ability to rightclick on something and this will allow you to view the element in cursor which is where you can open up the code editor itself to edit it you also have the ability to open it up in DevTools so it looks like right now it opened it up within cursor which we're not going to actually do at the moment but what you can also do is you can add it to the chat with the right click you can also have it so that you can make inline edits to the actual design itself which is really interesting so what we're going to do is right click on this top section and we're going to add it to the AI chat and you'll see that it has now added in this header so we can say in new please add a dark mode and we can send in this prompt and it's going to then work on configuring this prompt or this uh query and adding that dark mode for us in this case so I have actually applied all the changes by clicking on the apply button and you can see that it has now added in this dark mode and it is actually working now guys I'm not using any sort of API for myself this is something that it's generating all on its own it was able to create this youth group template all on its own within a couple seconds as you saw and in this case it was able to make this addition of adding a dark mode now on the top right you also have the ability to publish this you can so that you can preview it as a site or you can have it so that it could be deployed to a custom domain on the left hand side you have the ability to manage all your layers of the UI components and if you want to take a look at something like the header you can then highlight it you can also unhighlight it to ignore the actual components itself all the images are manageable through the image tab the pages obviously self-explanatory and the windows will allow you to configure the size of the display and then for the brand colors you can actually configure and change this so your AI can actually use the brand image colors and a really cool feature is that you also have the ability to take a screenshot of your current page and it can use it as reference so whenever you're talking to the AI this is an easy way for you to screenshot something that you're looking at and reference it to the AI and something I just found out is that currently they are using Sonnet 4 powering onlookdev so this is where all the code being generated is being powered by the set for model which is something that you can use on an unlimited basis so you can see it right now this is the model that you can use currently and generate any sort of UI component and guys once you have finished with the the design that it has actually coded out so what you can do to access the code is click on new projects on the top click on show in editor you can also have it so that you can go to all your projects and it'll take a look at every single project setting that you have and you can click on show an editor which will allow you to easily open up the code for what it had generated so you can see all the files that it had created and you can now open this up within something like cursor or VS code work on then generating the code like the backend code for the app that you generated so what I'm going to do next is have it create a modern task manager app that has a built-in note-taking feature also add in a built-in calendar to manage important tasks and add as many features as you can i'm also going to say can you make it so that the notes are drag and dropable and what we're also going to do is provide a reference image so that it could work on coding it based off the image that we have so now that I have provided my reference let's go ahead and send this in and see what onlook app is capable of generating and there we go that was pretty quick and we have our task keep app that looks exactly like the image that we had provided this is actually the image I had provided and this is the generation I got now you can see that it has it developed the task manager app itself the ability to access the calendar app and then you also have the drag and drop functionality within the main page and you can see that there is actually that functionality of a drag and drop uh like note tab and you can see that I can drag all of these components around add a note as well so in this case make a YouTube video and then say that on on look and then provide it some random color and then click create and you can see that it created this component obviously this is a basic uh little app but it was able to do a pretty good job in creating the consistency on fulfilling all of my tasks it has also created the task list app and the built-in calendar itself and there's a couple of labels that it had also generated but overall you can see this is a pretty decent app that it was capable of generating and fully coding out all on its own if you like this video and would love to support the channel you can consider donating to my channel through the super thanks option below or you can consider joining our private Discord where you can access multiple subscriptions to different AI tools for free on a monthly basis plus daily AI news and exclusive content plus a lot more but that's basically it guys for today's video on this amazing new editor that I highly recommend that you take a look at it's open source and you can easily get started with it today so definitely recommend that you take a look at it with the links in the description below but that's basically it guys make sure you subscribe to the second channel join the newsletter join our Discord and follow me on Twitter as well as subscribing to the YouTube channel make sure you turn on the notification bell like this video and please take a look at our previous videos cuz there is a lot of content that you will truly benefit from but with that thought guys thank you guys so much for watching have an amazing day spread positivity and I'll see you guys really shortly