Onlook

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

View Demo · Report Bug · Request Feature

Table of Contents

1. About
2. Installation
3. Usage
4. Roadmap
5. Contributing
6. Contact
7. Acknowledgments
8. 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.

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

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

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:

1. Run the demo project

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

2. Open Onlook studio
3. 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

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

npx onlook

2. Run your project locally
3. 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.

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

The code for the plugins are under plugins.

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

• Onlook Team - @onlookdev - contact@onlook.com
• Project Link: https://github.com/onlook-dev/onlook
• Website: https://onlook.dev

Acknowledgments

• Project Visbug
• Responsively App

License

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