[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3638":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":46,"readmeContent":47,"aiSummary":48,"trendingCount":16,"starSnapshotCount":16,"syncStatus":49,"lastSyncTime":50,"discoverSource":51},3638,"onlook","onlook-dev\u002Fonlook","onlook-dev","The Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your React App with AI","https:\u002F\u002Fonlook.com",null,"TypeScript",25905,1994,116,301,0,3,29,153,19,100.4,"Apache License 2.0",false,"main",true,[27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45],"ai","cursor","cursor-ai","design","design-to-code","drizzle","editor","figma","frontend","ide","low-code","nextjs","react","supabase","tailwindcss","typescript","ui","vibe-coding","vibecoding","2026-06-12 04:00:18","\u003C!-- Improved compatibility of back to top link: See: https:\u002F\u002Fgithub.com\u002Fothneildrew\u002FBest-README-Template\u002Fpull\u002F73 -->\n\n\u003Cdiv align=\"center\">\n\u003Cimg width=\"800\" alt=\"header image\" src=\"assets\u002Fweb-preview.png\">\n\u003Ch3 align=\"center\">Onlook\u003C\u002Fh3>\n  \u003Cp align=\"center\">\n    Cursor for Designers\n    \u003Cbr \u002F>\n    \u003Ca href=\"https:\u002F\u002Fdocs.onlook.com\">\u003Cstrong>Explore the docs »\u003C\u002Fstrong>\u003C\u002Fa>\n    \u003Cbr \u002F>\n  \u003C\u002Fp>\n  \u003Cp align=\"center\">\n    👨‍💻👩‍💻👨‍💻\n    \u003Ca href=\"https:\u002F\u002Fwww.ycombinator.com\u002Fcompanies\u002Fonlook\u002Fjobs\u002Fe4gHv1n-founding-engineer-fullstack\">We're hiring engineers in SF!\u003C\u002Fa>\n    👩‍💻👨‍💻👩‍💻\n  \u003C\u002Fp>\n    \u003Cbr \u002F>\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FRSX_3EaO5eU?feature=shared\">View Demo\u003C\u002Fa>\n    ·\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fissues\u002Fnew?labels=bug&template=bug-report---.md\">Report Bug\u003C\u002Fa>\n    ·\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fissues\u002Fnew?labels=enhancement&template=feature-request---.md\">Request Feature\u003C\u002Fa>\n  \u003C\u002Fp>\n  \u003C!-- PROJECT SHIELDS -->\n\u003C!--\n*** I'm using markdown \"reference style\" links for readability.\n*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).\n*** See the bottom of this document for the declaration of the reference variables\n*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.\n*** https:\u002F\u002Fwww.markdownguide.org\u002Fbasic-syntax\u002F#reference-style-links\n-->\n\u003C!-- [![Contributors][contributors-shield]][contributors-url]\n[![Forks][forks-shield]][forks-url]\n[![Stargazers][stars-shield]][stars-url]\n[![Issues][issues-shield]][issues-url]\n[![Apache License][license-shield]][license-url] -->\n\n[![Discord][discord-shield]][discord-url]\n[![LinkedIn][linkedin-shield]][linkedin-url]\n[![Twitter][twitter-shield]][twitter-url]\n\n[中文](https:\u002F\u002Fwww.readme-i18n.com\u002Fonlook-dev\u002Fonlook?lang=zh) |\n[Español](https:\u002F\u002Fwww.readme-i18n.com\u002Fonlook-dev\u002Fonlook?lang=es) |\n[Deutsch](https:\u002F\u002Fwww.readme-i18n.com\u002Fonlook-dev\u002Fonlook?lang=de) |\n[français](https:\u002F\u002Fwww.readme-i18n.com\u002Fonlook-dev\u002Fonlook?lang=fr) |\n[Português](https:\u002F\u002Fwww.readme-i18n.com\u002Fonlook-dev\u002Fonlook?lang=pt) |\n[Русский](https:\u002F\u002Fwww.readme-i18n.com\u002Fonlook-dev\u002Fonlook?lang=ru) |\n[日本語](https:\u002F\u002Fwww.readme-i18n.com\u002Fonlook-dev\u002Fonlook?lang=ja) |\n[한국어](https:\u002F\u002Fwww.readme-i18n.com\u002Fonlook-dev\u002Fonlook?lang=ko)\n\n\u003C\u002Fdiv>\n\n# An Open-Source, Visual-First Code Editor\n\nCraft websites, prototypes, and designs with AI in Next.js + TailwindCSS. Make\nedits directly in the browser DOM with a visual editor. Design in realtime with\ncode. An open-source alternative to Bolt.new, Lovable, V0, Replit Agent, Figma\nMake, Webflow, etc.\n\n### 🚧 🚧 🚧 Onlook is still under development 🚧 🚧 🚧\n\nWe're actively looking for contributors to help make Onlook for Web an\nincredible prompt-to-build experience. Check the\n[open issues](https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fissues) for a full list of\nproposed features (and known issues), and join our\n[Discord](https:\u002F\u002Fdiscord.gg\u002FhERDfFZCsH) to collaborate with hundreds of other\nbuilders.\n\n## What you can do with Onlook:\n\n- [x] Create Next.js app in seconds\n  - [x] Start from text or image\n  - [x] Use prebuilt templates\n  - [ ] Import from Figma\n  - [ ] Import from GitHub repo\n  - [ ] Make a PR to a GitHub repo\n- [x] Visually edit your app\n  - [x] Use Figma-like UI\n  - [x] Preview your app in real-time\n  - [x] Manage brand assets and tokens\n  - [x] Create and navigate to Pages\n  - [x] Browse layers\n  - [x] Manage project Images\n  - [x] Detect and use Components – _Previously in\n        [Onlook Desktop](https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fdesktop)_\n  - [ ] Drag-and-drop Components Panel\n  - [x] Use Branching to experiment with designs\n- [x] Development Tools\n  - [x] Real-time code editor\n  - [x] Save and restore from checkpoints\n  - [x] Run commands via CLI\n  - [x] Connect with app marketplace\n- [x] Deploy your app in seconds\n  - [x] Generate sharable links\n  - [x] Link your custom domain    \n- [ ] Collaborate with your team\n  - [x] Real-time editing\n  - [ ] Leave comments\n- [ ] Advanced AI capabilities\n  - [x] Queue multiple messages at once\n  - [ ] Use Images as references and as assets in a project\n  - [ ] Setup and use MCPs in projects\n  - [ ] Allow Onlook to use itself as a toolcall for branch creation and iteration\n- [ ] Advanced project support\n  - [ ] Support non-NextJS projects\n  - [ ] Support non-Tailwind projects\n\n![Onlook-GitHub-Example](https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F642de37a-72cc-4056-8eb7-8eb42714cdc4)\n\n## Getting Started\n\nUse our [hosted app](https:\u002F\u002Fonlook.com) or\n[run locally](https:\u002F\u002Fdocs.onlook.com\u002Fdevelopers\u002Frunning-locally).\n\n### Usage\n\nOnlook will run on any Next.js + TailwindCSS project, import your project into\nOnlook or start from scratch within the editor.\n\nUse the AI chat to create or edit a project you're working on. At any time, you\ncan always right-click an element to open up the exact location of the element\nin code.\n\n\u003Cimg width=\"600\" alt=\"image\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F4ad9f411-b172-4430-81ef-650f4f314666\" \u002F>\n\n\u003Cbr>\n\nDraw-in new divs and re-arrange them within their parent containers by\ndragging-and-dropping.\n\n\u003Cimg width=\"600\" alt=\"image\" src=\"assets\u002Finsert-div.png\">\n\n\u003Cbr>\n\nPreview the code side-by-side with your site design.\n\n\u003Cimg width=\"600\" alt=\"image\" src=\"assets\u002Fcode-connect.png\">\n\n\u003Cbr>\n\nUse Onlook's editor toolbar to adjust Tailwind styles, directly manipulate\nobjects, and experiment with layouts.\n\n\u003Cimg width=\"600\" alt=\"image\" src=\"assets\u002Ftext-styling.png\" \u002F>\n\n## Documentation\n\nFor full documentation, visit [docs.onlook.com](https:\u002F\u002Fdocs.onlook.com)\n\nTo see how to Contribute, visit\n[Contributing to Onlook](https:\u002F\u002Fdocs.onlook.com\u002Fdevelopers) in our docs.\n\n## How it works\n\n\u003Cimg width=\"676\" alt=\"architecture\" src=\"assets\u002Farchitecture.png\">\n\n1. When you create an app, we load the code into a web container\n2. The container runs and serves the code\n3. Our editor receives the preview link and displays it in an iFrame\n4. Our editor reads and indexes the code from the container\n5. We instrument the code in order to map elements to their place in code\n6. When the element is edited, we edit the element in our iFrame, then in code\n7. Our AI chat also has code access and tools to understand and edit the code\n\nThis architecture can theoretically scale to any language or framework that\ndisplays DOM elements declaratively (e.g. jsx\u002Ftsx\u002Fhtml). We are focused on\nmaking it work well with Next.js and TailwindCSS for now.\n\nFor a full walkthrough, check out our\n[Architecture Docs](https:\u002F\u002Fdocs.onlook.com\u002Fdevelopers\u002Farchitecture).\n\n### Our Tech Stack\n\n#### Front-end\n\n- [Next.js](https:\u002F\u002Fnextjs.org\u002F) - Full stack\n- [TailwindCSS](https:\u002F\u002Ftailwindcss.com\u002F) - Styling\n- [tRPC](https:\u002F\u002Ftrpc.io\u002F) - Server interface\n\n#### Database\n\n- [Supabase](https:\u002F\u002Fsupabase.com\u002F) - Auth, Database, Storage\n- [Drizzle](https:\u002F\u002Form.drizzle.team\u002F) - ORM\n\n#### AI\n\n- [AI SDK](https:\u002F\u002Fai-sdk.dev\u002F) - LLM client\n- [OpenRouter](https:\u002F\u002Fopenrouter.ai\u002F) - LLM model provider\n- [Morph Fast Apply](https:\u002F\u002Fmorphllm.com) - Fast apply model provider\n- [Relace](https:\u002F\u002Frelace.ai) - Fast apply model provider\n\n#### Sandbox and hosting\n\n- [CodeSandboxSDK](https:\u002F\u002Fcodesandbox.io\u002Fdocs\u002Fsdk) - Dev sandbox\n- [Freestyle](https:\u002F\u002Fwww.freestyle.sh\u002F) - Hosting\n\n#### Runtime\n\n- [Bun](https:\u002F\u002Fbun.sh\u002F) - Monorepo, runtime, bundler\n- [Docker](https:\u002F\u002Fwww.docker.com\u002F) - Container management\n\n## Contributing\n\n![image](https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fecc94303-df23-46ae-87dc-66b040396e0b)\n\nIf you have a suggestion that would make this better, please fork the repo and\ncreate a pull request. You can also\n[open issues](https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fissues).\n\nSee the [CONTRIBUTING.md](CONTRIBUTING.md) for instructions and code of conduct.\n\n#### Contributors\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fgraphs\u002Fcontributors\">\n  \u003Cimg src=\"https:\u002F\u002Fcontrib.rocks\u002Fimage?repo=onlook-dev\u002Fonlook\" \u002F>\n\u003C\u002Fa>\n\n## Contact\n\n![image](https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F60684b68-1925-4550-8efd-51a1509fc953)\n\n- Team: [Discord](https:\u002F\u002Fdiscord.gg\u002FhERDfFZCsH) -\n  [Twitter](https:\u002F\u002Ftwitter.com\u002Fonlookdev) -\n  [LinkedIn](https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fonlook-dev\u002F) -\n  [Email](mailto:contact@onlook.com)\n- Project:\n  [https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook](https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook)\n- Website: [https:\u002F\u002Fonlook.com](https:\u002F\u002Fonlook.com)\n\n## License\n\nDistributed under the Apache 2.0 License. See [LICENSE.md](LICENSE.md) for more\ninformation.\n\n\u003C!-- https:\u002F\u002Fwww.markdownguide.org\u002Fbasic-syntax\u002F#reference-style-links -->\n\n[contributors-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fcontributors\u002Fonlook-dev\u002Fstudio.svg?style=for-the-badge\n[contributors-url]: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fgraphs\u002Fcontributors\n[forks-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fforks\u002Fonlook-dev\u002Fstudio.svg?style=for-the-badge\n[forks-url]: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fnetwork\u002Fmembers\n[stars-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fonlook-dev\u002Fstudio.svg?style=for-the-badge\n[stars-url]: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fstargazers\n[issues-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fissues\u002Fonlook-dev\u002Fstudio.svg?style=for-the-badge\n[issues-url]: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fissues\n[license-shield]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fonlook-dev\u002Fstudio.svg?style=for-the-badge\n[license-url]: https:\u002F\u002Fgithub.com\u002Fonlook-dev\u002Fonlook\u002Fblob\u002Fmaster\u002FLICENSE.txt\n[linkedin-shield]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-LinkedIn-black.svg?logo=linkedin&colorB=555\n[linkedin-url]: https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fonlook-dev\n[twitter-shield]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-Twitter-black?logo=x&colorB=555\n[twitter-url]: https:\u002F\u002Fx.com\u002Fonlookdev\n[discord-shield]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-Discord-black?logo=discord&colorB=555\n[discord-url]: https:\u002F\u002Fdiscord.gg\u002FhERDfFZCsH\n[React.js]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Freact-%2320232a.svg?logo=react&logoColor=%2361DAFB\n[React-url]: https:\u002F\u002Freactjs.org\u002F\n[TailwindCSS]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Ftailwindcss-%2338B2AC.svg?logo=tailwind-css&logoColor=white\n[Tailwind-url]: https:\u002F\u002Ftailwindcss.com\u002F\n[Electron.js]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FElectron-191970?logo=Electron&logoColor=white\n[Electron-url]: https:\u002F\u002Fwww.electronjs.org\u002F\n[Vite.js]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fvite-%23646CFF.svg?logo=vite&logoColor=white\n[Vite-url]: https:\u002F\u002Fvitejs.dev\u002F\n[product-screenshot]: assets\u002Fbrand.png\n[weave-shield]: https:\u002F\u002Fimg.shields.io\u002Fendpoint?url=https%3A%2F%2Fapp.workweave.ai%2Fapi%2Frepository%2Fbadge%2Forg_pWcXBHJo3Li2Te2Y4WkCPA33%2F820087727&cacheSeconds=3600&labelColor=#131313\n[weave-url]: https:\u002F\u002Fapp.workweave.ai\u002Freports\u002Frepository\u002Forg_pWcXBHJo3Li2Te2Y4WkCPA33\u002F820087727\n","Onlook 是一个面向设计师的开源AI优先设计工具，能够通过可视化界面构建、样式化和编辑React应用程序。其核心功能包括利用AI技术在Next.js与TailwindCSS环境中创建网站原型和设计，并支持直接在浏览器DOM中进行视觉编辑。此外，它还提供了实时的设计与代码同步能力，是Bolt.new、Lovable等商业产品的开源替代方案。适用于需要快速原型设计、前端开发以及希望通过低代码方式提高工作效率的场景。",2,"2026-06-11 02:55:10","top_language"]