- โอเพนซอร์ส วิชวลไวบ์โค้ดดิงเอดิเตอร์ ที่ใช้สร้างเว็บไซต์ โปรโตไทป์ และงานออกแบบบนเว็บพร้อมโค้ดแบบเรียลไทม์
- พัฒนาบนพื้นฐาน Next.js + TailwindCSS รองรับการพรีวิวแบบเรียลไทม์ในเบราว์เซอร์และแก้ไข DOM ได้โดยตรง
- ตั้งเป้าเป็นทางเลือกโอเพนซอร์สแทนบริการเชิงพาณิชย์อย่าง Bolt, Lovable, V0, Replit Agent, Figma Make และ Webflow
ฟีเจอร์หลัก
- สร้างแอป Next.js ได้ทันทีจากข้อความ/รูปภาพ โดยมีแผนรองรับการนำเข้า Figma และเทมเพลต
- สร้างเพจด้วย UI คล้าย Figma พร้อมรองรับการจัดการแอสเซ็ตและโทเคน รวมถึงพรีวิวแบบเรียลไทม์
- โค้ดเอดิเตอร์แบบเรียลไทม์ บันทึกและกู้คืนเช็กพอยต์ได้ รันคำสั่งผ่าน CLI ได้ และเชื่อมต่อกับมาร์เก็ตเพลสได้
- รองรับการจัดการแบบภาพ เช่น drag-and-drop, การแก้ไขสไตล์ Tailwind และการทดลองเลย์เอาต์
- มีแผนรองรับการแก้ไขแบบเรียลไทม์ / คอมเมนต์ / ลิงก์แชร์ / คัสตอมโดเมน
- แม้จะเป็นเว็บเบส แต่ก็เชื่อมต่อกับเดสก์ท็อปแอปได้ด้วย (Onlook Desktop)
สถาปัตยกรรมและวิธีการทำงาน
- ตอนสร้างแอป ระบบจะโหลดโค้ดเข้าไปใน เว็บคอนเทนเนอร์ เพื่อให้โค้ดทำงาน
- แสดงลิงก์พรีวิวในเอดิเตอร์ผ่าน iFrame และทำการแมปโค้ดกับ UI
- AI แชตบอต ช่วยให้เข้าถึงและแก้ไขโค้ดได้ โดยสามารถเข้าใจและปรับแก้โค้ดโดยตรง
- สามารถขยายไปยังเฟรมเวิร์กหลากหลายที่ใช้ declarative DOM เช่น JSX/TSX/HTML
เทคโนโลยีสแต็กที่ใช้
- ฟรอนต์เอนด์: Next.js, TailwindCSS, tRPC
- ฐานข้อมูล/สตอเรจ: Supabase, Drizzle
- AI: AI SDK, Anthropic, Morph Fast Apply, Relace
- แซนด์บ็อกซ์/โฮสติง: CodeSandboxSDK, Freestyle
- รันไทม์/บันเดลเลอร์: Bun, Docker
ข้อมูลอื่น ๆ
- ไลเซนส์ Apache 2.0
- เว็บแอปจะเปิดเผยเร็ว ๆ นี้ และมีเดสก์ท็อปแอปแยกต่างหากด้วย
- ดูเอกสารทั้งหมดและวิธีเข้าร่วมพัฒนาได้ที่ เอกสารทางการ
2 ความคิดเห็น
Onlook - เครื่องมือสร้างแอปแบบปรับแต่งได้โดยใช้ Webflow แบบโอเพนซอร์ส
เคยมีการโพสต์ด้วยชื่อแบบนี้เมื่อประมาณ 1 ปีก่อน แต่สุดท้ายการตั้งชื่อก็สำคัญจริง ๆ ครับ/ค่ะ รูปแบบ OOO for XXX เข้าใจได้ง่ายกว่า