https://github.com/onlook-dev/studio Skip to content Navigation Menu Toggle navigation Sign in * Product + Actions Automate any workflow + Packages Host and manage packages + Security Find and fix vulnerabilities + Codespaces Instant dev environments + GitHub Copilot Write better code with AI + Code review Manage code changes + Issues Plan and track work + Discussions Collaborate outside of code Explore + All features + Documentation + GitHub Skills + Blog * Solutions By size + Enterprise + Teams + Startups By industry + Healthcare + Financial services + Manufacturing By use case + CI/CD & Automation + DevOps + DevSecOps * Resources Resources + Learning Pathways + White papers, Ebooks, Webinars + Customer Stories + Partners * Open Source + GitHub Sponsors Fund open source developers + The ReadME Project GitHub community articles Repositories + Topics + Trending + Collections * Enterprise + Enterprise platform AI-powered developer platform Available add-ons + Advanced Security Enterprise-grade security features + GitHub Copilot Enterprise-grade AI features + Premium Support Enterprise-grade 24/7 support * Pricing Search or jump to... Search code, repositories, users, issues, pull requests... Search [ ] Clear Search syntax tips Provide feedback We read every piece of feedback, and take your input very seriously. [ ] [ ] Include my email address so I can be contacted Cancel Submit feedback Saved searches Use saved searches to filter your results more quickly Name [ ] Query [ ] To see all available qualifiers, see our documentation. Cancel Create saved search Sign in Sign up You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert {{ message }} onlook-dev / studio Public * Notifications You must be signed in to change notification settings * Fork 12 * Star 540 The power of webflow for your React app onlook.dev License Apache-2.0 license 540 stars 12 forks Branches Tags Activity Star Notifications You must be signed in to change notification settings * Code * Issues 0 * Pull requests 0 * Discussions * Actions * Projects 0 * Security * Insights Additional navigation options * Code * Issues * Pull requests * Discussions * Actions * Projects * Security * Insights onlook-dev/studio This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. main BranchesTags Go to file Code Folders and files Name Name Last commit message Last commit date Latest commit History 33 Commits .github .github .vscode .vscode app app demos demos docs docs plugins plugins readme readme .gitignore .gitignore LICENSE.md LICENSE.md README.md README.md View all files Repository files navigation * README * Apache-2.0 license 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 cd 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 * 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. About The power of webflow for your React app onlook.dev Topics electron react typescript browser tailwindcss vitejs Resources Readme License Apache-2.0 license Activity Custom properties Stars 540 stars Watchers 5 watching Forks 12 forks Report repository Releases No releases published Packages 0 No packages published Contributors 3 * @Kitenite Kitenite Kiet * @drfarrell drfarrell Daniel R Farrell * @dependabot[bot] dependabot[bot] Languages * JavaScript 57.7% * TypeScript 40.1% * Rust 1.7% * Other 0.5% Footer (c) 2024 GitHub, Inc. Footer navigation * Terms * Privacy * Security * Status * Docs * Contact * Manage cookies * Do not share my personal information You can't perform that action at this time.