### Install Drizzle Studio with yarn

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/api-reference.md

Install Drizzle Studio using yarn. An alternative package manager.

```bash
yarn add @drizzle-team/studio
```

--------------------------------

### Install @drizzle-team/studio with Bun

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/package-information.md

Use this command to install the package using Bun.

```bash
bun add @drizzle-team/studio
```

--------------------------------

### React Setup with Theme Switching

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/quick-start.md

Integrate Drizzle Studio into a React application with dynamic theme switching. This example demonstrates how to toggle between light and dark modes using CSS variables.

```typescript
import { useRef, useState } from 'react';
import '@drizzle-team/studio';
import type { DrizzleStudioRef } from '@drizzle-team/studio';

export default function App() {
  const studioRef = useRef<DrizzleStudioRef>(null);
  const [isDark, setIsDark] = useState(false);

  const theme = isDark ? {
    '--background': '#1a1a1a',
    '--text-color': '#ffffff',
  } : {
    '--background': '#ffffff',
    '--text-color': '#000000',
  };

  return (
    <div>
      <button onClick={() => setIsDark(!isDark)}>
        {isDark ? 'Light' : 'Dark'} Mode
      </button>
      <drizzle-studio
        ref={studioRef}
        title="Database Browser"
        css-variables={JSON.stringify(theme)}
        style={{
          width: '100%',
          height: 'calc(100vh - 40px)',
        }}
      />
    </div>
  );
}
```

--------------------------------

### Install Drizzle Studio with pnpm

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/api-reference.md

Install Drizzle Studio using pnpm. Another alternative package manager.

```bash
pnpm add @drizzle-team/studio
```

--------------------------------

### Install Drizzle Studio with Package Managers

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/configuration.md

Provides installation commands for Drizzle Studio using various package managers including npm, yarn, pnpm, and bun.

```bash
# npm
npm install @drizzle-team/studio
```

```bash
# yarn
yarn add @drizzle-team/studio
```

```bash
# pnpm
pnpm add @drizzle-team/studio
```

```bash
# bun
bun add @drizzle-team/studio
```

--------------------------------

### Vanilla JavaScript Usage Example

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/api-reference.md

Shows how to create and configure the Drizzle Studio web component using plain JavaScript.

```javascript
// Create and configure the component
const studio = document.createElement('drizzle-studio');

studio.setAttribute('title', 'My Database');
studio.setAttribute('css-variables', JSON.stringify({
  '--background': '#ffffff',
}));

studio.style.width = '100%';
studio.style.height = '100vh';

document.body.appendChild(studio);
```

--------------------------------

### Basic HTML Syntax for Drizzle Studio

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/component-api.md

Example of how to use the <drizzle-studio> component in HTML. It demonstrates setting CSS variables, a title, and inline styles for layout.

```html
<drizzle-studio
  ref={studioRef}
  css-variables='{"--background": "#ffffff"}'
  title="Database Manager"
  style="flex-grow: 1; min-height: 0;"
></drizzle-studio>
```

--------------------------------

### Vue 3 Usage Example with Theming

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/api-reference.md

Illustrates integrating the Drizzle Studio web component into a Vue 3 application with dynamic theme switching.

```vue
<template>
  <div class="studio-container">
    <button @click="toggleTheme">
      {{ isDarkMode ? 'Light Mode' : 'Dark Mode' }}
    </button>
    <drizzle-studio
      ref="studioComponent"
      :css-variables="cssVariablesJson"
      title="Drizzle Studio"
    />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const isDarkMode = ref(false);
const studioComponent = ref(null);

const cssVariables = computed(() => ({
  '--background': isDarkMode.value ? '#1a1a1a' : '#ffffff',
  '--text-color': isDarkMode.value ? '#ffffff' : '#000000',
}));

const cssVariablesJson = computed(() => 
  JSON.stringify(cssVariables.value)
);

const toggleTheme = () => {
  isDarkMode.value = !isDarkMode.value;
};
</script>

<style scoped>
.studio-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

drizzle-studio {
  flex-grow: 1;
  min-height: 0;
}
</style>
```

--------------------------------

### React Usage Example with Theming

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/api-reference.md

Demonstrates how to use the Drizzle Studio web component in a React application, including dynamic theming via CSS variables.

```typescript
import { useRef, useState } from 'react';
import type { DrizzleStudioRef } from '@drizzle-team/studio';
import StudioScript from '@drizzle-team/studio?raw';

function App() {
  const studioRef = useRef<DrizzleStudioRef>(null);
  const [theme, setTheme] = useState<'light' | 'dark'>('light');

  const lightCssVariables = {
    "--background": "#ffffff",
    "--text-color": "#000000",
    "--border-color": "#e0e0e0",
  };

  const darkCssVariables = {
    "--background": "#1a1a1a",
    "--text-color": "#ffffff",
    "--border-color": "#333333",
  };

  return (
    <div style={{
      height: '100%',
      width: '100%',
      display: 'flex',
      flexDirection: 'column',
    }}>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}> 
        {theme === 'light' ? 'Dark Mode' : 'Light Mode'}
      </button>
      <drizzle-studio
        ref={studioRef}
        css-variables={JSON.stringify(theme === 'light' ? lightCssVariables : darkCssVariables)}
        title="Drizzle Studio"
        style={{
          flexGrow: 1,
          minHeight: 0,
        }}
      />
    </div>
  );
}

export default App;
```

--------------------------------

### Install Drizzle Studio NPM Package

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/INDEX.md

Install the Drizzle Studio NPM package using npm. This is the first step to embedding Drizzle Studio into your application.

```bash
npm install @drizzle-team/studio
```

--------------------------------

### Next.js App Router Setup for Drizzle Studio

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/quick-start.md

Integrate Drizzle Studio into your Next.js application using the App Router. This example demonstrates setting up the studio component with necessary imports and styling.

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

import { useRef } from 'react';
import '@drizzle-team/studio';
import type { DrizzleStudioRef } from '@drizzle-team/studio';

export default function StudioPage() {
  const studioRef = useRef<DrizzleStudioRef>(null);

  return (
    <drizzle-studio
      ref={studioRef}
      title="Next.js Database"
      style={{
        width: '100%',
        height: '100vh',
      }}
    />
  );
}

```

--------------------------------

### Example JSON Export Data

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/features-overview.md

Demonstrates the structure of data exported in JSON format, as an array of objects.

```json
[
  {
    "id": 1,
    "name": "John Doe",
    "email": "john@example.com",
    "created_at": "2024-01-15T10:00:00Z"
  },
  {
    "id": 2,
    "name": "Jane Smith",
    "email": "jane@example.com",
    "created_at": "2024-01-20T14:30:00Z"
  }
]
```

--------------------------------

### Example CSV Export Data

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/features-overview.md

Illustrates the format for exporting data in CSV format, including headers and rows.

```text
id,name,email,created_at
1,John Doe,john@example.com,2024-01-15
2,Jane Smith,jane@example.com,2024-01-20
```

--------------------------------

### Troubleshoot Drizzle Studio Installation

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/package-information.md

Commands to clear the npm cache, reinstall the Drizzle Studio package, and verify its installation.

```bash
# Clear npm cache
npm cache clean --force

# Reinstall
npm install @drizzle-team/studio

# Verify installation
npm list @drizzle-team/studio
```

--------------------------------

### Vue 3 Basic Setup

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/quick-start.md

Integrate Drizzle Studio into a Vue 3 application. Ensure the component is mounted before attempting to set attributes.

```vue
<template>
  <drizzle-studio
    ref="studio"
    title="My Database"
    style="width: 100%; height: 100vh;"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import '@drizzle-team/studio';

const studio = ref(null);

onMounted(() => {
  if (studio.value) {
    studio.value.setAttribute('css-variables', JSON.stringify({
      '--background': '#ffffff',
    }));
  }
});
</script>
```

--------------------------------

### React Usage Example with DrizzleStudioRef

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/api-reference.md

Demonstrates how to use the DrizzleStudioRef type with React's useRef hook to get a handle to the `<drizzle-studio>` web component. This enables programmatic control and integration.

```typescript
import { useRef } from 'react';
import type { DrizzleStudioRef } from '@drizzle-team/studio';

function DatabaseBrowser() {
  const studioRef = useRef<DrizzleStudioRef>(null);

  const handleConnect = () => {
    // Interact with the studio component
    if (studioRef.current) {
      // Future interaction methods would be called here
    }
  };

  return (
    <drizzle-studio
      ref={studioRef}
      title="Drizzle Studio"
      css-variables={JSON.stringify({
        "--background": "#ffffff",
        "--text-color": "#000000",
      })}
    />
  );
}

export default DatabaseBrowser;
```

--------------------------------

### Importing Drizzle Studio Script

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/api-reference.md

Shows how to import the raw script file for advanced setup or custom build integrations.

```typescript
import StudioScript from '@drizzle-team/studio?raw';
```

--------------------------------

### Basic React Setup for Drizzle Studio

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/quick-start.md

Integrate Drizzle Studio into a React application using a ref to access its methods. Set a title and dimensions for the component.

```typescript
import { useRef } from 'react';
import '@drizzle-team/studio';
import type { DrizzleStudioRef } from '@drizzle-team/studio';

export default function App() {
  const studioRef = useRef<DrizzleStudioRef>(null);

  return (
    <drizzle-studio
      ref={studioRef}
      title="My Database"
      style={{
        width: '100%',
        height: '100vh',
      }}
    />
  );
}
```

--------------------------------

### Install Specific Drizzle Studio Version

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/package-information.md

Install a specific version of the Drizzle Studio package to resolve compatibility issues or revert to a known stable version.

```bash
npm install @drizzle-team/studio@1.0.4
```

--------------------------------

### Responsive Design with Media Queries

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/component-api.md

Provides CSS examples for making the Drizzle Studio component responsive across different screen sizes using media queries for mobile and desktop layouts.

```css
/* Mobile */
@media (max-width: 768px) {
  drizzle-studio {
    width: 100%;
    height: 100vh;
  }
}

/* Desktop */
@media (min-width: 1200px) {
  drizzle-studio {
    width: 1000px;
    height: 700px;
  }
}
```

--------------------------------

### Vanilla JavaScript Basic Setup

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/quick-start.md

Embed Drizzle Studio directly into an HTML file using Vanilla JavaScript. Import the studio component and include basic styling for full-page display.

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Drizzle Studio</title>
  <style>
    body { margin: 0; padding: 0; }
    drizzle-studio { width: 100%; height: 100vh; }
  </style>
</head>
<body>
  <drizzle-studio title="Database Browser"></drizzle-studio>

  <script type="module">
    import '@drizzle-team/studio';
  </script>
</body>
</html>
```

--------------------------------

### Minimal Drizzle Studio Example in React

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/README.md

Integrate Drizzle Studio into a React application. Ensure the component is imported and a ref is used for potential programmatic access.

```tsx
import { useRef } from 'react';
import '@drizzle-team/studio';
import type { DrizzleStudioRef } from '@drizzle-team/studio';

export function MyApp() {
  const studioRef = useRef<DrizzleStudioRef>(null);
  
  return <drizzle-studio 
    ref={studioRef}
    title="My Database"
    style={{ width: '100%', height: '100vh' }}
  />;
}
```

--------------------------------

### Pin Drizzle Studio Package Version (Exact)

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/package-information.md

Specify an exact version of the Drizzle Studio package in your package.json file to ensure consistent installations.

```json
{
  "dependencies": {
    "@drizzle-team/studio": "1.0.4"      // Exact version
  }
}
```

--------------------------------

### Minimal Drizzle Studio Example in Vanilla JavaScript

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/README.md

Use Drizzle Studio directly in an HTML file with vanilla JavaScript. The component and its script are imported within the body.

```html
<!DOCTYPE html>
<html>
<body>
  <drizzle-studio title="My Database"></drizzle-studio>
  <script type="module">
    import '@drizzle-team/studio';
  </script>
</body>
</html>
```

--------------------------------

### Advanced Drizzle Studio Integration with Event Listeners

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/integration-guide.md

This example demonstrates a more advanced integration using a class to manage the Drizzle Studio component. It includes creating controls, toggling themes via CSS variables, and handling DOMContentLoaded events.

```javascript
class StudioManager {
  constructor(containerId) {
    this.container = document.getElementById(containerId);
    this.isDark = false;
    this.themes = {
      light: { '--background': '#ffffff' },
      dark: { '--background': '#1a1a1a' },
    };
    this.studio = null;
    this.init();
  }

  init() {
    // Create studio element
    this.studio = document.createElement('drizzle-studio');
    this.studio.setAttribute('title', 'Database Manager');
    this.studio.style.width = '100%';
    this.studio.style.height = '100%';

    // Create controls
    const controls = document.createElement('div');
    controls.style.padding = '1rem';
    const button = document.createElement('button');
    button.textContent = 'Toggle Theme';
    button.addEventListener('click', () => this.toggleTheme());
    controls.appendChild(button);

    // Add to container
    this.container.appendChild(controls);
    this.container.appendChild(this.studio);

    this.updateTheme();
  }

  toggleTheme() {
    this.isDark = !this.isDark;
    this.updateTheme();
  }

  updateTheme() {
    const theme = this.isDark ? 'dark' : 'light';
    this.studio.setAttribute(
      'css-variables',
      JSON.stringify(this.themes[theme])
    );
  }
}

// Usage
document.addEventListener('DOMContentLoaded', () => {
  const manager = new StudioManager('app');
});
```

--------------------------------

### Vue 3 Integration with Drizzle Studio

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/package-information.md

Provides an example of how to set up a ref for Drizzle Studio within a Vue 3 project. This allows for reactive access to the component.

```typescript
import { ref } from 'vue';
import type { DrizzleStudioRef } from '@drizzle-team/studio';

const studioRef = ref<DrizzleStudioRef>(null);
```

--------------------------------

### Import Drizzle Studio Component

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/quick-start.md

Import the Drizzle Studio component after installation. This makes the custom element available in your application.

```typescript
import '@drizzle-team/studio';
```

--------------------------------

### Usage in TypeScript Projects

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/package-information.md

Demonstrates how to import and use Drizzle Studio within a TypeScript React project. This example shows the correct way to type the ref for the component.

```typescript
import type { DrizzleStudioRef } from '@drizzle-team/studio';
import { useRef } from 'react';

interface MyComponentProps {
  studioRef: React.Ref<DrizzleStudioRef>;
}

export function MyComponent({ studioRef }: MyComponentProps) {
  return <drizzle-studio ref={studioRef} />;
}
```

--------------------------------

### Setting the Display Title

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/component-api.md

Examples of using the `title` attribute to set a custom display title for the component. An empty title is also permissible.

```html
<drizzle-studio title="Production DB"></drizzle-studio>
<drizzle-studio title="Analytics Dashboard"></drizzle-studio>
<drizzle-studio title=""></drizzle-studio> <!-- Empty title -->
```

--------------------------------

### drizzle-studio Element Attributes

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/component-api.md

Reference for all attributes available on the <drizzle-studio> web component, including their types, default values, and usage examples.

```APIDOC
## Attributes

### `ref` (Framework-specific)

**Type**: Reference object
**Required**: No
**Default**: Not set
**Description**: Framework-specific reference for accessing component instance.

Used with:
```typescript
// React
const ref = useRef<DrizzleStudioRef>(null);
<drizzle-studio ref={ref} />

// Vue
const studioRef = ref(null);
<drizzle-studio ref="studioRef" />

// Svelte
<drizzle-studio bind:this={element} />

// Vanilla JS
const element = document.querySelector('drizzle-studio');
```

### `css-variables` (String)

**Type**: JSON string
**Required**: No
**Default**: Empty object
**Example**: `'{"--background": "#ffffff"}'`
**Description**: JSON-stringified CSS custom properties for theming.

Valid values must be valid JSON:

```typescript
// Valid
'{"--background": "#ffffff", "--text": "#000"}'
JSON.stringify({ "--background": "#ffffff" })

// Invalid
'{background: white}'  // Unquoted keys
"'{\"--background\": \"#ffffff\"}'"  // Double-encoded
```

**Format Requirements**:
- Must be valid JSON
- All property names start with `--`
- Values are CSS-compatible strings (colors, numbers, lengths)

### `title` (String)

**Type**: String
**Required**: No
**Default**: `"Drizzle Studio"`
**Example**: `title="My Database Browser"`
**Description**: Display title shown in the component header.

Character Limits:
- Minimum: 0 characters (empty title allowed)
- Recommended: 1-50 characters
- No special character restrictions

```html
<drizzle-studio title="Production DB"></drizzle-studio>
<drizzle-studio title="Analytics Dashboard"></drizzle-studio>
<drizzle-studio title=""></drizzle-studio> <!-- Empty title -->
```

### `style` (CSS)

**Type**: Inline CSS styles
**Required**: No
**Default**: Not set
**Description**: Inline CSS style rules applied to the component container.

Useful Style Properties:

| Property |
|----------|
| `width` | Component width | `width: 100%` |
| `height` | Component height | `height: 100vh` |
| `flex` | Flex grow/basis | `flex: 1` or `flex-grow: 1` |
| `min-height` | Minimum height | `min-height: 0` |
| `border` | Border styling | `border: 1px solid #ccc` |
| `margin` | External spacing | `margin: 1rem` |
| `padding` | Internal spacing | `padding: 1rem` |

```html
<!-- Flex layout -->
<drizzle-studio style="flex: 1; min-height: 0;"></drizzle-studio>

<!-- Fixed size -->
<drizzle-studio style="width: 800px; height: 600px;"></drizzle-studio>

<!-- Full viewport -->
<drizzle-studio style="width: 100vw; height: 100vh;"></drizzle-studio>

<!-- With border -->
<drizzle-studio style="border: 1px solid #ddd; border-radius: 8px;"></drizzle-studio>
```
```

--------------------------------

### Configure Next.js Server Component with Environment Variables

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/configuration.md

Example of configuring Drizzle Studio within a Next.js Server Component, using environment variables for theme selection and the component title. Assumes 'darkTheme' and 'lightTheme' are defined elsewhere.

```typescript
export async function StudioContainer() {
  const isDark = process.env.STUDIO_DARK_MODE === 'true';
  
  const theme = isDark ? darkTheme : lightTheme;
  
  return (
    <drizzle-studio
      css-variables={JSON.stringify(theme)}
      title={process.env.STUDIO_TITLE || 'Drizzle Studio'}
    />
  );
}
```

--------------------------------

### Admin Dashboard Integration with Drizzle Studio

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/integration-guide.md

Integrate Drizzle Studio into an admin dashboard to manage multiple databases. This example allows switching between different databases and customizes the studio's appearance.

```typescript
export function AdminDashboard() {
  const [selectedDatabase, setSelectedDatabase] = useState('default');
  const [isQueryRunnerEnabled, setIsQueryRunnerEnabled] = useState(false);

  const databases = {
    default: 'Default Database',
    analytics: 'Analytics Database',
    logs: 'Logs Database',
  };

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', height: '100vh' }}>
      <aside style={{
        borderRight: '1px solid #e0e0e0',
        padding: '1rem',
        background: '#f9f9f9',
      }}>
        <h2>Databases</h2>
        {Object.entries(databases).map(([key, name]) => (
          <button
            key={key}
            onClick={() => setSelectedDatabase(key)}
            style={{
              display: 'block',
              width: '100%',
              padding: '0.5rem',
              marginBottom: '0.5rem',
              background: selectedDatabase === key ? '#3b82f6' : '#fff',
              color: selectedDatabase === key ? '#fff' : '#000',
            }}
          >
            {name}
          </button>
        ))}
      </aside>
      <main>
        <drizzle-studio
          title={databases[selectedDatabase as keyof typeof databases]}
          css-variables={JSON.stringify({
            '--background': '#ffffff',
            '--primary-color': '#3b82f6',
          })}
        />
      </main>
    </div>
  );
}
```

--------------------------------

### Svelte Integration with Drizzle Studio

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/package-information.md

Demonstrates how to bind a variable to the Drizzle Studio component in Svelte. This is the Svelte-specific way to get a reference to the component instance.

```typescript
let studioElement: DrizzleStudioRef;
<drizzle-studio bind:this={studioElement} />
```

--------------------------------

### Vanilla JavaScript with Theme Control

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/quick-start.md

Control Drizzle Studio's theme dynamically using Vanilla JavaScript. This example demonstrates toggling between light and dark themes by updating CSS variables.

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body { margin: 0; padding: 0; }
    #app {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    header {
      padding: 1rem;
      background: #f0f0f0;
      border-bottom: 1px solid #ddd;
    }
    drizzle-studio {
      flex: 1;
    }
  </style>
</head>
<body>
  <div id="app">
    <header>
      <button id="themeBtn">Toggle Theme</button>
    </header>
    <drizzle-studio id="studio" title="Database Browser"></drizzle-studio>
  </div>

  <script type="module">
    import '@drizzle-team/studio';

    let isDark = false;
    const studio = document.getElementById('studio');
    const themeBtn = document.getElementById('themeBtn');

    function updateTheme() {
      const theme = isDark ? {
        '--background': '#1a1a1a',
        '--text-color': '#ffffff',
      } : {
        '--background': '#ffffff',
        '--text-color': '#000000',
      };
      studio.setAttribute('css-variables', JSON.stringify(theme));
    }

    themeBtn.addEventListener('click', () => {
      isDark = !isDark;
      updateTheme();
    });

    updateTheme();
  </script>
</body>
</html>
```

--------------------------------

### Drizzle Studio Component Integration

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/README.md

Integrate the Drizzle Studio component into your React application. This example shows how to create a ref, manage theme changes, and apply custom CSS variables for styling.

```typescript
import type { DrizzleStudioRef } from '@drizzle-team/your-company-studio';
import StudioScript from '@drizzle-team/your-company-studio?raw';


const lightCssVariables = {
  "--background": "#ffffff",
  ...
};
const darkCssVariables = { ... };


function App() {
  // create a ref to the drizzle-studio component
  const studioRef = useRef<DrizzleStudioRef>(null);
  const [theme, setTheme] = useState<'light' | 'dark'>('light');

  return (
    <div style={{
      height: '100%',
      width: '100%',
      display: 'flex',
      flexDirection: 'column',
    }}>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}> Change theme
      </ button>
      <drizzle-studio
        ref={studioRef}
        css-variables={JSON.stringify(theme === 'light' ? lightCssVariables : darkCssVariables)} // styling 
        title="Drizzle Studio"
        style={{
          flexGrow: 1,
          minHeight: 0,
        }}
      />
    </div>
  )
}

export default App
```

--------------------------------

### Angular Component Setup for Drizzle Studio

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/quick-start.md

Set up the Drizzle Studio component within your Angular application. This includes importing necessary modules and defining the component's template and styles.

```typescript
// studio.component.ts
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-studio',
  template: `
    <div class="container">
      <drizzle-studio
        #studio
        title="Database Browser"
        [attr.css-variables]="cssVariables"
      ></drizzle-studio>
    </div>
  `,
  styles: [
    `.container {
      width: 100%;
      height: 100vh;
    }
    drizzle-studio {
      display: block;
      width: 100%;
      height: 100%;
    }
  `]
})
export class StudioComponent implements AfterViewInit {
  @ViewChild('studio') studio!: ElementRef<any>;
  
  cssVariables = JSON.stringify({
    '--background': '#ffffff',
    '--text-color': '#000000',
  });

  ngAfterViewInit() {
    console.log('Studio loaded');
  }
}

```

--------------------------------

### Configure Multiple Drizzle Studio Instances

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/configuration.md

When embedding multiple Drizzle Studio instances, define unique configurations for each, including titles and custom CSS variables. This example demonstrates setting up two instances side-by-side using CSS grid.

```typescript
const studio1Config = {
  title: 'Users Database',
  cssVariables: JSON.stringify(brandTheme),
};

const studio2Config = {
  title: 'Analytics Database',
  cssVariables: JSON.stringify(analyticsTheme),
};

export function MultiStudio() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
      <drizzle-studio {...studio1Config} />
      <drizzle-studio {...studio2Config} />
    </div>
  );
}
```

--------------------------------

### Vue 3 Options API Integration

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/integration-guide.md

Integrate Drizzle Studio using Vue 3's Options API. This example demonstrates setting a static title and passing CSS variables for theming.

```vue
<template>
  <div class="studio-wrapper">
    <drizzle-studio
      :css-variables="cssVariablesJson"
      :title="studioTitle"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      studioTitle: 'Vue Studio',
      theme: 'light',
      themes: {
        light: { '--background': '#ffffff' },
        dark: { '--background': '#1a1a1a' },
      },
    };
  },
  computed: {
    cssVariablesJson() {
      return JSON.stringify(this.themes[this.theme]);
    },
  },
};
</script>

<style scoped>
.studio-wrapper {
  width: 100%;
  height: 100vh;
}

drizzle-studio {
  display: block;
  width: 100%;
  height: 100%;
}
</style>
```

--------------------------------

### Embed Drizzle Studio in Angular

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/integration-guide.md

Integrate Drizzle Studio into an Angular component. This example demonstrates binding to the component using a template reference and dynamically setting CSS variables via property binding.

```typescript
// studio.component.ts
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import type { DrizzleStudioRef } from '@drizzle-team/studio';

@Component({
  selector: 'app-studio',
  template: `
    <div class="studio-container">
      <button (click)="toggleTheme()">
        {{ isDark ? 'Light' : 'Dark' }} Mode
      </button>
      <drizzle-studio
        #studioElement
        [attr.css-variables]="cssVariablesJson"
        title="Angular Database"
      ></drizzle-studio>
    </div>
  `,
  styles: [`
    .studio-container {
      display: flex;
      flex-direction: column;
      height: 100vh;
      width: 100%;
    }

    drizzle-studio {
      flex: 1;
      min-height: 0;
    }
  `]
})
export class StudioComponent implements AfterViewInit {
  @ViewChild('studioElement') studioElement!: ElementRef<any>;

  isDark = false;

  themes = {
    light: { '--background': '#ffffff', '--text-color': '#000000' },
    dark: { '--background': '#1a1a1a', '--text-color': '#ffffff' },
  };

  get cssVariablesJson(): string {
    const theme = this.isDark ? 'dark' : 'light';
    return JSON.stringify(this.themes[theme]);
  }

  toggleTheme(): void {
    this.isDark = !this.isDark;
  }

  ngAfterViewInit(): void {
    // Component is ready
  }
}

```

--------------------------------

### Vue 3 Composition API Integration

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/integration-guide.md

Integrate Drizzle Studio using Vue 3's Composition API. This example shows how to dynamically toggle themes by passing CSS variables.

```vue
<template>
  <div class="studio-container">
    <div class="controls">
      <button @click="toggleTheme">
        {{ isDark ? 'Light' : 'Dark' }} Mode
      </button>
    </div>
    <drizzle-studio
      ref="studioComponent"
      :css-variables="cssVariablesJson"
      title="Vue Database"
    />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const isDark = ref(false);
const studioComponent = ref(null);

const themes = {
  light: {
    '--background': '#ffffff',
    '--text-color': '#000000',
  },
  dark: {
    '--background': '#1a1a1a',
    '--text-color': '#ffffff',
  },
};

const currentTheme = computed(() => 
  isDark.value ? themes.dark : themes.light
);

const cssVariablesJson = computed(() => 
  JSON.stringify(currentTheme.value)
);

const toggleTheme = () => {
  isDark.value = !isDark.value;
};
</script>

<style scoped>
.studio-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
}

.controls {
  padding: 1rem;
  border-bottom: 1px solid #e0e0e0;
}

drizzle-studio {
  flex: 1;
  min-height: 0;
}
</style>
```

--------------------------------

### Initialize and Configure Drizzle Studio

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/integration-guide.md

This snippet shows the basic steps to create, configure with attributes, and append the Drizzle Studio component to the DOM. It also includes basic body styling.

```javascript
// Initialize the component
const studio = document.createElement('drizzle-studio');

// Configure
studio.setAttribute('title', 'My Database');
studio.setAttribute('css-variables', JSON.stringify({
  '--background': '#ffffff',
  '--text-color': '#000000',
}));

// Add to DOM
document.body.appendChild(studio);

// Style the container
document.body.style.margin = '0';
document.body.style.padding = '0';
```

--------------------------------

### Set Drizzle Studio Component Size

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/quick-start.md

Ensure the Drizzle Studio component has explicit width and height styles to render correctly. The 'Good' example shows a correctly sized component, while the 'Bad' example illustrates a common mistake of omitting size specifications.

```typescript
// Good
<drizzle-studio style={{ width: '100%', height: '100vh' }} />

// Bad
<drizzle-studio /> {/* No size specified */}
```

--------------------------------

### Initialize Drizzle Studio Component

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/component-api.md

Demonstrates the lifecycle of initializing the Drizzle Studio component: parsing, setting attributes, appending to the DOM, and final initialization.

```javascript
// 1. Element is parsed/created
const studio = document.createElement('drizzle-studio');

// 2. Set attributes
studio.setAttribute('title', 'My Studio');
studio.setAttribute('css-variables', JSON.stringify(theme));

// 3. Append to DOM
document.body.appendChild(studio);

// 4. Component is now initialized and interactive
```

--------------------------------

### Import Raw Script for Custom Bundling

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/integration-guide.md

Import the Studio script as a raw string for custom bundling. Use either to inject into the document or parse and register as a custom element.

```typescript
import StudioScript from '@drizzle-team/studio?raw';

// Option 1: Inject into document
function setupStudio() {
  const script = document.createElement('script');
  script.textContent = StudioScript;
  document.head.appendChild(script);
}

// Option 2: Parse and register custom element
function registerStudio() {
  const scriptElement = document.createElement('script');
  scriptElement.type = 'module';
  scriptElement.textContent = StudioScript;
  document.body.appendChild(scriptElement);
}
```

--------------------------------

### Create Multiple Drizzle Studio Instances

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/component-api.md

Shows how to create and manage multiple independent instances of the Drizzle Studio component, each with its own state and attributes.

```javascript
// Create multiple instances
const studio1 = document.createElement('drizzle-studio');
const studio2 = document.createElement('drizzle-studio');

// Each maintains independent state
studio1.setAttribute('title', 'Database 1');
studio2.setAttribute('title', 'Database 2');

document.body.appendChild(studio1);
document.body.appendChild(studio2);
```

--------------------------------

### Check Drizzle Studio TypeScript Types

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/quick-start.md

Import the DrizzleStudioRef type to ensure your TypeScript setup correctly recognizes Drizzle Studio components and their properties.

```typescript
import type { DrizzleStudioRef } from '@drizzle-team/studio';
// Should compile without errors
```

--------------------------------

### React Integration with Drizzle Studio

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/package-information.md

Shows how to initialize a ref for Drizzle Studio in a React application. This is essential for accessing the component's methods and properties.

```typescript
import { useRef } from 'react';
import type { DrizzleStudioRef } from '@drizzle-team/studio';

const studio = useRef<DrizzleStudioRef>(null);
```

--------------------------------

### Import Drizzle Studio Web Component and Types

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/package-information.md

Demonstrates how to import the Drizzle Studio web component for automatic registration, its type definitions for TypeScript, and the raw script content for custom bundling.

```typescript
// Default import (automatically registers web component)
import '@drizzle-team/studio';

// Type import
import type { DrizzleStudioRef } from '@drizzle-team/studio';

// Raw script (for custom bundling)
import StudioScript from '@drizzle-team/studio?raw';
```

--------------------------------

### Configure Responsive Layout for Drizzle Studio

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/quick-start.md

Integrate Drizzle Studio into a responsive layout using flexbox. Ensure the studio component takes up available space while maintaining a header.

```jsx
<div style={{display: 'flex', flexDirection: 'column', height: '100vh'}}>
  <header>My App</header>
  <drizzle-studio style={{ flex: 1, minHeight: 0 }} />
</div>
```

--------------------------------

### Vanilla JavaScript Integration with Drizzle Studio

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/package-information.md

Illustrates how to select the Drizzle Studio component in plain JavaScript using querySelector. This is useful for integrating into projects without a specific framework.

```javascript
const studio = document.querySelector('drizzle-studio');
```

--------------------------------

### Configure Studio Settings Based on Environment

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/configuration.md

A function to retrieve development or production-specific configuration, including titles and CSS variables, based on the provided environment string. Assumes 'development' and 'production' keys exist in the baseConfig.

```typescript
export function getStudioConfig(environment: 'development' | 'production') {
  const baseConfig = {
    development: {
      title: 'Dev Database',
      cssVariables: {
        "--background": "#f8f8f8",
        "--border-color": "#ff0000",
      },
    },
    production: {
      title: 'Production Database',
      cssVariables: {
        "--background": "#ffffff",
        "--border-color": "#e0e0e0",
      },
    },
  };

  return baseConfig[environment];
}
```

--------------------------------

### Minimal Drizzle Studio Example in Vue 3

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/README.md

Embed Drizzle Studio within a Vue 3 application. The component is imported and can be referenced using a template ref.

```vue
<template>
  <drizzle-studio
    ref="studio"
    title="My Database"
    style="width: 100%; height: 100vh;"
  />
</template>

<script setup>
import '@drizzle-team/studio';

const studio = ref(null);
</script>
```

--------------------------------

### Fixed Size and Full Viewport Sizing

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/component-api.md

Illustrates two methods for sizing the Drizzle Studio component: using fixed pixel dimensions and making it occupy the full viewport.

```html
<!-- Fixed size -->
<drizzle-studio style="width: 800px; height: 600px;"></drizzle-studio>

<!-- Full viewport -->
<drizzle-studio style="width: 100%; height: 100%;"></drizzle-studio>
```

--------------------------------

### Angular Integration with Drizzle Studio

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/package-information.md

Shows how to get a reference to the Drizzle Studio component in Angular using ViewChild. This is the standard Angular approach for accessing child components.

```typescript
@ViewChild('studio') studio!: ElementRef<any>;
```

--------------------------------

### Angular Module Setup for Drizzle Studio

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/quick-start.md

Configure your Angular application's module to include Drizzle Studio. This involves importing BrowserModule, the Drizzle Studio custom element, and the StudioComponent.

```typescript
// app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import '@drizzle-team/studio';
import { StudioComponent } from './studio.component';

@NgModule({
  declarations: [StudioComponent],
  imports: [BrowserModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [StudioComponent],
})
export class AppModule {}

```

--------------------------------

### Querying Drizzle Studio Elements

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/component-api.md

Use standard DOM query methods to get references to Drizzle Studio elements. Supports querying by tag name, ID, and data attributes.

```javascript
// Get element reference
const studio = document.querySelector('drizzle-studio');
const studios = document.querySelectorAll('drizzle-studio');

// By ID
const studio = document.getElementById('my-studio');

// By data attribute
const studio = document.querySelector('[data-studio-id="primary"]');
```

--------------------------------

### Accessing Drizzle Studio Instance with Refs

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/component-api.md

Shows how to obtain a reference to the <drizzle-studio> component instance in different JavaScript frameworks (React, Vue, Svelte) and vanilla JS.

```typescript
// React
const ref = useRef<DrizzleStudioRef>(null);
<drizzle-studio ref={ref} />

// Vue
const studioRef = ref(null);
<drizzle-studio ref="studioRef" />

// Svelte
<drizzle-studio bind:this={element} />

// Vanilla JS
const element = document.querySelector('drizzle-studio');
```

--------------------------------

### Applying Inline Styles to Drizzle Studio

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/component-api.md

Shows how to use the `style` attribute to apply inline CSS to the <drizzle-studio> component container for layout and appearance.

```html
<!-- Flex layout -->
<drizzle-studio style="flex: 1; min-height: 0;"></drizzle-studio>

<!-- Fixed size -->
<drizzle-studio style="width: 800px; height: 600px;"></drizzle-studio>

<!-- Full viewport -->
<drizzle-studio style="width: 100vw; height: 100vh;"></drizzle-studio>

<!-- With border -->
<drizzle-studio style="border: 1px solid #ddd; border-radius: 8px;"></drizzle-studio>
```

--------------------------------

### Check NPM Package Distribution Info

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/package-information.md

Use this command to view the distribution details of the Drizzle Studio package on npm. This can help in understanding the package's size and available versions.

```bash
npm view @drizzle-team/studio dist
```

--------------------------------

### Recommended Sizing with Flexbox

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/component-api.md

Shows how to size the Drizzle Studio component within a flex container for optimal display. This method ensures the component takes up available space.

```html
<!-- Flex container (recommended) -->
<div style="display: flex; flex-direction: column; height: 100vh;">
  <header>Controls</header>
  <drizzle-studio style="flex: 1; min-height: 0;"></drizzle-studio>
</div>
```

--------------------------------

### Drizzle Studio in Various DOM Contexts

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/component-api.md

Illustrates the flexibility of placing the <drizzle-studio> component within different HTML structures, such as the document body, a container div, or a grid layout.

```html
<body>
  <drizzle-studio></drizzle-studio>
</body>

<!-- In container -->
<div id="app">
  <drizzle-studio></drizzle-studio>
</div>

<!-- In grid layout -->
<div style="display: grid; grid-template-columns: 1fr 1fr;">
  <drizzle-studio></drizzle-studio>
</div>
```

--------------------------------

### Drizzle Studio package.json Configuration

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/configuration.md

This JSON object shows the essential fields for the Drizzle Studio package in package.json.

```json
{
  "name": "@drizzle-team/studio",
  "version": "1.0.4",
  "type": "module"
}
```

--------------------------------

### Manage Drizzle Studio State with Attributes

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/component-api.md

Illustrates the correct method for updating the component's state by using `setAttribute`. Direct property assignment may not work as expected.

```javascript
// Correct: Use attributes
studio.setAttribute('title', 'New Title');

// Not standard: Direct property assignment
studio.title = 'New Title'; // May not work as expected
```

--------------------------------

### Check and Update Drizzle Studio Package

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/package-information.md

Use these npm commands to check the latest version, view all available versions, and update the Drizzle Studio package to the latest release.

```bash
# Check latest version
npm view @drizzle-team/studio version

# Check all versions
npm view @drizzle-team/studio versions

# Update to latest
npm update @drizzle-team/studio
```

--------------------------------

### Verify Drizzle Studio Component Load

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/quick-start.md

Use browser console commands to select the Drizzle Studio element and verify its attributes, such as the title.

```javascript
// In browser console
const studio = document.querySelector('drizzle-studio');
console.log(studio); // Should show the element
console.log(studio.getAttribute('title')); // Should show your title
```

--------------------------------

### Light Theme Configuration

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/types.md

Defines the CSS variables for the light theme. Use this to customize the appearance of Drizzle Studio in light mode.

```typescript
const lightTheme: CSSVariables = {
  "--background": "#ffffff",
  "--text-color": "#000000",
  "--border-color": "#e0e0e0",
  "--primary-color": "#3b82f6",
  "--secondary-color": "#8b5cf6",
  "--surface": "#f8fafc",
  "--text-primary": "#1e293b",
  "--text-secondary": "#64748b",
};
```

--------------------------------

### Simple SQL Select Query

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/features-overview.md

Execute a basic SELECT query to retrieve data from a table based on a condition. Ensure the table and column names are correct.

```sql
-- Simple select
SELECT * FROM users WHERE created_at > '2024-01-01';
```

--------------------------------

### TypeScript Type Definitions

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/package-information.md

Illustrates the available types for Drizzle Studio and how the component is typed for frameworks. Ensure you import the necessary types for proper integration.

```typescript
// Available types
type DrizzleStudioRef = {...}

// Component is properly typed for frameworks
<drizzle-studio ref={studioRef} />
```

--------------------------------

### Pin Drizzle Studio Package Version (Allow Patch Updates)

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/package-information.md

Use semantic versioning with a caret (^) in package.json to allow patch updates for the Drizzle Studio package, ensuring minor bug fixes are applied automatically.

```json
{
  "dependencies": {
    "@drizzle-team/studio": "^1.0.4"     // Allow patch updates
  }
}
```

--------------------------------

### Drizzle Studio Package Size

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/component-api.md

Provides an estimate of the Drizzle Studio package size and lists its main included features.

```typescript
// Package size
@drizzle-team/studio: ~2-3 MB (pre-bundled)

// Includes
- Web Component runtime
- Database browser UI
- SQL query runner (optional)
- Theme engine
```

--------------------------------

### Dynamic Theme Switching with ThemeManager

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/component-api.md

Provides a `ThemeManager` class to dynamically switch themes for a Drizzle Studio component by setting CSS variables. It includes registering themes and switching between them.

```javascript
class ThemeManager {
  constructor(elementSelector) {
    this.element = document.querySelector(elementSelector);
    this.themes = new Map();
  }

  registerTheme(name, variables) {
    this.themes.set(name, variables);
  }

  switchTheme(name) {
    const theme = this.themes.get(name);
    if (theme) {
      this.element.setAttribute('css-variables', JSON.stringify(theme));
    }
  }
}

const manager = new ThemeManager('drizzle-studio');
manager.registerTheme('light', { '--background': '#fff' });
manager.registerTheme('dark', { '--background': '#1a1a1a' });
manager.switchTheme('dark');
```

--------------------------------

### RxJS Observable Integration for Theme Switching

Source: https://github.com/drizzle-team/drizzle-studio-npm/blob/main/_autodocs/component-api.md

Demonstrates integrating Drizzle Studio with RxJS observables for dynamic theme switching. A `Subject` is used to emit theme changes, which are then applied to the component's CSS variables.

```typescript
import { Subject } from 'rxjs';

const themeSubject = new Subject<Record<string, string>>();

themeSubject.subscribe((theme) => {
  const studio = document.querySelector('drizzle-studio');
  studio?.setAttribute('css-variables', JSON.stringify(theme));
});

// Emit theme changes
themeSubject.next({ '--background': '#fff' });
themeSubject.next({ '--background': '#1a1a1a' });
```