Onlook

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

View Demo · Report Bug · Request Feature

Table of Contents

1. Installation
2. Usage
3. Roadmap
4. Contributing
5. Contact
6. Acknowledgments
7. License

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.

Onlook.Studio.Component.Demo.for.GitHub.mp4

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

Run locally

1. Clone the repo

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

2. Navigate to app folder inside the project

   cd onlook/app

3. Install NPM packages

   npm install

4. Run the project

   npm run dev

Download from website

Visit onlook.dev to download the pre-built app.

Usage

There are many ways to try out Onlook! Try one of the options below:

Option 1: Use your own React project

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

1. Run this command on your project's root folder:

npx onlook setup

2. Run your project
3. Open Onlook to where your project is running (i.e. http://localhost:3000).

See the setup wiki for more information.

Option 2: Start a new project

You can start from scratch using Onlook:

1. Run this command where you'd like to create the project folder

npx onlook create my-onlook-project

2. Run the project

cd my-onlook-project && npm run dev

3. Open Onlook at http://localhost:3000

See the the CLI package for more information.

Option 3: Try a demo project

We have a few demo projects included in the demos folder. These are standard React apps with Onlook configured.

To run, follow the following steps:

1. Run the demo project

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

2. Open Onlook at http://localhost:3000

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:

• Browser
• Editor
• Write-to-code
• Components
• Variables

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.

Contributors

Contact

• Team: Twitter - LinkedIn - Email
• Project: https://github.com/onlook-dev/onlook
• Website: https://onlook.dev

Acknowledgments

Projects we're inspired by:

• Visbug
• Responsively
• Supabase
• ShadCN

License

Distributed under the Apache 2.0 License. See LICENSE.md for more information.