@webberproject/schema-viewer

Interactive database schema viewer and editor. Renders ER diagrams from JSON schema definitions with zoom, pan, relationship routing, and inline editing.

Derived from DrawDB (AGPL-3.0).

Features

• Pure SVG rendering — no Canvas, no WebGL, no heavy graphics libraries
• Zoom & pan — mouse wheel zoom, click-drag pan
• Editor mode — drag tables (grid-snap), double-click to edit fields/relationships
• Relationship routing — Bezier paths with rounded corners, cardinality labels, arrow markers
• Edge styling — solid/dashed/dotted lines, color swatches, bold/italic labels
• Subject areas — colored grouping boxes that auto-size and move with their tables
• SQL import — paste CREATE TABLE DDL (PostgreSQL, MySQL, SQLite, MariaDB, MSSQL)
• Export — PNG (retina), PDF (auto-sized), JSON
• Embed — iframe with URL params + postMessage API
• Auto-layout — grid and hierarchical algorithms with intra-group force relaxation
• Dark & light themes

Quick Start

npm install
npm run dev

Usage

import { SchemaViewer, importSQL } from '@webberteam/schema-viewer/src';

// Read-only viewer
<SchemaViewer schema={mySchema} theme="dark" width="100%" height="600px" />

// Editable (drag tables, double-click to edit)
<SchemaViewer schema={mySchema} editable={true} onChange={setSchema} />

// Import from SQL
const schema = importSQL(`
  CREATE TABLE users (id SERIAL PRIMARY KEY, email TEXT NOT NULL UNIQUE);
  CREATE TABLE posts (id SERIAL PRIMARY KEY, author_id INTEGER REFERENCES users(id));
`, 'postgres');

CDN — Standalone Script (recommended)

Drop a single <script> tag into any HTML page. No framework, no iframe, no build step. Works offline from file://.

https://webberteam.github.io/schema-viewer/schema-viewer.slim.js   (237KB / 74KB gz — viewer + editor)
https://webberteam.github.io/schema-viewer/schema-viewer.js        (3.7MB — full: + SQL import + PDF/PNG export)

<script src="https://webberteam.github.io/schema-viewer/schema-viewer.slim.js"></script>
<div id="my-schema" style="height:500px"></div>
<script>
  SchemaViewer.render('#my-schema', {
    schema: mySchemaData,
    theme: 'dark',
    editable: true,
    onChange: (updated) => console.log('Schema changed:', updated),
  });
</script>

API: SchemaViewer.render(selector|element, options) → { unmount(), update(newOptions) }

Every push to master auto-deploys via GitHub Actions.

Self-hosted

Download the slim bundle and serve it locally:

curl -O https://webberteam.github.io/schema-viewer/schema-viewer.slim.js

Schema Format

Compatible with DrawDB JSON export.

{
  "tables": [
    {
      "id": "t1", "name": "users", "x": 100, "y": 100, "color": "#175e7a",
      "fields": [
        { "id": "f1", "name": "id", "type": "SERIAL", "primary": true },
        { "id": "f2", "name": "email", "type": "TEXT", "notNull": true, "unique": true }
      ]
    }
  ],
  "relationships": [
    {
      "id": "r1", "name": "post_author",
      "startTableId": "t2", "startFieldId": "f3",
      "endTableId": "t1", "endFieldId": "f1",
      "cardinality": "many_to_one"
    }
  ],
  "subjectAreas": [
    { "id": 1, "name": "AUTH", "color": "#7c3aed", "tableIds": ["t1"] }
  ]
}

Export

import { exportPNG, exportPDF, exportJSON } from '@webberteam/schema-viewer/src';

exportPNG(containerElement);  // Downloads schema.png (2x retina)
exportPDF(containerElement);  // Downloads schema.pdf
exportJSON(schemaObject);     // Downloads schema.json

License

AGPL-3.0-or-later — inherited from DrawDB.

See LICENSE for details.