A working data modeling UI
 you can fork on day one

Kickstart your development with a ready-to-use template.

BOiLERPLATE

DATA MODELING UI

A production-grade data modeling canvas with field-level ports, customizable entity templates, and ERD notation. Take the source, adapt it to your schema model, and skip months of foundational work.

Get started on your framework

more demos

All templates for your data modeling UIs

Production-ready examples you can clone and adapt to your stack.

explore demos

Use cases

Who builds data modeling UIs with JointJS

Oracle uses it for database schema design. GoodData uses it for semantic layer editors inside their BI platforms. The use cases are different — the library is the same.

Semantic layer editors

JointJS gives data engineers the canvas to map raw tables to business entities (metrics, dimensions, virtual views) embedded directly in BI, analytics, and headless data platforms.

ERD and schema editors

Generic diagramming libraries connect nodes. JointJS connects fields. Ports let edges attach to specific columns inside a table, not to the entity as a whole, which is what makes accurate foreign key representation, crow's foot notation, and cardinality labeling possible.

Data lineage visualization

JointJS powers lineage graphs where nodes represent data assets (tables, jobs, dbt models, dashboards) and edges show the flow between them, giving engineers a navigable picture of their entire pipeline.

Data mapping and transformation editors

Field-to-field mapping UIs for ETL, ELT, and integration platforms. Source schemas on the left, target schemas on the right, transformations in between — all driven by the same field-level connection model that powers ERD editors.

Features

What JointJS+ gives you out of the box

Port-based connections

Connect edges to specific fields inside a node. Essential for column-level mapping, FK notation, and field-to-field transformation.

Rich node content

Render field lists, data types, primary key indicators, and constraint badges inside each entity using JointJS's SVG composition model.

Collapse and expand

Let users hide entity details to reduce visual noise on schemas with hundreds of tables.

Edge aggregation

When sources, transformations, or targets are collapsed, the underlying table- and column-level flows are rolled up into aggregated edges, keeping lineage diagrams readable at any scale.

Automatic layout

Dagre is built in for directed graph layouts. ELK integration is straightforward via elkjs for more complex algorithms.

Zoom, pan, and minimap navigation

With viewport-aware rendering, schemas with hundreds of tables stay responsive.

Selection and traversal

JointJS provides selection and graph traversal APIs to build focus modes, connected-only filters, and impact analysis views.

Data binding

Sync the canvas with a live source (schema registry, catalog backend, dbt manifest) through JointJS's graph model and event API.

ROI analysis: See how much JointJS+ saves you

What will your savings be in 3 years? We compared two scenarios, building a custom canvas from scratch vs. shipping on JointJS+, to find out.

Get the roi calculation

Introducing JointJS MCP Server: Better code from your AI agent

The diagramming library for building data modeling UIs