# `drizzle-kit studio`
<Prerequisites>
- Drizzle Kit [overview](/docs/kit-overview) and [config file](/docs/drizzle-config-file)
- Drizzle Studio, our database browser - [read here](/drizzle-studio/overview)
</Prerequisites>

`drizzle-kit studio` command spins up a server for [Drizzle Studio](/drizzle-studio/overview) hosted on [local.drizzle.studio](https://local.drizzle.studio). 
It requires you to specify database connection credentials via [drizzle.config.ts](/docs/drizzle-config-file) config file.

By default it will start a Drizzle Studio server on `127.0.0.1:4983`
<Section>
```ts {6}
// drizzle.config.ts
import { defineConfig } from "drizzle-kit";

export default defineConfig({
  dialect: "postgresql",
  dbCredentials: {
    url: "postgresql://user:password@host:port/dbname"
  },
});
```
```shell
npx drizzle-kit migrate
```
</Section>

### Configuring `host` and `port`
By default Drizzle Studio server starts on `127.0.0.1:4983`, 
you can config `host` and `port` via CLI options

<Npx>
drizzle-kit studio --port=3000
drizzle-kit studio --host=0.0.0.0
drizzle-kit studio --host=0.0.0.0 --port=3000
</Npx>


### Logging
You can enable logging of every SQL statement by providing `verbose` flag

<Npx>
drizzle-kit studio --verbose
</Npx>

### Safari and Brave support
Safari and Brave block access to localhost by default. 
You need to install [mkcert](https://github.com/FiloSottile/mkcert) and generate self-signed certificate:

1. Follow the mkcert [installation steps](https://github.com/FiloSottile/mkcert#installation)
2. Run `mkcert -install`
3. Restart your `drizzle-kit studio`

### Embeddable version of Drizzle Studio
While hosted version of Drizzle Studio for local development is free forever and meant to just enrich Drizzle ecosystem, 
we have a B2B offering of an embeddable version of Drizzle Studio for businesses.

**Drizzle Studio component** - is a pre-bundled framework agnostic web component of Drizzle Studio 
which you can embed into your UI `React` `Vue` `Svelte` `VanillaJS` etc. 

That is an extremely powerful UI element that can elevate your offering 
if you provide Database as a SaaS or a data centric SaaS solutions based 
on SQL or for private non-customer facing in-house usage.

Database platforms using Drizzle Studio:
- [Turso](https://turso.tech/), our first customers since Oct 2023!
- [Neon](https://neon.tech/), [launch post](https://neon.tech/docs/changelog/2024-05-24)
- [Hydra](https://www.hydra.so/)

Data centric platforms using Drizzle Studio:
- [Nuxt Hub](https://hub.nuxt.com/), Sébastien Chopin's [launch post](https://x.com/Atinux/status/1768663789832929520)
- [Deco.cx](https://deco.cx/)

You can read a detailed overview [here](https://www.npmjs.com/package/@drizzle-team/studio) and 
if you're interested - hit us in DMs on [Twitter](https://x.com/drizzleorm) or in [Discord #drizzle-studio](https://driz.link/discord) channel.

### Drizzle Studio chrome extension
Drizzle Studio [chrome extension](https://chromewebstore.google.com/detail/drizzle-studio/mjkojjodijpaneehkgmeckeljgkimnmd) 
lets you browse your [PlanetScale](https://planetscale.com), 
[Cloudflare](https://developers.cloudflare.com/d1/) and [Vercel Postgres](https://vercel.com/docs/storage/vercel-postgres)
serverless databases directly in their vendor admin panels!

### Limitations
Our hosted version Drizzle Studio is meant to be used for local development and not meant to be used on remote (VPS, etc).

If you want to deploy Drizzle Studio to your VPS - we have an alpha version of Drizzle Studio Gateway, 
hit us in DMs on [Twitter](https://x.com/drizzleorm) or in [Discord #drizzle-studio](https://driz.link/discord) channel.

### Is it open source?
No. Drizzle ORM and Drizzle Kit are fully open sourced, while Studio is not. 

Drizzle Studio for local development is free to use forever to enrich Drizzle ecosystem, 
open sourcing one would've break our ability to provide B2B offerings and monetise it, unfortunately.


Source: https://orm.drizzle.team/docs/drizzle-kit-up

import CodeTab from "@mdx/CodeTab.astro";
import CodeTabs from "@mdx/CodeTabs.astro";
import Section from "@mdx/Section.astro";
import Tab from "@mdx/Tab.astro";
import Tabs from "@mdx/Tabs.astro";
import Callout from "@mdx/Callout.astro";
import Prerequisites from "@mdx/Prerequisites.astro";
import Npx from "@mdx/Npx.astro";