Cloud Studio

A lightweight database UI for SQLite databases with Prisma. Drop-in replacement for Prisma Studio.

Features

• Built with Hono and React
• Auto-refreshes every 5 seconds
• View, create, edit, and delete records

Installation

Global Installation

npm install -g @vibecodeapp/cloud-studio

Project Installation

npm install --save-dev @vibecodeapp/cloud-studio

Usage

Running Cloud Studio

Make sure you have:

1. A Prisma project with schema.prisma
2. Generated Prisma Client: npx prisma generate

Then run:

npx cloud-studio

By default, Cloud Studio runs on port 3001. You can customize the port:

PORT=5000 npx cloud-studio

Adding to package.json

Add a script to your package.json:

{
  "scripts": {
    "studio": "cloud-studio"
  }
}

Then run:

npm run studio

Development

Prerequisites

• Node.js 18+ or Bun
• A Prisma project with SQLite database

Setup

# Install dependencies
npm install

# Run in development mode
npm run dev

This starts:

• Backend server on port 3001
• Frontend dev server on port 5173

Building

npm run build

This creates:

• dist/client/ - Bundled React app
• dist/server/ - Bundled Node.js server

Architecture

Backend (Hono)

• Port 3001
• Uses Prisma Client from project

Frontend (React + Vite)

API Endpoints

• GET /api/schema - Get database schema
• GET /api/tables/:table - List records (with pagination)
• GET /api/tables/:table/:id - Get single record
• POST /api/tables/:table - Create record
• PATCH /api/tables/:table/:id - Update record
• DELETE /api/tables/:table/:id - Delete record