base on The open source Cursor for Designers. Design directly in your live React app and publish your changes to code. <!-- Improved compatibility of back to top link: See: https://github.com/othneildrew/Best-README-Template/pull/73 --> <a id="readme-top"></a>  <div align="center"> <h3 align="center">Onlook</h3> <p align="center"> Cursor for Designers <br /> <a href="https://github.com/onlook-dev/onlook/wiki"><strong>Explore the docs »</strong></a> <br /> <br /> <a href="https://youtu.be/RSX_3EaO5eU?feature=shared">View Demo</a> · <a href="https://github.com/onlook-dev/onlook/issues/new?labels=bug&template=bug-report---.md">Report Bug</a> · <a href="https://github.com/onlook-dev/onlook/issues/new?labels=enhancement&template=feature-request---.md">Request Feature</a> </p> <!-- PROJECT SHIELDS --> <!-- *** I'm using markdown "reference style" links for readability. *** Reference links are enclosed in brackets [ ] instead of parentheses ( ). *** See the bottom of this document for the declaration of the reference variables *** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use. *** https://www.markdownguide.org/basic-syntax/#reference-style-links --> <!-- [![Contributors][contributors-shield]][contributors-url] [![Forks][forks-shield]][forks-url] [![Stargazers][stars-shield]][stars-url] [![Issues][issues-shield]][issues-url] [![Apache License][license-shield]][license-url] --> [![Discord][discord-shield]][discord-url] [![LinkedIn][linkedin-shield]][linkedin-url] [![Twitter][twitter-shield]][twitter-url] [![Weave][weave-shield]][weave-url] </div> <!-- TABLE OF CONTENTS --> <details> <summary>Table of Contents</summary> <ol> <li><a href="#installation">Installation</a></li> <li><a href="#usage">Usage</a></li> <li><a href="#roadmap">Roadmap</a></li> <li><a href="#contributing">Contributing</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#acknowledgments">Acknowledgments</a></li> <li><a href="#license">License</a></li> </ol> </details> # The open-source Cursor for Designers Seamlessly integrate with any website or web app running on React + TailwindCSS, and make live edits directly in the browser DOM. Customize your design, control your codebase, and push your changes without compromise. https://github.com/user-attachments/assets/c8782d1e-fedc-46f3-8735-c3a762d4db16  ### Built With - [![React][React.js]][React-url] - [![Electron][Electron.js]][Electron-url] - [![Tailwind][TailwindCSS]][Tailwind-url] - [![Vite][Vite.js]][Vite-url] ## 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](https://www.linkedin.com/company/onlook-dev) or [Substack](https://onlook.substack.com/) where we write a weekly newsletter. <!--  --> ## Getting Started  ### Installation 1. Visit [onlook.com](https://onlook.com/) to download the app. 2. Run locally following [this guide](https://github.com/onlook-dev/onlook/wiki/Building-from-source) ### Usage Onlook will run on any React project, bring your own React project or create one using Onlook <img width="676" alt="Screenshot 2024-11-27 at 9 36 47 AM" src="https://github.com/user-attachments/assets/ec5c9bb2-7d0a-4754-962e-5d0c9fe0d706"> Use the chat to create or edit a project you're working on. At any time, you can always right-click an element to open up the exact location of the element in code. Just be sure to choose your preferred IDE in the upper-right Corner of the screen. <img width="600" alt="image" src="https://github.com/user-attachments/assets/4ad9f411-b172-4430-81ef-650f4f314666" /> <img width="403" alt="image" src="https://github.com/user-attachments/assets/44339458-05a7-46c3-b4f8-b7e125260216" /> ## Roadmap  See how we're tracking towards major [milestones](<[url](https://github.com/onlook-dev/onlook/milestones)>), and read the [wiki](https://github.com/onlook-dev/onlook/wiki/Roadmap) for details on each version of Onlook. Here's a rough overview of some of the major features we're looking at: - [x] Browser - [x] Editor - [x] Write-to-code - [X] AI chat - [ ] Variables - [ ] Components - [ ] Hosting Also check the [open issues](https://github.com/onlook-dev/onlook/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](https://github.com/onlook-dev/onlook/issues). See the [CONTRIBUTING.md](CONTRIBUTING.md) for instructions and code of conduct. #### Contributors <a href="https://github.com/onlook-dev/onlook/graphs/contributors"> <img src="https://contrib.rocks/image?repo=onlook-dev/onlook&t=1" /> </a> ## Contact  - Team: [Discord](https://discord.gg/hERDfFZCsH) - [Twitter](https://twitter.com/onlookdev) - [LinkedIn](https://www.linkedin.com/company/onlook-dev/) - [Email](mailto:[email protected]) - Project: [https://github.com/onlook-dev/onlook](https://github.com/onlook-dev/onlook) - Website: [https://onlook.com](https://onlook.com) ## Acknowledgments Projects we're inspired by: - [Visbug](https://github.com/GoogleChromeLabs/ProjectVisBug) - [Responsively](https://github.com/responsively-org/responsively-app) - [Supabase](https://github.com/supabase/supabase) - [ShadCN](https://github.com/shadcn-ui/ui) - [hymhub/css-to-tailwind](https://github.com/hymhub/css-to-tailwind) ## License Distributed under the Apache 2.0 License. See [LICENSE.md](LICENSE.md) for more information. <!-- https://www.markdownguide.org/basic-syntax/#reference-style-links --> [contributors-shield]: https://img.shields.io/github/contributors/onlook-dev/studio.svg?style=for-the-badge [contributors-url]: https://github.com/onlook-dev/onlook/graphs/contributors [forks-shield]: https://img.shields.io/github/forks/onlook-dev/studio.svg?style=for-the-badge [forks-url]: https://github.com/onlook-dev/onlook/network/members [stars-shield]: https://img.shields.io/github/stars/onlook-dev/studio.svg?style=for-the-badge [stars-url]: https://github.com/onlook-dev/onlook/stargazers [issues-shield]: https://img.shields.io/github/issues/onlook-dev/studio.svg?style=for-the-badge [issues-url]: https://github.com/onlook-dev/onlook/issues [license-shield]: https://img.shields.io/github/license/onlook-dev/studio.svg?style=for-the-badge [license-url]: https://github.com/onlook-dev/onlook/blob/master/LICENSE.txt [linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?logo=linkedin&colorB=555 [linkedin-url]: https://www.linkedin.com/company/onlook-dev [twitter-shield]: https://img.shields.io/badge/-Twitter-black?logo=x&colorB=555 [twitter-url]: https://x.com/onlookdev [discord-shield]: https://img.shields.io/badge/-Discord-black?logo=discord&colorB=555 [discord-url]: https://discord.gg/hERDfFZCsH [React.js]: https://img.shields.io/badge/react-%2320232a.svg?logo=react&logoColor=%2361DAFB [React-url]: https://reactjs.org/ [TailwindCSS]: https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?logo=tailwind-css&logoColor=white [Tailwind-url]: https://tailwindcss.com/ [Electron.js]: https://img.shields.io/badge/Electron-191970?logo=Electron&logoColor=white [Electron-url]: https://www.electronjs.org/ [Vite.js]: https://img.shields.io/badge/vite-%23646CFF.svg?logo=vite&logoColor=white [Vite-url]: https://vitejs.dev/ [product-screenshot]: assets/brand.png [weave-shield]: https://img.shields.io/endpoint?url=https%3A%2F%2Fapp.workweave.ai%2Fapi%2Frepository%2Fbadge%2Forg_pWcXBHJo3Li2Te2Y4WkCPA33%2F820087727&cacheSeconds=3600&labelColor=#131313 [weave-url]: https://app.workweave.ai/reports/repository/org_pWcXBHJo3Li2Te2Y4WkCPA33/820087727 ", Assign "at most 3 tags" to the expected json: {"id":"12818","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"