DB Visor

Getting Started

Learn how to install and set up DB Visor in your React application.

Installation

Install the core packages you need for your project:

# For Dexie (IndexedDB) support
npm install @db-visor/core @db-visor/react @db-visor/dexie-adapter dexie

# For SQLite WASM support  
npm install @db-visor/core @db-visor/react @db-visor/sqlite-wasm-adapter

Basic Setup with Dexie

Here's a minimal example using Dexie for IndexedDB:

Try Interactive Dexie Demo →
import { DbVisor } from '@db-visor/react';
import { createDexieAdapter } from '@db-visor/dexie-adapter';
import Dexie from 'dexie';

// Define your database schema
const db = new Dexie('MyAppDatabase');
db.version(1).stores({
  users: '++id, name, email, createdAt',
  orders: '++id, userId, total, status, createdAt'
});

// Create the adapter
const adapter = createDexieAdapter(db);

function App() {
  return (
    <div className="h-screen">
      <DbVisor adapter={adapter} />
    </div>
  );
}

export default App;

Basic Setup with SQLite WASM

For SQLite WASM, you need to initialize the WASM module:

Try Interactive SQLite Demo →
import { DbVisor } from '@db-visor/react';
import { createSqliteAdapter, initSqliteWasm } from '@db-visor/sqlite-wasm-adapter';
import { useState, useEffect } from 'react';

function App() {
  const [adapter, setAdapter] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function initSqlite() {
      try {
        // Initialize WASM (provide your own sqlite3.wasm file)
        await initSqliteWasm({
          wasmUrl: '/sqlite3.wasm'
        });

        // Create adapter with sample data
        const sqliteAdapter = await createSqliteAdapter();
        
        // Create sample tables
        await sqliteAdapter.exec(`
          CREATE TABLE users (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            name TEXT NOT NULL,
            email TEXT UNIQUE NOT NULL,
            created_at DATETIME DEFAULT CURRENT_TIMESTAMP
          );
          
          INSERT INTO users (name, email) VALUES 
            ('John Doe', 'john@example.com'),
            ('Jane Smith', 'jane@example.com');
        `);

        setAdapter(sqliteAdapter);
      } catch (error) {
        console.error('Failed to initialize SQLite:', error);
      } finally {
        setLoading(false);
      }
    }

    initSqlite();
  }, []);

  if (loading) {
    return <div>Loading SQLite...</div>;
  }

  if (!adapter) {
    return <div>Failed to load SQLite adapter</div>;
  }

  return (
    <div className="h-screen">
      <DbVisor adapter={adapter} />
    </div>
  );
}

export default App;

Essential Styling

DB Visor requires full height to work properly. Make sure your container has a defined height:

/* Global styles */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* App container */
.app {
  height: 100vh;
}

/* Or use Tailwind classes */
.app {
  @apply h-screen;
}

Configuration Options

You can customize DB Visor behavior through props:

<DbVisor 
  adapter={adapter}
  theme="light" // or "dark" 
  defaultPageSize={100}
  enableCommandPalette={true}
  showSqlConsole={true} // SQLite adapters only
  onError={(error) => console.error('DB Visor error:', error)}
/>

Next Steps