Onlook 架构
Onlook 采用 monorepo 结构，包含多个相互关联的应用和包，主要使用 Next.js、Supabase、TailwindCSS 和 Drizzle 构建。
目录结构
onlook/
|
├── apps/
│ ├── web/ # Web 应用组件
│ │ ├── client/ # 客户端应用（Next.js）
│ │ ├── preload/ # 预加载脚本（TypeScript）
│ │ └── server/ # 服务器端代码（Fastify.js - 目前未使用）
│ │
│ └── backend/ # 后端（Supabase）
│
├── packages/
│ ├── models/ # 共享数据模型和类型
│ ├── ui/ # 可复用 UI 组件和主题（ShadCN + TailwindCSS）
│ ├── ai/ # AI 集成工具（AI SDK）
│ └── schema/ # 应用共享模式（Drizzle ORM）
│
└── docs/ # 文档（Fumadocs + Nextjs）高层概述
可视化编辑
Onlook 本质上是一个指向本地运行应用的浏览器。它可以像 Chrome Devtool 一样操作 DOM，所有这些更改通过 CSS 样式表或 DOM 操作注入到页面中。这些更改在写入代码之前是非持久化的。
写入代码
为了将更改转换为代码，我们在构建时向 DOM 元素注入一个属性，类似 sourcemap，指向代码位置。该属性提供代码块的位置和组件作用域。随后我们找到对应代码，解析成 AST，注入样式，然后写回代码。
框架支持
此技术与框架无关，因我们可以为其他框架替换不同的编译器。它可以应用于任何代码库，因为仅使用了不需自定义代码的开放标准。生成的代码直接写入你的本地代码库，因此你可以随时使用输出，不会被工具锁定。
操作（Actions）
所有更改以操作的形式存储，使其可序列化、存储和重现。这样做的目的是未来可以支持在线协作或让智能代理生成操作。要实现这一点，我们只需服务本地运行的页面并解析传入的操作。
画布工作原理
编辑工作原理
编辑操作如何在 DOM 与写入代码间协作
讲解视频：https://youtu.be/aGUD9xS1XvA
时间点：
参考资料
旧的 electron 架构文档。仍然适用，将 webview 替换为 iframe：https://github.com/onlook-dev/desktop/wiki/Architecture