search

onlook-dev / onlook

The open source, local-first Webflow alternative. Design directly in your live React site and publish your changes to code.
https://onlook.dev
Apache License 2.0
2.6k stars 124 forks source link
browser design devtool electron frontend local-first low-code nextjs no-code react tailwindcss typescript ui vitejs webflow

readme

GitHub Thumbnail v2

Onlook

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

View Demo · Report Bug · Request Feature

[![Discord][discord-shield]][discord-url] [![LinkedIn][linkedin-shield]][linkedin-url] [![Twitter][twitter-shield]][twitter-url]
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.

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

image

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

image

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

image

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

image

Acknowledgments

Projects we're inspired by:

License

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