Skip to content

The open source, local-first Figma for React. Design directly in your live React app and publish your changes to code.

License

Notifications You must be signed in to change notification settings

onlook-dev/onlook

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

b1a5ef3 · Sep 23, 2024
Sep 10, 2024
Jul 13, 2024
Sep 22, 2024
Sep 23, 2024
Aug 28, 2024
Jul 16, 2024
Sep 22, 2024
Sep 23, 2024
Sep 22, 2024
Sep 4, 2024
Sep 23, 2024
Jul 16, 2024
Aug 28, 2024
Aug 29, 2024
Jul 4, 2024
Sep 5, 2024
Sep 5, 2024
Sep 22, 2024
Sep 22, 2024

GitHub Thumbnail v2

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

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.