/studio

The open source, local-first Webflow alternative. Design directly in your live React site and publish your changes to code.

Primary LanguageTypeScriptApache License 2.0Apache-2.0

Discord LinkedIn Twitter

Onlook Screen Shot

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

Build your UI visually. Supports any React + TailwindCSS app.

Onlook.Studio.Preview.mp4

Built With

  • React
  • Electron
  • Tailwind
  • Vite

Installation

  1. Clone the repo 
    git clone https://github.com/onlook-dev/studio.git
  2. Navigate to app folder inside the project 
    cd studio/app
  3. Install NPM packages 
    npm install
  4. Run the project 
    npm run dev

Usage

Trying with 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:

  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

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

See the roadmap for a detailed list of project goals and improvements.

See 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.

Contact

Acknowledgments

License

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