onlook

在Next.js + Tailwindcss中使用AI制作网站，原型和设计。使用视觉编辑器直接在浏览器DOM中进行编辑。实时设计代码。 Bolt.new，可爱，V0，Replit Agent，Figma Make，WebFlow等的开源替代品。

我们正在积极寻找贡献者，以帮助onlook网络成为令人难以置信的迅速建立体验。检查开放问题是否有完整的提议功能（以及已知问题），并加入我们的不和谐，与数百个其他建筑商合作。

• 在几秒钟内创建Next.js应用

  • 从文本或图像开始
  • 使用预构建的模板
  • 从无花果导入
  • 从GitHub回购开始

• 视觉编辑您的应用程序

  • 使用类似无花果的UI
  • 实时预览您的应用
  • 管理品牌资产和代币
  • 创建并导航到页面
  • 浏览层
  • 管理项目图像
  • 检测和使用组件 -以前在onlook Desktop中

• 开发工具

  • 实时代码编辑器
  • 从检查点保存和还原
  • 通过CLI运行命令
  • 与应用程序市场联系

• 在几秒钟内部署您的应用程序

  • 生成可共享的链接
  • 链接您的自定义域

• 与您的团队合作

  • 实时编辑
  • 留言

很快就可以托管应用程序或在本地运行。

onlook将在任何Next.js + TailWindCSS项目上运行，将您的项目导入onlook或在编辑器中从头开始。

使用AI聊天来创建或编辑您正在从事的项目。在任何时候，您始终可以右键单击元素以打开代码中元素的确切位置。

通过拖动和删除，将新的Divs绘制并将其重新安排在其父容器中。

与您的网站设计并排预览代码。

使用onlook的编辑器工具栏调节尾风样式，直接操纵对象并实验布局。

有关完整文档，请访问文档。 onlook .com

要查看如何做出贡献，请访问我们文档中的onlook 。

1. 创建应用程序时，我们将代码加载到Web容器中
2. 容器运行并提供代码
3. 我们的编辑器接收预览链接并在iframe中显示
4. 我们的编辑器读取和索引来自容器的代码
5. 我们仪器代码以将元素映射到代码中的位置
6. 编辑元素时，我们在iframe中编辑元素，然后在代码中编辑
7. 我们的AI聊天还具有代码访问和工具来理解和编辑代码

理论上，该体系结构可以扩展到声明显示DOM元素的任何语言或框架（例如JSX/TSX/HTML）。目前，我们专注于使其与Next.js和tailwindcss保持良好状态。

要进行完整的演练，请查看我们的建筑文档。

• next.js-完整堆栈
• parwindcss-造型
• TRPC-服务器接口

• supabase- auth，数据库，存储
• 毛毛雨 - ORM

• AI SDK -LLM客户端
• OpenRouter -LLM模型提供商
• 变形快速应用 - 快速应用模型提供商
• 重新带 - 快速应用模型提供商

• codesandboxsdk-开发沙箱
• 自由泳 - 托管

• bun -monorepo，Runtime，Bundler
• Docker-容器管理

如果您有一个可以使情况变得更好的建议，请分配存储库并创建拉动请求。您也可以打开问题。

有关指示和行为准则，请参见贡献。

• 团队：Discord -Twitter -LinkedIn-电子邮件
• 项目：https：//github.com/onlook-dev/ onlook
• 网站：https：//onlook.com

根据Apache 2.0许可分发。有关更多信息，请参见License.MD。