Onlook

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

View Demo · Report Bug · Request Feature

Table of Contents

Installation
Usage
Roadmap
Contributing
Contact
Acknowledgments
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

Option 1: Download from website

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

Optione 2: Run locally

Important

We require the Bun.sh runtime. You can download it here or run npm install -g bun.

To run locally with bun:

Clone the repo

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

Install NPM packages
```
bun install
```
Run the project
```
bun 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.

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:

Run this command on your project's root folder:

npx onlook setup

Run your project
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:

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

npx onlook create my-onlook-project

Run the project

cd my-onlook-project && npm run dev

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:

Run the demo project

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

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:

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:

License

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