DB Visor

Zod-first Data Inspector

A 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.

Try EditorRead Docs

Key Features

Zod-First Type Safety

All adapter methods are runtime-validated with Zod. No TypeScript interfaces - types are inferred from schemas for maximum safety.

Multiple Adapters

Built-in support for Dexie (IndexedDB) and SQLite3 WASM. Extensible adapter system for adding new data sources.

Performance Optimized

Virtual scrolling for 100k+ rows, streamed result handling, and optimized MobX state management for smooth interactions.

SQL Console

Full SQL editor with syntax highlighting, formatting, query history, and result visualization for SQLite databases.

LLM-Friendly

Auto-generated data model cards with examples make it easy for LLM agents to understand and query your data structures.

Command Palette

Powerful ⌘K command palette for quick navigation, data operations, and SQL snippets. Keyboard-first workflow.

Quick Start

1. Install packages

npm install @db-visor/core @db-visor/react @db-visor/dexie-adapter

2. Create an adapter

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

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

const adapter = createDexieAdapter(db);

3. Add DB Visor to your app

import { DbVisor } from '@db-visor/react';

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