studio

<!-- 改进了回到顶部链接的兼容性：参见 https://github.com/othneildrew/Best-README-Template/pull/73 -->

<a id="readme-top"></a>

<!-- 项目徽章 --> <!-- *** 我使用Markdown的"引用风格"链接以提高可读性。 *** 引用链接被括在方括号 [ ] 中，而不是圆括号 ( )。 *** 请参阅本文档底部的引用变量声明 *** 用于贡献者URL、分支URL等。这是一种可选的简洁语法。 *** https://www.markdownguide.org/basic-syntax/#reference-style-links --> <!-- [![贡献者][contributors-shield]][contributors-url] [![分支][forks-shield]][forks-url] [![星标][stars-shield]][stars-url] [![问题][issues-shield]][issues-url] [![Apache许可证][license-shield]][license-url] -->

[![Discord][discord-shield]][discord-url] [![领英][linkedin-shield]][linkedin-url] [![推特][twitter-shield]][twitter-url]

<img alt="GitHub缩略图v2" src="https://github.com/user-attachments/assets/00a47677-ccfe-4f9c-8088-4d9b16104303">

<div align="center"> <h3 align="center">Onlook</h3> <p align="center"> 首个浏览器驱动的可视化编辑器。 <br /> <a href="https://github.com/onlook-dev/studio/wiki"><strong>浏览文档 »</strong></a> <br /> <br /> <a href="https://youtu.be/RSX_3EaO5eU?feature=shared">观看演示</a> · <a href="https://github.com/onlook-dev/studio/issues/new?labels=bug&template=bug-report---.md">报告Bug</a> · <a href="https://github.com/onlook-dev/studio/issues/new?labels=enhancement&template=feature-request---.md">请求新功能</a> </p> </div> <!-- 目录 --> <details> <summary>目录</summary> <ol> <li> <a href="#about">关于</a> </li> <li><a href="#installation">安装</a></li> <li><a href="#usage">使用</a></li> <li><a href="#roadmap">路线图</a></li> <li><a href="#contributing">贡献</a></li> <li><a href="#contact">联系</a></li> <li><a href="#acknowledgments">致谢</a></li> <li><a href="#license">许可证</a></li> </ol> </details>

关于

可视化构建您的UI。支持任何React + TailwindCSS应用。

https://github.com/user-attachments/assets/c9bac609-5b05-417f-b2b2-e57d650d0dd6

构建工具

• [![React][React.js]][React-url]
• [![Electron][Electron.js]][Electron-url]
• [![Tailwind][TailwindCSS]][Tailwind-url]
• [![Vite][Vite.js]][Vite-url]

安装

1. 克隆仓库

   git clone https://github.com/onlook-dev/studio.git

2. 进入项目内的app文件夹

   cd studio/app

3. 安装NPM包

   npm install

4. 运行项目

   npm run dev

使用

尝试演示项目

我们在demos文件夹中包含了几个演示项目。其中包括标准React应用和Next.js React应用。

这些项目已经设置了Onlook插件，并直接向其中写入了代码。

要运行，请按以下步骤操作：

1. 运行演示项目

   cd demos/next && npm install && npm run dev

2. 打开Onlook studio
3. 指向http://localhost:3000

更多示例，请参阅文档

使用您自己的React项目

要尝试使用您自己的React + TailwindCSS项目，请按以下步骤操作：

使用CLI

1. 在您项目的根文件夹中运行以下命令：

npx @onlook/cli

2. 在本地运行您的项目
3. 打开Onlook studio，访问您的项目在本地运行的地址。例如 http://localhost:3000

有关更多信息，请参阅CLI包。

手动设置

如果您更愿意手动设置，可以选择此步骤。我们建议使用上述CLI方法。

1. 为您的React框架安装相应的Onlook插件：
   1. Nextjs
   2. Babel（webpack、esbuild、vite等）
2. 在开发模式下运行您的项目
3. 打开Onlook studio，访问您的项目在本地运行的地址。例如 http://localhost:3000

插件的代码位于 plugins 目录下。

路线图

• 浏览器
• 编辑器
• 写入代码
• 组件
• 变量
• 代码编辑器

查看路线图以获取详细的项目目标和改进列表。

查看未解决的问题以获取完整的功能提议（和已知问题）列表。

贡献

如果您有可以改进这个项目的建议，请fork该仓库并创建一个拉取请求。您也可以提出问题。

请查看CONTRIBUTING.md以获取说明和行为准则。

联系方式

• Onlook团队 - @onlookdev - contact@onlook.com
• 项目链接：https://github.com/onlook-dev/studio
• 网站：https://onlook.dev

致谢

• Project Visbug
• Responsively App

许可证

根据Apache 2.0许可证分发。有关更多信息，请参阅LICENSE.md。 [Vite.js]: https://img.shields.io/badge/vite-%23646CFF.svg?logo=vite&logoColor=white [Vite-url]: https://vitejs.dev/