Creating your first Pull Request with Onlook

Getting Started 

If you haven't already, make sure you have downloaded the Onlook Chrome extension.

Start by opening the extension (usually in the upper right corner of your browser) and Sign In. We recommend pinning the extension to your browser.

If you have a Google email associated with a GitHub account, we recommend signing in with that.

Every person who uses Onlook signs in to a personal account – even if you'll be contributing to your company's code. That way you'll have a track record of contributions no matter where you go!

You don't need a GitHub account to use Onlook, but if you'd like to start getting contributions added to your GitHub profile, it may be a good idea to set up a GitHub account. Here's a link on how to do that.

Once you Sign In, you'll be taken to the Onlook Dashboard (app.onlook.dev) where you will find two Demo projects.

Let’s click into the Dashboard demo! Then, click the "Edit Project" in the upper right corner to start editing. If you have pop-ups disabled, this may not work, so try CMD or CTRL–clicking if the Edit Project button doesn't work for you.

Editing the Demo Dashboard

You will be taken to the demo website and on the bottom of the screen you’ll see a red button. This is the Onlook editor running and waiting to record your changes. As you move your mouse around, elements on the page will be outlined in red. Any element that has a red outline is editable, so feel free to click into any element and explore its properties.

I made some changes to the “Performance” heading and changed the background color of the graph. Once you have some edits, you can open the extension (in the upper corner of your browser) to see your changes recorded. If you're happy with your changes, you can continue by clicking “Review”.

This will take you to the project in the dashboard where you can see all of your edits.

Turning your edits into Code

Let’s turn them into code and create a Pull Request! Just hit “Share” then click on “Pull Request”.

The demo projects are already setup with a public GitHub repo so no need to do any configuration. If you want to setup Onlook with your GitHub projects, it’s super easy to do. You can find out how to do that in the next article – Using Onlook with your own projects.

Both the title and description are optional so you can fill those out if you want or leave them blank. Go ahead and click “Publish” and don't worry, your edits will not break anything or delete anything project. Every time you publish changes using the extension, it creates a version of your changes that someone can review.

It will load for a few seconds depending on how many changes you made and once it completes, you’ll see a link to your first Pull Request with Onlook! Click the "View Pull Request" Icon next to the title of your edits.

Seeing your edits in the actual GitHub project

Hover your mouse over the two icons at the bottom, and you'll see you have the option to view a Pull Request.

If you view the Pull Request, you’ll see the changes we made translated to the codebase! To look at the code that was written from your changes, look for the "Files Changed" tab along the top navigation of the project.

And that’s it! It’s that easy to use Onlook in your workflow! Pushing code to GitHub allows you to contribute code, shipping quicker and easier than ever before!

If you have any questions, feedback, or want help getting started with Onlook let me know! I’m happy to help or hop on a call and can always be reached at erik@onlook.dev.

Feel free to play around with the demo projects as much as you like and when you’re ready to use Onlook with your own projects, the next article (Coming soon!) will be a great resource for how to do that.