Đã đăng vào khoảng 6 giờ trước 6 phút đọc

# [Open Source] 36 - Onlook: Xóa nhòa ranh giới giữa Design và Code với AI Agent & AST Manipulation

Trong thế giới phát triển phần mềm, khoảng cách giữa bản thiết kế (Figma) và sản phẩm thực tế (Code) luôn là một bài toán hóc búa. Onlook xuất hiện như một "kẻ thay đổi cuộc chơi", không chỉ dừng lại ở một công cụ No-code hay Low-code đơn thuần, mà là một Visual IDE thực thụ.

Dưới góc độ kỹ thuật, Onlook là một minh chứng xuất sắc cho việc kết hợp sức mạnh của trình biên dịch (AST), môi trường cô lập (Web Containers) và AI Agent để biến mã nguồn trở thành "ngôn ngữ chung" duy nhất.

Github: https://github.com/onlook-dev/onlook

🛠️ 1. Nền tảng công nghệ: Hiệu suất tối đa với Modern Stack

Onlook không chọn những lối mòn cũ kỹ, dự án tận dụng những công nghệ "mạnh tay" nhất để đảm bảo trải nghiệm mượt mà của một trình soạn thảo đồ họa:

Next.js (App Router) & TailwindCSS: Toàn bộ hệ thống UI và logic được xây dựng trên Next.js. TailwindCSS không chỉ là styling mà còn là đối tượng chính để Onlook thực hiện các thao tác thay đổi giao diện trực quan.
Bun & Monorepo: Sử dụng Bun làm runtime và package manager giúp tốc độ cài đặt và thực thi trong cấu trúc monorepo nhanh hơn đáng kể so với npm truyền thống.
State Management với MobX: Với các ứng dụng phức tạp như Editor, MobX cung cấp khả năng quản lý trạng thái phản ứng (reactive) mạnh mẽ, giúp đồng bộ hóa giữa cây DOM ảo và các bảng điều khiển thuộc tính.
CodeSandbox SDK: Đây là "trái tim" của tính năng Preview, cho phép chạy toàn bộ môi trường Node.js ngay trên trình duyệt (Web Containers) mà không cần server bên thứ ba.

🏗️ 2. Trụ cột kiến trúc: Triết lý "Code-as-Source-of-Truth"

Khác với các công cụ tạo web kéo thả thường lưu trữ dữ liệu dưới dạng JSON riêng biệt, Onlook đi theo hướng Source Code First.

Kiến trúc đồng bộ 100%: Mọi thao tác kéo thả trên UI sẽ ngay lập tức được chuyển đổi thành mã lệnh JSX/TSX. Điều này đảm bảo rằng developer có thể nhảy vào code bất cứ lúc nào mà không gặp phải mớ "spaghetti code" thường thấy ở các công cụ No-code.
Instrumentation (Định vị mã nguồn): Onlook thực hiện một kỹ thuật thông minh: gắn nhãn (tagging) các phần tử trong quá trình render. Khi bạn click vào một button trên giao diện, hệ thống biết chính xác button đó nằm ở file nào, dòng bao nhiêu nhờ vào metadata được chèn vào trong runtime.
AST Manipulation (Thao tác trên cây cú pháp): Để sửa code mà không làm hỏng logic của lập trình viên, Onlook sử dụng các bộ parser để phân tích cây cấu trúc mã (AST). Ví dụ: Khi bạn đổi màu nền từ đỏ sang xanh trên giao diện, Onlook sẽ tìm đúng thuộc tính trong file .tsx và thay đổi class Tailwind tương ứng một cách an toàn.

🔄 3. Các kỹ thuật "Pro-level" trong mã nguồn

AI Agentic Tools: AI của Onlook không chỉ "viết code rồi để đó". Nó được trang bị bộ Toolset gồm: Bash read/write, File search, Scrape URL. Điều này cho phép AI hiểu toàn bộ ngữ cảnh dự án, đọc các component hiện có và đề xuất các thay đổi mang tính hệ thống thay vì chỉ chỉnh sửa cục bộ.
Morph Fast Apply: Đây là kỹ thuật áp dụng thay đổi cực nhanh. Thay vì ghi đè toàn bộ file (dễ gây mất code cũ hoặc lỗi logic), Onlook sử dụng thuật toán so sánh để "vá" (patch) những đoạn code cần thiết, giữ nguyên cấu trúc và comment của người dùng.
Visual DOM Bridge: Sử dụng iFrame kết hợp với một lớp overlay để bắt các sự kiện tương tác. Kỹ thuật này giúp người dùng có cảm giác đang dùng Figma nhưng thực tế là đang tương tác trực tiếp với các node của trình duyệt.

📊 4. Workflow: Luồng hoạt động của Onlook Engine

Sơ đồ dưới đây mô tả cách Onlook xử lý một yêu cầu chỉnh sửa từ người dùng, từ lúc click trên giao diện đến khi code được cập nhật:

⚖️ 5. So sánh chiến lược

Tiêu chí	Onlook	Webflow / Framer	Cursor / VS Code
Đối tượng	Dev & Designer cùng làm việc	Chủ yếu dành cho Designer	Chủ yếu dành cho Dev
Dữ liệu gốc	Source Code (JSX/TSX)	Định dạng đóng (JSON)	Source Code
Khả năng can thiệp	Toàn quyền can thiệp code	Giới hạn trong Export	Toàn quyền
AI Support	AI Agent có khả năng đọc/ghi file	AI hỗ trợ generate nội dung	AI hỗ trợ viết code

✅ Kết luận: Tại sao Onlook là hình mẫu?

Onlook không chỉ là một công cụ, nó là tầm nhìn về tương lai của ngành Web Development: Mã nguồn là nền tảng, nhưng giao diện là trải nghiệm. Việc kết hợp thành công giữa thao tác trực quan và sự chặt chẽ của AST giúp Onlook trở thành một Case Study mẫu mực cho bất kỳ ai muốn xây dựng các công cụ Developer Tool thế hệ mới.

Đối với các kỹ sư, việc nghiên cứu cách Onlook xử lý đồng bộ hóa dữ liệu (Syncing) và cách họ nhúng AI vào quy trình chỉnh sửa file thực tế sẽ mở ra nhiều hướng đi mới cho các dự án tự động hóa cá nhân.

Hy vọng bài phân tích này giúp bạn có cái nhìn sâu sắc hơn về kiến trúc của Onlook. Đừng quên Upvote và Follow mình để khám phá thêm những dự án Open Source đỉnh cao khác nhé!