database-atlas

Importable React database schema explorer with a split diagram and selected-table preview.

Install

pnpm add database-atlas

The package requires React 19 as a peer dependency.

React usage

import { DatabaseAtlas, createHttpDataSource } from 'database-atlas'
import 'database-atlas/style.css'

const atlasDataSource = createHttpDataSource({
  basePath: '/api/database-atlas',
})

export function SchemaExplorer() {
  return (
    <div style={{ width: '100%' }}>
      <DatabaseAtlas
        dataSource={atlasDataSource}
        version={{
          version: '1.0.0',
          gitHash: 'host-build',
          envName: 'production',
          date: '2026-08-25',
          displayedOn: 'web',
        }}
      />
    </div>
  )
}

DatabaseAtlas accepts a custom DatabaseAtlasDataSource or the same-origin Fetch adapter returned by createHttpDataSource. Optional props control the initial table, color mode, diagram show mode, diff display, toolbar actions, selection callback, class name, and root style.

The exported validators schemaProviderSchema and tablePreviewSchema define custom data-source responses. SchemaProviderValue, TablePreview, SchemaLoadRequest, and TablePreviewRequest are exported for TypeScript hosts.

FastAPI hosting

Mount these JSON routes on the FastAPI application that already owns authentication and database access:

• GET /api/database-atlas/schema
• GET /api/database-atlas/table/{name}?limit=50&offset=0&filters=...

Serve the host frontend from that same application and keep basePath set to /api/database-atlas. The npm package contains no HTTP listener and opens no port. Host CSS variables inherited by the component can customize its theme.