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.Component.Demo.for.GitHub.mp4

Built With

• 
• 
• 
• 

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:

Use the CLI

1. Run this command on your project's root folder:

npx @onlook/cli

2. Run your project locally
3. Open Onlook studio to where your project is running locally. For example http://localhost:3000

See the the CLI package for more information.

Manual setup

Optional step for if you'd rather set up manually. We recommend using the CLI method above.

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

• Onlook Team - @onlookdev - contact@onlook.com
• Project Link: https://github.com/onlook-dev/studio
• Website: https://onlook.dev

Acknowledgments

• Project Visbug
• Responsively App

License

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