Name: Onlook
Uploaded: 2025-01-27T11:18:09.275Z
Duration: 2 min 33 s
Description: An AI-powered tool to visually edit React websites and write changes back to code in real-time.

onlook

An AI-powered tool to visually edit React websites and write changes back to code in real-time.

Onlook

In this video I'm going to give you a quick tour of what it's like inside the Onlook editing experience. On the left side here you'll see a layers panel. On the right side you'll see a properties panel. And at the top you'll see this top navigation bar. We also have this upper navigation where you can quickly jump into our Discord, uh visit our GitHub or report any issues that you come across with the app. 

We'll start with the upper left.

Corner over here here you can click to navigate back to your projects. Here's the title of your project. Here we have the undo and redo buttons. Those will highlight as you make edits within the editor. And then here um is just a change counter so you know that your changes are being recorded and also how many changes you've made in each session. 

In the center here there's a design and interact mode um they have hot Keys one is V and.

Interact is I um you could jump into interact mode here to um start looking at some of the hover states. Uh I'm working on adding this hover state where you can have this uh pop up over here as you hover over the parent layer. 

Um once you back over once you're back over into design mode, uh you can also open up your project in your chosen IDE and you can change your IDE between VSS code cursor and Zed as of the recording of this video.

On the left side over here you'll see that as I float my mouse over each of these layers they're highlighted. Uh and so I can select each layer and it'll actually prop up um the layer panel properties on the right side here. Here you can see the Tailwind classes that are assigned to that layer as well as um you know assigned Tailwind classes uniquely uh for each of the sections over here. Sometimes it's much easier to navigate through.

This UI than try to remember what those Tailwind classes are. Um you can actually retract the UI too. You'll see these buttons. Um this makes it easier in case you want to like zoom in and explore around what's going on. 

I also forgot to mention that at the very bottom of the screen here you have a toolbar. Um this has a mouse. Uh a panning button here if you're on a trackpad like I am you could just. Uh scroll around or you can hold down.

Space and uh click to drag. Uh you can also insert elements as a div. We use R for rectangle. Uh and T for text. So um once you select these elements you can actually draw directly on a canvas. Um feel free to explore around. Um and and play around with Onlook. Um there's a lot of cool things you could do such as adding Stacks. Uh you can adjust the direction of these Stacks. Um you can add in a border radi. Um borders themselves. Um feel free to share AI Agent Store with colleagues.

Zoom in and out of the canvas. But then you can also um actually use some of these features over here that allow you to um contract and build and actually responsive website. Um just make sure that you are actually running an app when you're using Onlook. Uh and that it's pointed to the right Local Host over here. If your app is not running, you'll see a warning up here in the upper right corner. Uh because onook is enabled on this.

Project uh I don't have any errors here but um you can watch my video on getting set up with Onlook just to make sure that you're doing it correctly. Thanks so much. If you have any questions feel free to email me. I'm Daniel on.

Note, that there may be slight differences in text and video. Watch video for the original content.

Onlook Video