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 的开发者，提供了直观的学习工具
Onlook 的优势:
- 开源开放：零门槛,可以快速的获取和安装,项目按月迭代,社区非常活跃;
- 简单易用：极易上手,通过鼠标点击和拖拽方式就可以完成UI调整,你说厉不厉害;
- 无缝集成：直接连接本地开发环境,修改实时写入源文件,无需额外配置;
- 精准定位：支持多种数据分享方式,能准确识别组件层级关系,定位到具体代码行;
- 效率倍增：告别代码-刷新-预览的循环,可视化调整让开发效率提升10倍。
Onlook 支持的技术栈:
- 前端框架： react、vue、Svelte等主流框架
- 构建工具： Vite、webpack、Next.js、Create React App等
- 样式方案： CSS Modules、Tailwind CSS、Styled Components等
- 开发环境： VSCode深度集成,支持Windows、macOS、Linux
使用方式
可通过即将推出的托管应用使用，或在本地运行。支持导入现有 Next.js + TailwindCSS 项目，也可从空白项目开始。通过 AI 聊天功能创建和编辑项目，随时右键点击元素查看对应代码位置。
命令行安装:
# 通过 npm 全局安装
npm install -g onlook
# 或使用 yarn
yarn global add onlook
# 在你的 React 项目目录下启动
cd your-react-project
onlook start
使用步骤:
// 1. 确保你的项目支持热更新(HMR)
// 2. 启动 Onlook 应用
// 3. 导入你的本地项目
// 4. 开始可视化编辑
// 示例：直接在浏览器中点击元素进行编辑
// 修改会自动同步到类似这样的代码文件:
function Button() {
return (
<button
style={{
padding: '10px 20px', // 可视化调整后自动更新
backgroundColor: '#007bff',
borderRadius: '4px'
}}
>
Click Me
</button>
);
}
另外,你也可以通过 VSCode 插件 快速连接 Onlook。如果是用于团队协作,我推荐你配合版本控制系统一起使用。
仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！
链接: https://fly63.com/nav/4330
