Astro Studio - first impression

2024 - 03 - 14
Astro Studio - first impression

I waited a long time for Astro Studio to launch. For quite a while I wasn't fully sure what to expect. Luckily, at JSWorld in Amsterdam Elian shared a bit more about it and I knew it would be a database.

Finally, the 12th of March happened, so I could test it on my own.


As I mentioned, I wasn't sure what to expect. I was guessing something between:

All of those, aren't what Astro Studio is. Which was disappointing for a moment, until I realized it was my fault as I was imagining things 😄

What Astro Studio really is

It's a database and it's a LibSQL database to be precise.

It has some cool features:

You can preview your DB data

Working with the DB

First of all - read the documentation. Everything is there already and knowing how Astro handles documentation it will only get better.


Installation is as simple as running npx astro add db and creating an account on Astro Studio.

Then, thanks to using the CLI, it's quite straightforward to connect your local project with Studio. Just remember about two things that were causing me some problems:

Creating a database

To create a database you need to create a db/config.ts file and define your fields inside. Documentation has you covered here, but let me show you a simple example:

const Posts = defineTable({
    columns: {
        title: column.text(),
        content: column.text(),

export default defineDb({
    tables: { Posts },

If you want to sync the schema with production you have to run astro db push. This should either sync everything or at least explain what went wrong and what actions you should take.


If you want to create local data you have to seed the database. To do so, inside of db/seed.ts you can prepare such data. You can either do it manually, connect a CMS (and grab the data from there), or use faker.js to generate some random stuff.

import { db, Posts } from 'astro:db';
import { faker } from '@faker-js/faker';

export default async function () {
    const PostsData = [];

    for (let i = 0; i < 100; i++) {
                title: faker.lorem.sentence(),
                content: faker.lorem.paragraphs(3),
                publishedAt:{ days: 30 })

    await db.batch(PostsData);

But what if, I would like to push this data to the production database? That's simple - just run astro db execute db/seed.ts --remote


Astro DB integrates Drizzle ORM, so if you would like to get all the posts just run:

import { db, Posts } from 'astro:db';

const posts = await;

<html lang="en">
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />

			{ Post ) => (

Do you want to just show the first 10 posts?

const posts = await;

Order them by title?

const posts = await;

Things that I hope to see

In its current state, Astro Studio is an amazing foundation for growth. From the technical point of view, it does exactly what it should and does it perfectly.

Some things can be better thought:

To sum up

There is no other JS framework I trust so much as I trust Astro. That means that even with those shortcomings that I mentioned above I see a huge potential of Studio and I'm sure that it will just get better and better.

I still have some hopes that Astro Studio will take a step towards content editing. Either directly or maybe via some additional tool.

Also, after Planetscape's free-tier removal, I truly hope that Astro will keep their end of the bargain and at some point we won't have to move somewhere else with our data:

Subscribe to my newsletter and stay updated.
Get an weekly email with news from around the web
Get updated about new blog posts
No spam

Share your thoughts

All Articles