sqlite-erd

library1.1.0jsnpmunverified

A React component library for generating Entity Relationship Diagrams (ERD) from SQLite schemas or database files. Current stable version is 1.1.0, with a focus on client-side, privacy-preserving diagram generation. It supports both SQL CREATE TABLE statements and raw SQLite files. Key differentiators include full client-side processing (no server upload), interactive canvas via React Flow, table data browsing, SQLite internals explorer, and theming. The library has peer dependencies on React 19+ and ships TypeScript types. It is suitable for developers needing to visualize SQLite schemas in React applications, with a relatively new release cadence.

database

npm install sqlite-erd

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · SQLITE-ERD

sqlite-erd

databasejavascriptv1.1.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

SQLiteERD

✓ import { SQLiteERD } from 'sqlite-erd';

✗ import SQLiteERD from 'sqlite-erd';

The library exports a named component, not a default export. Common mistake is default import.

CSS

✓ import 'sqlite-erd/sqlite-erd.css';

CSS must be imported separately. Missing CSS import leads to unstyled component.

TypeScript types

✓ import type { SQLiteERDProps } from 'sqlite-erd';

TypeScript types are exported for props and can be imported via the same package path.

Renders a basic ERD from an SQL schema string using the SQLiteERD component.

import { SQLiteERD } from 'sqlite-erd'; import 'sqlite-erd/sqlite-erd.css'; function App() { const sql = ` CREATE TABLE projects ( id INTEGER PRIMARY KEY, name TEXT NOT NULL, description TEXT ); CREATE TABLE tasks ( id INTEGER PRIMARY KEY, project_id INTEGER, title TEXT NOT NULL, FOREIGN KEY(project_id) REFERENCES projects(id) ); `; return ( <div style={{ height: '500px' }}> <SQLiteERD sqlSchema={sql} showSidebar={true} /> </div> ); } export default App;

Debug

Known issues

breakingReact 19 or later is required.

fix

Upgrade to React 19+ for compatibility with this library.

affects: <1.0

gotchaCSS import is mandatory; omitting it results in unstyled component.

fix

Add 'import "sqlite-erd/sqlite-erd.css";' to your entry file.

affects: >=1.0

gotchaNamed import only; default import will not work.

fix

Use '{ SQLiteERD }' in import statement.

affects: >=1.0

deprecatedNo deprecated features reported as of version 1.1.0.

affects: >=1.1.0

Errors

Common errors & fixes

Module not found: Can't resolve 'sqlite-erd/sqlite-erd.css'

CSS file not imported or incorrectly resolved.

fix

Ensure you have run 'npm install sqlite-erd' and include the CSS import line.

'SQLiteERD' is not exported from 'sqlite-erd' (or default import used)

Using default import instead of named import.

fix

Change import to 'import { SQLiteERD } from 'sqlite-erd';'

Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321

Multiple versions of React installed, often due to monorepo setup.

fix

Configure resolve.alias in Vite or webpack to deduplicate React.

Upgrade

Version history

1.1.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency; required to render the component.

react-domrequiredPeer dependency; required for DOM rendering.

Agent activity

10 hits · last 30 days

node