Onlook Studio

The open source, local-first Webflow alternative.

Collaboration

typescript

react

electron

browser

Onlook

The first browser-powered visual editor.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

About
Installation
Usage
Roadmap
Contributing
Contact
Acknowledgments
License

About the Project

The open-source, local-first visual editor for your React Apps

Seamlessly integrate with any website or webapp running on React + TailwindCSS, and make live edits directly in the browser DOM. Customize your design, control your codebase, and push changes your changes without compromise.

https://github.com/user-attachments/assets/c9bac609-5b05-417f-b2b2-e57d650d0dd6

Export-1724891449817

Built With

Stay up-to-date

Onlook officially launched our first version of Onlook on July 08, 2024 and we've shipped a ton since then. Watch releases of this repository to be notified of future updates, and you can follow along with us on LinkedIn or Substack where we write a weekly newsletter.

Getting Started

Installation

Clone the repo

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

Navigate to app folder inside the project
```
cd onlook/app
```
Install NPM packages
```
npm install
```
Run the project
```
npm run dev
```

Try Onlook with a demo project

We have a few demo projects included in the demos folder. These inside are a standard React app and a Next.js React app.

These are already set up with the Onlook plugins and have code written to them directly.

To run, follow the following steps:

Run the demo project

cd demos/next && npm install && npm run dev

Open Onlook studio
Point to http://localhost:3000

For more examples, please refer to the Documentation

Using your own React project

To try with your own React + TailwindCSS project, follow the following steps:

Use the CLI

Run this command on your project's root folder:

npx onlook setup

Run your project locally
Open Onlook studio to where your project is running locally. For example http://localhost:3000

See the the CLI package for more information.

Manual setup

Optional step for if you'd rather set up manually. We recommend using the CLI method above.

Install the corresponding Onlook plugins for your React framework:
1. Nextjs
2. Babel (webpack, esbuild, vite, etc.)
Run your project in dev mode
Open Onlook studio to where your project is running locally. For example http://localhost:3000

The code for the plugins are here.

Still need help?

See "How to set up my project?" for more information.

Roadmap

See how we're tracking towards major milestones, and read the wiki for details on each version of Onlook. Here's a rough overview of some of the major features we're looking at:

Also check the open issues for a full list of proposed features (and known issues).

Contributing

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also open issues.

See the CONTRIBUTING.md for instructions and code of conduct.