Skip to content

Latest commit

 

History

History
246 lines (171 loc) · 8.71 KB

README.md

File metadata and controls

246 lines (171 loc) · 8.71 KB
Raw

Figma for your React App

Onlook

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

View Demo · Report Bug · Request Feature

Discord LinkedIn Twitter

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

Export-1724891449817

Built With

  • React
  • Electron
  • Tailwind
  • Vite

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

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
  1. Run your project
  2. 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
  1. Run the project
cd my-onlook-project && npm run dev
  1. 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:

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

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.