Onlook 是一个开源的、以视觉为优先的代码编辑器，专为网页设计和开发打造。它基于 Next.js 和 Tailwindcss 技术栈，支持在浏览器中直接编辑 dom 元素，实现可视化编辑与代码实时同步。作为一款开源工具，它可作为 Bolt.new、Lovable、V0、Replit Agent、Figma Make、Webflow 等产品的替代方案。
功能特色
- 快速创建 Next.js 应用，支持从文本或图片开始构建
- 提供预置模板，可从 Figma 导入设计，或关联 GitHub 仓库
- 具备类 Figma 的操作界面，支持可视化编辑应用内容
- 实时预览功能，可即时查看修改效果
- 支持品牌资产和令牌管理，方便统一设计风格
- 提供页面创建与导航、图层浏览、图片管理等设计功能
- 内置实时代码编辑器，支持检查点保存与恢复
- 可通过命令行界面运行指令，连接应用市场
- 支持快速部署、生成分享链接和绑定自定义域名
- 团队协作功能，包括实时编辑和评论功能
- 右键点击元素可直接定位到对应代码位置，实现设计与代码的精准映射
- 支持拖放操作创建和调整 p 布局，方便快速构建页面结构
技术架构
- 前端：采用 Next.js 全栈框架，结合 TailwindCSS 样式库和 tRPC 服务接口
- 数据库：使用 Supabase 处理认证、数据存储和文件存储，搭配 Drizzle ORM
- AI 支持：集成 AI SDK 客户端，通过 OpenRouter、Morph Fast Apply 等提供模型服务
- 沙箱与托管：基于 CodeSandboxSDK 实现开发沙箱，使用 Freestyle 进行托管
- 运行时：采用 Bun 管理单仓库、运行时和打包，通过 Docker 进行容器管理
应用场景
- 网页设计师：可通过可视化界面快速构建网页原型，无需深入编写代码
- 前端开发者：能在可视化编辑的同时实时查看代码变化，提高开发效率
- 团队协作：设计与开发团队可通过实时编辑和评论功能协同工作，减少沟通成本
- 快速原型开发：借助模板和 AI 辅助，快速将创意转化为可运行的网页原型
- 学习实践：对于学习 Next.js 和 TailwindCSS 的开发者，提供了直观的学习工具
使用方式
可通过即将推出的托管应用使用，或在本地运行。支持导入现有 Next.js + TailwindCSS 项目，也可从空白项目开始。通过 AI 聊天功能创建和编辑项目，随时右键点击元素查看对应代码位置。
仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！
链接: https://fly63.com/nav/4330
