onlook
设计师的光标
探索文档»
???我们正在SF雇用工程师！ ???
查看演示·报告错误·请求功能
中文| Español|德意志| Français|葡萄牙| n 日本语| 한국어
开源，视觉优先的代码编辑器
在Next.js + Tailwindcss中使用AI制作网站，原型和设计。使用视觉编辑器直接在浏览器DOM中进行编辑。实时设计代码。 Bolt.new，可爱，V0，Replit Agent，Figma Make，WebFlow等的开源替代品。
onlook仍在开发中?????
我们正在积极寻找贡献者，以帮助onlook网络成为令人难以置信的迅速建立体验。检查开放问题是否有完整的提议功能（以及已知问题），并加入我们的不和谐，与数百个其他建筑商合作。
您可以用onlook做什么：
-
在几秒钟内创建Next.js应用
- 从文本或图像开始
- 使用预构建的模板
- 从无花果导入
- 从GitHub回购开始
-
视觉编辑您的应用程序
- 使用类似无花果的UI
- 实时预览您的应用
- 管理品牌资产和代币
- 创建并导航到页面
- 浏览层
- 管理项目图像
- 检测和使用组件 –以前在onlook Desktop中
-
开发工具
- 实时代码编辑器
- 从检查点保存和还原
- 通过CLI运行命令
- 与应用程序市场联系
-
在几秒钟内部署您的应用程序
- 生成可共享的链接
- 链接您的自定义域
-
与您的团队合作
- 实时编辑
- 留言
入门
很快就可以托管应用程序或在本地运行。
用法
onlook将在任何Next.js + TailWindCSS项目上运行，将您的项目导入onlook或在编辑器中从头开始。
使用AI聊天来创建或编辑您正在从事的项目。在任何时候，您始终可以右键单击元素以打开代码中元素的确切位置。
通过拖动和删除，将新的Divs绘制并将其重新安排在其父容器中。
与您的网站设计并排预览代码。
使用onlook的编辑器工具栏调节尾风样式，直接操纵对象并实验布局。
文档
有关完整文档，请访问文档。 onlook .com
要查看如何做出贡献，请访问我们文档中的onlook 。
它如何工作
- 创建应用程序时，我们将代码加载到Web容器中
- 容器运行并提供代码
- 我们的编辑器接收预览链接并在iframe中显示
- 我们的编辑器读取和索引来自容器的代码
- 我们仪器代码以将元素映射到代码中的位置
- 编辑元素时，我们在iframe中编辑元素，然后在代码中编辑
- 我们的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。
