V Studio

A beautiful React component library for browsing and managing Dexie.js IndexedDB databases.

Installation

npm install v-studio

Peer Dependencies

Make sure you have React installed:

npm install react react-dom

Usage

Basic Setup

import { DatabaseBrowser } from 'v-studio';
import Dexie from 'dexie';

// Create your Dexie database
const db = new Dexie('MyDatabase');

db.version(1).stores({
  users: '++id, name, email',
  posts: '++id, title, content, userId',
});

function App() {
  return (
    <div className="App">
      <DatabaseBrowser db={db} />
    </div>
  );
}

export default App;

Individual Components

You can also use individual components:

import { RecordViewer, RecordTable, CollectionSidebar } from 'v-studio';

// RecordViewer
<RecordViewer
  record={{ id: 1, name: 'John', email: '[email protected]' }}
  onClose={() => console.log('Closed')}
  onDelete={() => console.log('Deleted')}
/>

// RecordTable
<RecordTable
  records={[
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' }
  ]}
  onSelectRecord={(record) => console.log(record)}
  selectedRecord={null}
  viewMode="table"
  loading={false}
/>

API

DatabaseBrowser

Main component for browsing your Dexie database.

Props:

• db (required): Your Dexie database instance

RecordViewer

Display and edit a single record.

Props:

• record: The record object to display
• onClose: Callback when viewer is closed
• onDelete: Callback when record is deleted

RecordTable

Display records in table or JSON format.

Props:

• records: Array of records to display
• onSelectRecord: Callback when a record is selected
• selectedRecord: Currently selected record
• viewMode: 'table' or 'json'
• loading: Loading state

CollectionSidebar

Sidebar for navigating database collections.

Props:

• collections: Array of collection objects
• selectedCollection: Currently selected collection name
• onSelectCollection: Callback when collection is selected
• onRefresh: Callback to refresh collections

TypeScript

Full TypeScript support with type definitions included.