Using Onlook with your own projects

If you haven’t already, we recommend reading our post on Creating your first Onlook Pull Request.

Now let’s add Onlook to your own project! 

Right now, writing code with Onlook works with any NextJs, React, or Svelte web app (more coming soon!) hosted on GitHub. If you don’t have a GitHub project you’re working on or you don’t know what any of that means, you can still use Onlook to make visual edits to any web page. 

Code setup

To setup your NextJs codebase so Onlook can create pull requests (🔥) use the package manager of your choice and run:

npm i --save-dev @onlook/nextjs

then within your next.config.mjs or next.config.js, update swcPlugins to include ["@onlook/nextjs", { projectRoot: path.resolve(".") }]

import path from "path";
const nextConfig = {
  experimental: {
    swcPlugins: [
      ["@onlook/nextjs", { projectRoot:path.resolve(".")}]
    ],
  }
};
export default nextConfig;

or alternatively, you can view instructions for your framework below:

1. Svelte

2. React with Babel

3. React with Nextjs

Now that your config is all set, either deploy to your hosting provider of choice or simply run the codebase locally. If you have any setup questions, lmk! You can email me whenever - erik@onlook.dev. 

Go to a website you want to edit. Ideally, this would be one you just setup, can set up later with a developer, or can get GitHub access to! You can also try it out on a website you’re running locally.

If you’re at a loss for inspiration, try our Demo Projects included in your Onlook Dashboard. They’re already configured. To learn more about the Demo Projects, read Creating your first Onlook Pull Request like we told you too earlier. Sheesh. 

Creating a new project

Now that you are logged into the Extension and you are at the URL of a website you want to edit, open the Extension and create a “New Project” in the upper right corner.

Feel free to name it whatever you want, and don’t worry about editing the URL. Then click “Start Editing” to make some changes!

Now that you’re in the editor you can click on anything on the webpage you want to edit, and it will open the Onlook editor.

Make some changes and once you’re done, open the Extension and click the “Review” button.

This will take you to the dashboard where you will see your project and all the changes you just made. Now let's create a Pull Request.

Creating your first Pull Request using Onlook

Let’s turn your changes into code and create a Pull Request! Just click “Share” then “Pull Request”

This will open a modal where you’ll want to add Onlook to the GitHub Repository associated with your edits. 

GitHub will ask you to select the Repository you want to use. Make sure it’s all the same Repository. 

Once you’re done, you will go back to your project where you can just click “Connect” on the Repository you setup. 

Now just set the Branch you want to create a Pull Request from and the root directory of your code (usually this is the root folder and you can leave this alone). 

Don’t worry, you’ll only have to do this setup once for the project. 

Now that it’s all set you can go to the publish tab, add an optional title and description to your changes and hit the “Publish” button!

It will load for a few seconds depending on how many changes you made. Once it completes, you’ll see a link to your first Pull Request with Onlook below! 

And that’s it! You just created your first Pull Request with Onlook 🤘– that means real code on a real Repo. 

If you’re working with a team, ask an engineer or anyone else with GitHub access to review your Pull Request to get it merged in and keep shipping!! We really appreciate you checking out Onlook and hope this can make your workflow easier and more fun!

As always, if you have any questions or feedback let me know at erik@onlook.dev.