Building from source

Instructions

Build

You can build and run Onlook from source. The steps are:

1. Install Bun

Our preferred Node runtime is Bun (better alternative to npm)

2. Clone the repo from GitHub

git clone https://github.com/onlook-dev/onlook.git

Linux/MacOS

curl -fsSL https://bun.sh/install | bash

Windows

powershell -c "irm bun.sh/install.ps1 | iex"

Note: For Windows, make sure you have windows build tools installed

bun install --global --production windows-build-tools

3. Install dependencies

Navigate to the repo

cd onlook

Run install command

bun i

Run setup command

bun run download_bun

4. Add env variables

You can add your own env variables to run with Supbase and use your own Anthropic API keys.

Example: https://github.com/onlook-dev/onlook/blob/main/apps/studio/.env.example

NOTE: Make sure you add the env variables to the same directory as the corresponding .env.example. For example, the Anthropic API key .env file needs to go under apps/studio

5. Run the app

bun dev

Common errors

Node-gyp errors

If running into errors with node-gyp, follow the instructions here: https://github.com/nodejs/node-gyp?tab=readme-ov-file#installation

For Mac, it may say your have Python install, but if the version is higher than 3.12, you may need to run:

brew install python-setuptools
xcode-select --install

We may consider moving to pre-built version https://www.npmjs.com/package/@lydell/node-pty

Deep linking going to electron

When running in dev mode on MacOS, if deep linking is going to Electron instead of your app, you may see the screen below. In that case, there's a dangling protocol registered that needs to be remove.

Copy the path and run the command below. Example:

/System/Library/Frameworks/CoreServices.framework/Frameworks/LaunchServices.framework/Support/lsregister -u "Users/kietho/workplace/onlook/clones/dev-1/node_modules/electron/dist/Electron.app/Contents/MacOS/Electron"