DB Visor

DB Visor Documentation

DB Visor is a Zod-first, React-based data inspector that works in-browser with Dexie (IndexedDB) and SQLite3 WASM. Built with type safety, LLM-friendly design, and developer experience in mind.

Getting Started

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

Adapters

Explore Dexie and SQLite WASM adapters, or learn to create custom ones.

API Reference

Complete API documentation for all DB Visor packages and components.

Type Safety

Understanding DB Visor's Zod-first approach to runtime type safety.

Key Features

  • Zod-First Type Safety: All adapter methods are runtime-validated with Zod schemas
  • Multiple Database Support: Built-in Dexie (IndexedDB) and SQLite WASM adapters
  • Performance Optimized: Virtual scrolling for 100k+ rows with MobX state management
  • LLM-Friendly: Auto-generated data model cards for AI agent integration
  • Developer Experience: Command palette (⌘K), SQL console, and keyboard-first workflow

Architecture Overview

DB Visor follows a modular architecture with clear separation of concerns:

  • @db-visor/core: Zod schemas and adapter contracts
  • @db-visor/react: UI components and MobX state models
  • @db-visor/dexie-adapter: IndexedDB integration via Dexie
  • @db-visor/sqlite-wasm-adapter: SQLite WASM integration

Quick Example

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

const db = new Dexie('MyDatabase');
db.version(1).stores({ 
  users: 'id, name, email',
  orders: 'id, userId, total'
});

const adapter = createDexieAdapter(db);

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

Next Steps