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

If you plan on contributing to Onlook, make sure you are not running the Desktop app and the repo at the same time.

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
• hymhub/css-to-tailwind

License

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