Arrow icon
See all demos


The Database demo application serves as a valuable example of an advanced visual application created using JointJS+. It consists of fictional data divided into four categories: users, orders, products and countries, and uses some of the ready-made JointJS+ plugins such as Standard shapes, PaperScroller, or Dialog.
Demo instructions
Change the data in the diagram, the connections between them and the position of the elements.

Made with JointJS+

Only available with the JointJS+ commercial license in the apps/ directory of your package. Don't have a license yet? Start a trial and use the source code of all our demos for free, with no strings attached, for 30 days.

Made with JointJS

Available in the JointJS open-source library which helps developers create simple visual applications in less time.

The role of JointJS in building a Database application

JointJS, a powerful diagramming library, helps developers and companies of any size build advanced visual applications and No-Code/Low-Code tools. It provides a wealth of ready-made demos and a wide range of prebuilt features that make creating applications such as Database a breeze. 

We equip developers with all the plugins they need to save time and focus their energy elsewhere such as Standard shapes, PaperScroller, Inspector, and Dialog.

New to this topic? Learn more about Databases 👇

What is a Database?

When you say Database, you might think of an Excel spreadsheet. Although Excel or similar tools provide an easy way to store data, they are not what we refer to in this explanatory article. There are several key differences between a true Database (or Database Management System) and end-user software such as Microsoft Excel, including the amount of data you can store and manipulate, the way the data is manipulated, and the security of the database.

Database, as Oracle puts it, is “an organized collection of structured information, or data, typically stored electronically in a computer system”. 

In modern databases, the data is stored in rows and columns and is written or queried with SQL (structured query language), a language first used at IBM in the 1970s.

What types of databases are there?

Depending on how you or your company plans to use the data, you may choose between a plethora of database types:

  • Cloud database: a database built and accessed through a cloud platform,
  • Distributed database: such a database consists of two or more files located in different sites,
  • Graph database: this type of database stores data as entities and the relations between them,
  • NoSQL database: as the name suggests, NoSQL database does not use SQL for writing data and querying, their structure is different than SQL database (e.g. key-value database),
  • Object-oriented database: as in object-oriented programming, the information is stored as an object in this type of database,
  • Relational database: as AWS explains, a relational database ​​is a collection of data items with pre-defined relationships between them.

And much more. We recommend reading this useful Wikipedia article to learn more about different types of databases.

What is SQL (Structured Query Language)?

It's vital to take a moment to talk about SQL and how it fits into the database ecosystem. This programming language is used in almost all relational databases for data querying and manipulation. It was first used at IBM in the 1970s and has since found use in many other large and small organizations. If you want to learn more about SQL, we recommend checking this video tutorial.

Useful sources to learn more about Databases

We have only touched on a small part of it, which concerns databases, and we have left many topics untreated. If you want to learn more, check out some of these resources:

Ready to take the next step?

Modern development is not about building everything from scratch. The JointJS team equips you with plenty of ready-to-use demo apps that can serve as a boilerplate and radically reduce your development time. Start a free 30-day JointJS+ trial, get the source code of the Database application, and go from zero to a fully functional app in no time.

Speed up your development with a powerful library

Leverage a time-tested JavaScript diagramming library using the best of HTML5 and SVG to accelerate your development.