Kysely Studio

A powerful database management studio for Kysely - the type-safe SQL query builder for TypeScript.

Features

• 🔍 Database Explorer: Browse tables, schemas, and database structure
• 📊 Data Viewer: View and edit table data with an intuitive interface
• ✍️ SQL Playground: Write and execute SQL queries with syntax highlighting
• 🎯 TypeScript Support: Full TypeScript integration with Kysely
• 🎨 Modern UI: Beautiful, responsive interface built with React and Tailwind CSS
• 🔌 Easy Integration: Simple setup with Next.js, Express, or any Node.js framework

Installation

npm install kysely-studio

or with pnpm:

pnpm add kysely-studio

or with yarn:

yarn add kysely-studio

Peer Dependencies

This package requires the following peer dependencies:

• react >= 19.1.0
• react-dom >= 19.1.0

Usage

Next.js App Router

Create an API route handler:

// app/api/kysely-studio/route.ts
import { createKyselyStudioHandler } from 'kysely-studio/handler';
import { db } from '@/db'; // Your Kysely database instance

const handler = createKyselyStudioHandler({
  kysely: db,
});

export { handler as GET, handler as POST };

Then use the client component in your app:

// app/studio/page.tsx
'use client';

import { KyselyStudio } from 'kysely-studio';
import 'kysely-studio/styles.css';

export default function StudioPage() {
  return (
    <div style={{ height: '100vh' }}>
      <KyselyStudio apiPath="/api/kysely-studio" />
    </div>
  );
}

Express

import express from 'express';
import { createKyselyStudioHandler } from 'kysely-studio/handler';
import { db } from './db';

const app = express();

const studioHandler = createKyselyStudioHandler({
  kysely: db,
});

app.use('/api/kysely-studio', studioHandler);

app.listen(3000);

Configuration

The createKyselyStudioHandler function accepts the following options:

interface KyselyStudioConfig {
  kysely: Kysely<any>; // Your Kysely database instance
  // Additional configuration options
}

Styling

Import the CSS file in your application:

import 'kysely-studio/styles.css';

API

Client Component

import { KyselyStudio } from 'kysely-studio';

<KyselyStudio
  apiPath="/api/kysely-studio" // Path to your API handler
/>

Handler

import { createKyselyStudioHandler } from 'kysely-studio/handler';

Development

This package is built with:

• React 19
• TypeScript
• Tailwind CSS 4
• Radix UI
• Monaco Editor
• TanStack Query & Router

Browser Support

Kysely Studio works in all modern browsers that support ES2020.

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Related Projects

• Kysely - The type-safe SQL query builder
• Kysely Codegen - Generate TypeScript types from your database

Support

If you encounter any issues or have questions, please file an issue on the GitHub repository.