studio

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

关于

可视化构建您的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/