Using Drizzle Studio to visualize Turso

How to visualize data inside your Turso databases using Drizzle’s new studio feature.

Drizzle just released a new feature to go along with their impressive ORM.

Where could they have obtained that idea from…? 🤔

Anyway, hard to tell. 🤷‍♂️

I’m not in the business of guessing where Drizzle copied some new feature from. Let’s get back to our topic.

There have been questions in the Turso community about whether Turso has a UI. Well, Drizzle might have just provided that (despite what a little bird might have told me regarding some new Turso features dropping soon😉), again, I’m also not in the game of speculating Turso features, er.. maybe that shoe fits. Back to the topic…

Let’s see this new feature in action!.

Prepare the Turso project

Let’s demonstrate how to visualize Turso using Drizzle Studio by first forking this GitHub repository, then cloning it to our local environment. Set up the database per the instructions, I’ll wait.

I guess that’s done, do not run npm install just yet 🫷.
First, open the package.json file and update the drizzle-orm and drizzle-kit dependencies to the latest versions (^0.27.0 and ^0.19.3 respectively as of the time of writing).

Here’s a code snippet for reference..

"dependencies": {
  ...
  "drizzle-orm": "^0.27.0",
  ...
},
"devDependencies": {
  ...
  "drizzle-kit": "^0.19.3",
  ...
}

You’re welcome… 👨🏽‍💻

Now you can proceed to installing the project’s dependencies by running npm install .

Configure Drizzle to visualize Turso

The next step to this task is adding a Drizzle configuration file on the project’s root.
Create a drizzle.config.ts file, and add the following code.

import type { Config } from 'drizzle-kit';
import * as dotenv from 'dotenv';
dotenv.config();

export default {
  schema: './drizzle/schema.ts',
  out: './drizzle/migrations',
  driver: 'turso',
  dbCredentials: {
    url: process.env.TURSO_DB_URL as string,
    authToken: process.env.TURSO_DB_AUTH_TOKEN as string,
  },
} satisfies Config;

Yeah, you can just copy and paste this code block as is. “BUT”, make sure to have the environment variables set as instructed in the project’s README, otherwise I won’t be helping no one troubleshoot today, it’s Monday for Medium’s sake! 🤬

Er.., if you’re into config files (🤮) Drizzle provides more documentation on that on this page.

The last step would be opening your terminal and running npx drizzle-kit studio — port 3333 (you can use any port here).

You can now open localhost:3333 , and..

Voila!

There goes your Turso database visualized.

And, one last thing.. if you were attentive you might’ve seen that message on the terminal, casually warning that this feature is still in Beta (the Drizzle team has been moving fast!), so things might break, and it’s okay, you can keep on using the Turso CLI when that happens, c’est pas la fin du monde.

That’s it for today.

Hey, if you like this kind of content and would like to consume more, make sure to follow me on Twitter at @xinnks to stay in the loop on upcoming posts.

Peace! ✌️