# @drizzle-team/studio 中文文档

规范地址：https://npmcn.com/package/%40drizzle-team/studio/

版本：1\.0\.3
npm 元数据更新时间：2025-07-30T10:46:06.753Z
中文译文更新时间：2026-11-12T20:14:15.778Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40drizzle-team/studio
原文对照：https://npmcn.com/package/%40drizzle-team/studio/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：5.2 kB，2 个文件
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2023-07-01T13:17:47.339Z
- 最新版本发布：2025-07-30T10:46:06.487Z
- 近 30 天下载量：265388（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：42（近 12 个月 0 个）

## 中文简介

如果你想要一个Drizzle Studio NPL软件包 安装到你的产品中 - 你的位置是正确的!

## 安装

```sh
npm install @drizzle-team/studio
```

也可以使用：`pnpm add @drizzle-team/studio`、`yarn add @drizzle-team/studio`、`bun add @drizzle-team/studio`

## README

# Drizzle Studio 国家预防机制 软件包 QQ

如果你想要一个Drizzle Studio NPL软件包 安装到你的产品中 - 你的位置是正确的!  

![image](https://github.com/drizzle-team/drizzle-studio-npm/assets/4045375/9ac739e0-ec3d-4902-840d-abb3b71e3f17)

Drizzle Studio是一个基于网络的现代数据库浏览器,其形式包括:

1.  [Drizzle 地方发展工作室](https://orm.drizzle.team/drizzle-studio/overview) 用于您的 Drizzle ORM 项目
2.  [Drizzle Studio Chrome 扩展](https://driz.link/extension) 它允许您直接浏览 Planet Scale, Cloudflare D1, Vercel Postgres 和 AWS 数据 API 在本地控制台中
3.  Drizzle Studio Gateway(正在进行中的工作)是Studio关于类固醇的可部署多克化版本,你可以将其放入你的基础设施并私下连接到你的数据库中
4.  滴滴工作室组件 < -- 你在这里

  

`Drizzle Studio embeddable Component` - 是Drizzle Studio的一个预先捆绑的框架不可知性网络组件,可以嵌入到您的UI(React/Vue/Svelte/VanillaJS/Whatever)中. 这是一个非常强大的UI元素,它可以提升您的报价,如果你提供数据库作为SaaS或基于SQL的数据中心SaaS解决方案,或者供面临内部使用的私人非客户使用.

**使用 Drizzle Studio 的数据库平台 :**

-   [涡轮](https://turso.tech/)我们自2023年10月以来的第一批顾客!
-   [霓虹](https://neon.tech/), (中文(简体) ), [发射站](https://neon.tech/docs/changelog/2024-05-24)
-   [块状云](https://sqlitecloud.io/), (中文(简体) ), [发射站](https://blog.sqlitecloud.io/release-notes-introducing-database-studio-in-sqlite-cloud)
-   [海德拉语Name](https://www.hydra.so/)
-   [腾博](https://tembo.io/), (中文(简体) ), [发射站](https://tembo.io/blog/announcing-sql-editor)

**AI 为建设应用程序和网站提供动力的平台**

-   [替换](https://repl.it/), (中文(简体) ), [发射站](https://blog.replit.com/database-editor)
-   [德诺](https://deno.com/deploy), (中文(简体) ), [发射站](https://x.com/rough__sea/status/1950231545807327329)
-   [金斯达](https://kinsta.com/)
-   [创建.xyz](https://create.xyz/), (中文(简体) ), [发射站](https://x.com/create_xyz/status/1889479526499098830)
-   [吉布索奈语](https://www.gibsonai.com/), (中文(简体) ), [博客文章](https://www.gibsonai.com/blog/announcing-gibsonai-2-0-your-database-supercharged) [视频](https://www.youtube.com/watch?v=87g5tL3SWhI)
-   [塞瓦拉岛](https://sevalla.com/)
-   [扎皮语Name](https://heyzapi.com/)

**使用 Drizzle Studio 的数据中心平台 :**

-   [纳克特枢纽](https://hub.nuxt.com/)塞巴斯蒂安・肖邦 [劳克员额](https://x.com/Atinux/status/1768663789832929520)
-   [迪可](https://deco.cx/),正在进行整合

**使用 Drizzle 工作室启动 :**

-   [保健样本](https://samplehc.com/)

  

我们还有一套公司使用可嵌入的 Drizzle Studio 组件进行内部使用

### 自定义

Drizzle Studio是高度定制 我们有一个高级 [主题平台](https://drizzle.studio/),我们有一个选入 SQL 查询运行器, 我们可以在需求时添加各种特定合作伙伴的定制 QQ

滴滴工作室有一个 **选入 SQL 查询程序**数字 : ![image](https://github.com/drizzle-team/drizzle-studio-npm/assets/4045375/6e179d12-5026-4b9f-8e52-f4aa8ae8e883)

可编辑的位置 **贾森** 支持: ![Screenshot 2024-06-12 at 14 39 16](https://github.com/drizzle-team/drizzle-studio-npm/assets/4045375/f91bd27b-c868-4010-8309-465876529e81)

**高级过滤** 还有很多其他有用的东西: ![image](https://github.com/drizzle-team/drizzle-studio-npm/assets/4045375/8bbc4146-e66d-4231-9240-253335002032)

### 一体化

我们分发 Drizzle Studio 作为私有 npm 软件包, 这里的代码整合 看起来像:

```ts
import type { DrizzleStudioRef } from '@drizzle-team/your-company-studio';
import StudioScript from '@drizzle-team/your-company-studio?raw';


const lightCssVariables = {
  "--background": "#ffffff",
  ...
};
const darkCssVariables = { ... };


function App() {
  // create a ref to the drizzle-studio component
  const studioRef = useRef<DrizzleStudioRef>(null);
  const [theme, setTheme] = useState<'light' | 'dark'>('light');

  return (
    <div style={{
      height: '100%',
      width: '100%',
      display: 'flex',
      flexDirection: 'column',
    }}>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Change theme
      </ button>
      <drizzle-studio
        ref={studioRef}
        css-variables={JSON.stringify(theme === 'light' ? lightCssVariables : darkCssVariables)} // styling 
        title="Drizzle Studio"
        style={{
          flexGrow: 1,
          minHeight: 0,
        }}
      />
    </div>
  )
}

export default App
```

### 定价

定价取决于您平台的大小,以及它是否会是客户面对的或内部的,我们确实降低了赞助商的定价,如果你有兴趣支持我们的OSS会场,并且有品牌意识和与您的提供相关的流量!

随便你 [页:1](https://x.com/drizzleorm)在我们 [解析器](https://driz.link/discord) 或经由 [邮件](mailto:aleksandrblokh@gmail.com)来啊!

## 常见问题

### @drizzle-team/studio 是什么？

如果你想要一个Drizzle Studio NPL软件包 安装到你的产品中 - 你的位置是正确的\!

### 如何安装 @drizzle-team/studio？

在项目目录运行 npm install @drizzle-team/studio，或使用 pnpm add / yarn add / bun add。

### @drizzle-team/studio 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/drizzle-team\_\_studio 是否存在。

### @drizzle-team/studio 可以商用吗？

@drizzle-team/studio 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @drizzle-team/studio 的下载量有多少？

根据 npm 官方下载统计，@drizzle-team/studio 在 2026/10/13 – 2026/11/11 这 30 天内被下载 265,388 次，日均约 8,846 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @drizzle-team/studio 还在维护吗？

最新版本 1\.0\.3 发布于 2025/07/30（1\.3 年前）；至今共发布 42 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/07/01。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。