The first browser-powered visual editor.
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Table of Contents
Build your UI visually. Supports any React + TailwindCSS app.
Onlook.Studio.Component.Demo.for.GitHub.mp4
- Clone the repo
git clone https://github.com/onlook-dev/studio.git
- Navigate to app folder inside the project
cd studio/app - Install NPM packages
npm install
- Run the project
npm run dev
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:
- Run the demo project
cd demos/next && npm install && npm run dev
- Open Onlook studio
- Point to
http://localhost:3000
For more examples, please refer to the Documentation
To try with your own React + TailwindCSS project, follow the following steps:
- Run this command on your project's root folder:
npx onlook
- Run your project locally
- Open Onlook studio to where your project is running locally. For example
http://localhost:3000
See the the CLI package for more information.
Optional step for if you'd rather set up manually. We recommend using the CLI method above.
- Install the corresponding Onlook plugins for your React framework:
- Run your project in dev mode
- Open Onlook studio to where your project is running locally. For example
http://localhost:3000
The code for the plugins are under plugins.
- 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).
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.
- Onlook Team - @onlookdev - contact@onlook.com
- Project Link: https://github.com/onlook-dev/studio
- Website: https://onlook.dev
Distributed under the Apache 2.0 License. See LICENSE.md for more information.