OnLook - डिज़ाइनरों के लिए Cursor

• वेब पर साइट, प्रोटोटाइप और डिज़ाइन को रियल-टाइम कोड के साथ बनाने वाला ओपन सोर्स visual vibe-coding editor
• Next.js + TailwindCSS आधारित, ब्राउज़र में रियल-टाइम प्रीव्यू और सीधे DOM संशोधन संभव
• Bolt, Lovable, V0, Replit Agent, Figma Make, Webflow जैसी कमर्शियल सेवाओं के ओपन सोर्स विकल्प का लक्ष्य

मुख्य फीचर

• Next.js ऐप को टेक्स्ट/इमेज से तुरंत जनरेट करना - Figma import, templates आदि का समर्थन जल्द
• Figma जैसे UI के साथ पेज बनाना, assets और tokens प्रबंधन, रियल-टाइम प्रीव्यू समर्थन
• रियल-टाइम code editor, checkpoint सेव और restore, CLI के जरिए कमांड चलाना, marketplace integration
• drag-and-drop, Tailwind style editing, layout experiments जैसी visual manipulation सुविधाएँ
• रियल-टाइम editing / comments / share links / custom domain समर्थन जल्द
• वेब-आधारित होने के बावजूद, desktop app(Onlook Desktop) के साथ भी integration संभव

आर्किटेक्चर और कार्यप्रणाली

• ऐप बनाते समय कोड को web container में लोड किया जाता है, जहाँ कोड रन होता है
• preview link को iFrame के रूप में editor में दिखाया जाता है, और code-UI mapping की जाती है
• AI chatbot कोड तक पहुँच और editing में मदद करता है, और कोड को सीधे समझकर संशोधित कर सकता है
• JSX/TSX/HTML जैसे declarative DOM का उपयोग करने वाले कई frameworks तक विस्तार संभव

इस्तेमाल किया गया tech stack

• फ्रंटएंड: Next.js, TailwindCSS, tRPC
• database/storage: Supabase, Drizzle
• AI: AI SDK, Anthropic, Morph Fast Apply, Relace
• sandbox/hosting: CodeSandboxSDK, Freestyle
• runtime/bundler: Bun, Docker

अन्य जानकारी

• Apache 2.0 लाइसेंस
• वेब ऐप जल्द सार्वजनिक होगा, desktop app भी अलग से उपलब्ध होगा
• पूरी documentation और development में भाग लेने का तरीका आधिकारिक दस्तावेज़ में देखें

[xguru]

Onlook - open source Webflow का उपयोग करने वाला कस्टम ऐप निर्माण टूल

करीब 1 साल पहले यह इसी शीर्षक से पोस्ट हुआ था, और सच में naming बहुत महत्वपूर्ण होती है। OOO for XXX समझना आसान होता है।