# Technical Documentation: outerbase/studio

> ℹ️ **Provenance:** Multi-Tier Ingestion · [CodeWiki Reference](https://codewiki.google/github.com/outerbase/studio)

### Overview (`README.md`)

# Outerbase Studio

[](https://deploy.workers.cloudflare.com/?url=https://github.com/outerbase/studio)

**Outerbase Studio** is a lightweight, browser-based GUI for managing SQL databases, designed for simplicity and versatility. Initially built for LibSQL and SQLite, it now supports a broad range of databases, including:

**Supported Databases:**

- **SQLite-based Database**
  - Turso/LibSQL
  - SQLite (local files)
  - Cloudflare D1
  - rqlite
  - StarbaseDB
  - Val.town
- MySQL (beta, limited features)
- PostgreSQL (beta, limited features)

---

Give it a try directly from your browser

[](https://libsqlstudio.com)
[](https://libsqlstudio.com/playground/client?template=chinook)

## Desktop App

You can download [Windows and Mac desktop app here](https://github.com/outerbase/studio-desktop/releases/).

Outerbase Studio Desktop is a lightweight Electron wrapper for the Outerbase Studio web version. It enables support for drivers that aren't feasible in a browser environment, such as MySQL and PostgreSQL.

## Features



- **Query Editor**: It features a user-friendly query editor equipped with auto-completion and function hint tooltips. It allows you to execute multiple queries simultaneously and view their results efficiently.
- **Data Editor**: It comes with a powerful data editor, allowing you to stage all your changes and preview them before committing. The data table is highly optimized and lightweight, capable of rendering thousands of rows and columns efficiently.
- **Schema Editor**: It allows you to quickly create, modify, and remove table columns with just a few clicks without writing any SQL.
- **Connection Manager**: It includes a flexible connection manager, allowing you to store your connections locally in your browser. You can also store them on a server and share your connections across multiple devices.

The features mentioned above are just a few of the many we offer. Give it a try to explore everything we have in store

---

### Overview (`docs/README.md`)

This is working in progress about how to extend our studio functionality

## Extensions

We have transitioned our architecture to an extension-based approach, where most features will be implemented as extensions. This shift allows new contributors to easily contribute to the codebase without requiring in-depth knowledge of the entire system.

This is the minimalist example of extension

```typescript
export default class SampleExtension extends StudioExtension {
  extensionName = "sample-extension";

  init(studio: StudioExtensionContext): void {
    // this is where we extend studio functionality
  }
}
```

- All of the extension is located at `/src/extensions`.
- Once you finish implement your extension, you can attach it to studio at `/src/core/standard-extension.tsx`

Below is a list of areas where extensions can build upon our core Outerbase Studio.

- [Sidebar](sidebar.md)
- [Window Tab](window-tab.md)
- Resource Creation Menu
- Resource Context Menu
- Query Hook

---

### Sidebar (`docs/sidebar.md`)

## Extending Sidebar

To create extension that add new sidebar with content.

```tsx
function SampleSidebar() {
  return <div>Sidebar Content</div>;
}

export default class SampleExtension extends StudioExtension {
  extensionName = "sample-extension";

  init(studio: StudioExtensionContext): void {
    studio.registerSidebar({
      key: "sample-extension-sidebar",
      name: "Sample",
      icon: <LucideArrow />,
      content: <SampleSidebar />,
    });
  }
}
```

You can also create sidebar without content. You need just need to provide `onClick` instead of `content`

```tsx
export default class SampleExtension extends StudioExtension {
  extensionName = "sample-extension";

  init(studio: StudioExtensionContext): void {
    studio.registerSidebar({
      key: "sample-extension-sidebar",
      name: "Sample",
      icon: <LucideArrow />,
      onClick: () => {
        // do something
      },
    });
  }
}
```

---

### Window Tab (`docs/window-tab.md`)

# Extending Window Tab

To create window tab, you need to use `createTabExtension`

- `key`: This is used to define the uniqueness of the tab. If no other tab has the same key, a new tab will be opened. Otherwise, it will attempt to reopen the previously opened tab with the same key. **Note: The key generated by the `key()` function will have the name appended to to avoid conflicts with other extensions.**
- `generate`: This is used to define the component of the tab.

```typescript
function SampleTabContent() {
  return <div>This is tab</div>;
}

export const sampleExtensionTab = createTabExtension({
  name: "sample-extension",
  key: () => "sample-extension-type",
  generate: () => ({
    title: "Sample Extension",
    component: <SampleTabContent />,
    icon: LucideCog,
  }),
});
```

Now you can open this tab from any other code simply by

```typescript
sampleExtensionTab.open();
```

## Passing Parameters

You can pass additional parameters to tab as the following

```typescript
function SampleTabContent(
    { schema, table }:
    { schema: string, table: string }
) {
  return <div>This is tab for {table} of {schema}</div>;
}

export const sampleExtensionTab = createTabExtension<{
    schema: string,
    table: string,
}>({
  name: "sample-extension",
  key: ({ schema, table }) => `${schema}-${table}`,
  generate: ({ schema, table }) => ({
    title: "Sample Extension",
    component: <SampleTabContent schema={schema} table={table} />,
    icon: LucideCog,
  }),
});
```

To open the tab

```typescript
sampleExtensionTab.open({
  schema: "public",
  table: "users",
});
```

You can also close the tab

```typescript
sampleExtensionTab.close({
  schema: "public",
  table: "users",
});
```

---

### Src App (Public) Docs Page (`src/app/(public)/docs/page.mdx`)

import { DocContent } from "@/components/mdx/docs";

export const metadata = {
  title: "What's LibSQL Studio",
};

<DocContent title="LibSQL Studio" group="About Us">

LibSQL Studio is an extremely powerful and lightweight SQLite GUI that runs in your browser. It comes packed with a ton of features, including:

- A powerful data editor capable of handling thousands of rows and columns without overwhelming your RAM.
- A SQL query editor with syntax highlighting, tooltips, and auto-completion to boost your productivity.
- Advanced tools for editing your table schema and indexes.

</DocContent>

---

### Src App (Public) Docs Connect Turso Page (`src/app/(public)/docs/connect-turso/page.mdx`)

import { DocContent } from "@/components/mdx/docs";

export const metadata = {
  title: "Connect to Turso using LibSQL Studio - The Best GUI Client for Turso",
};

<DocContent title="Connect to Turso" group="Connecting">

LibSQL Studio is an excellent GUI for working with the Turso database. Here is
a step-by-step guide on how to connect your Turso database using LibSQL
Studio.

## Generate Token

To connect to the Turso database, you need to generate a database token. Follow these steps via the Turso dashboard:

1. Go to the Turso Database section.
2. Navigate to the Database menu.
3. Click on **"Get Token"** on the right side of the database you want to connect.
4. Click **"Generate Token"** and then copy the token.

## Connect

Open LibSQL Studio

1. Click **"New Connection"** and choose **"Turso"**.
2. Enter your database URL and the token you generated earlier.
3. Click **"Connect."**

</DocContent>

---

### Src App (Public) Docs Connect Valtown Page (`src/app/(public)/docs/connect-valtown/page.mdx`)

import { DocContent } from "@/components/mdx/docs";

export const metadata = {
  title: "Connect to Val.town Database using LibSQL Studio",
};

<DocContent title="Connect to Valtown" group="Connecting">


LibSQL Studio is an excellent SQLite GUI client that offers extensive functionality.
Since Val.town's database is based on SQLite, LibSQL Studio is the perfect tool for managing it.
With LibSQL Studio, connecting to your Val.town personal database is easy. Please follow the steps below:

## Generate Token

1. Goto [API Token Setting](https://www.val.town/settings/api)
2. Click "New" if you haven't generated token before
3. Copy the token

## Connect

Open LibSQL Studio

1. Click **"New Connection"** and choose **"Valtown"**.
2. Enter your Val.town token.
3. Click **"Connect."**

</DocContent>

---

### Src App (Public) Docs Embed Iframe Client Page (`src/app/(public)/docs/embed-iframe-client/page.mdx`)

import { DocContent } from "@/components/mdx/docs";

export const metadata = {
  title: "Embedding Our Client via iFrame",
};

<DocContent title="Embedding Our Client via iFrame" group="Integration">

LibSQL Studio is a powerful SQLite client that you can now embed
in your website using our iFrame API. Key advantages of using
our iframe include:

- No need to expose any sensitive credentials to our client
- Ability to embed and rebrand it on your website
- Instant access to LibSQL Studio updates

## Embed LibSQL Studio

You can embed LibSQL Studio as the following

```html
<iframe src="https://libsqlstudio.com/embed/sqlite"></iframe>
```

There are several parameters you can control. For example:

```html
<iframe src="https://libsqlstudio.com/embed/sqlite?name=MyCoolDatabase"></iframe>
```

## Example

Here is a sample code demonstrating how to integrate using React and connect to Turso:

```
/* Detailed source-code truncated for AI context efficiency. */
```

</DocContent>

---

--- METRICS ---
- Files Extracted: 8
- Estimated Token Budget: ~2377 tokens
- Canonical Reference: https://codewiki.google/github.com/outerbase/studio