DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Jan Prochazka
Jan Prochazka

Posted on

Database GUIs in JavaScript

If you want to access your database, eg. during the development process, you have many options, which tool to choose. Traditional tools are often written in Java, C++ or even Delphi and they use good old JDBC, ODBC or ADO.NET drivers for accessing database.

If you are JavaScript, especially NodeJS developer, maybe better option for you could be some of new tools written in JavaScript, because:

  • These tools use the same drivers as you in your application, so if you have any problem with DB in your app, you could test it in GUI and obtain similar results
  • Mostly they have similar visual style as VS Code (IDE, which is used by many JS developers)
  • Some of them could export JS scripts with export and import jobs
  • Almost all tools are open-source. You could check source code and get inspiration, how to solve eg. connection related problems

This list contains 5 database clients, all written in JavaScript.

Name GitHub Technology License
Azure Data Studio GitHub VS Code Microsoft
DbGate GitHub Svelte MIT
Beekeeper Studio GitHub Vue Commercial/GPL
Antares SQL GitHub Vue MIT
Sqlectron GitHub React MIT

There are some characteristics common to all tools:

  • use JavaScript, TypeScript and NodeJS
  • use ElectronJS as application builder
  • avalaible for Windows, Linux and Mac (but only some of them supports Apple M1 processor)

Azure Data Studio

Azure Data Studio is build directly on VS Code technology, so the imitation of VS Code look & feel is the best of all tools. It is primarily designed for Microsoft SQL Server, but you could install extensions for limited number of other databases (but MySQL is not supported). If you were satisfied with Microsoft Management Studio and you search something more modern or something running under Linux and Mac, you will probably satisfied with ADS. But if you want to quick search and understand your data (eg. use filters and ordering without manual SQL coding), try other tool. Is also supports features like explain SQL (but it seems a bit worse than in SQL Management Studio) or Jupyter notebooks. ADS is maintained by Microsoft and is free and open-source.

Supported databases:

  • Microsoft SQL Server
  • Postgre SQL (via extension)
  • Oracle (via extension)
  • CosmoDB (via extension)
  • MongoDB (via extension)

ADS screenshot

DbGate

DbGate is the most feature rich client from this list. It uses multi-connection and multi-database in one window paradigm, with tabs labeled with asociated database. It has interesting data-navigating features, like master/detail and form views, and excel-like data editing. Also you could use features which you may know from classical clients, like query designer or ER diagram viwer. It is the only client from this list, which offers also web version (you could play with it in demo app). But if you need only to write simple SQL query into one database, you could use simpler solutions. Otherwise, when you don't like to write repeating simple queries, this tool is right choice for you. DbGate is developed by Jan Prochazka (author of this article).

Supported databases:

  • MySQL+MariDB
  • PostgreSQL+CockroachDB+Amazon Redshift
  • Microsoft SQL Server
  • SQLite
  • MongoDB
  • Redis

DbGate screenshot

Beekeeper Studio

Beekeeper Studio studio is popular and modern GUI client. It offers only basic functionality (focused on writing SQL queries), but looks very nice and has very good basic workflow. The key design concept is that one opened window contains only tables and queries from one database. If you need to work with more databases simultaneously, you need to open more app windows. If has two editions - community and commercial. Community is free and open-source, paid commercial license offers a few additional features (eg. support for Oracle database). Beekeeper Studio is developed and maintained by Matthew Rathbone. But has also quite active contributor community on GitHub.

Supported databases:

  • MySQL+MariDB
  • PostgreSQL+CockroachDB+Amazon Redshift
  • Microsoft SQL Server
  • SQLite
  • Oracle (only commercial edition)

Beekeeper Studio screenshot

Antares SQL

Antares is probably the youngest client from this list. It has distinctive visual style. It uses multiple databases, but one connection per window paradigm. You could switch between connections using left panel, which is in other tools (including VS Code) used for widget switching. It has quite good SQL dumping abilities for PostgreSQL and MySQL (ability to make SQL backup of database/selected tables), which is a bit problem for other tools. Also it utilizes (in)famous library faker.js, you could insert new rows with testing data. Antares is developed by Fabio Di Stasio.

Supported databases:

  • MySQL+MariDB
  • PostgreSQL
  • SQLite

Antares SQL screenshot

Sqlectron

Sqlectron is on the other hand the oldest and also the simplest tool from this list. Source codes from Sqlectron was a base for Beekeeper Studio. As a speciality, it offers console version, which is quite unique feature. Sqlectron was developed by more contributors, but it seems not actively developed.

Supported databases:

  • MySQL+MariDB
  • PostgreSQL+Amazon Redshift
  • Microsoft SQL Server
  • SQLite
  • Cassandra

Sqlectron screenshot

Feature comparison

This table contains only common features (implemented by at least 2 tools). Features specific for one tool were mentioned above.

Feature Azure Data Studio DbGate Beekeeper Studio Antares SQL Sqlectron
Code completion yes yes yes yes no
Query formatter yes yes yes yes no
Query history no yes yes no no
Light and dark mode yes yes yes yes no
Runs on Mac M1 no yes yes no no
Table filtering and sorting no yes yes yes no
Foreign key navigation no yes yes no no
Table structure editor no yes only new table yes no
Export SQL dump no MySQL no MySQL, PostgreSQL no
Plugins yes yes no no no
Import no CSV, NDJSON, Excel, XML no no no
Export CSV, Excel, JSON, XML JSON, NDJSON, SQL, CSV, Excel, XML JSV, JSON, NDJSON, SQL JSON, CSV, SQL CSV, JSON

If you know about other tool not listed in this article, you could write about it in comments below.

Top comments (12)

Collapse
 
nicolasdanelon profile image
Nicolas Danelon

nice article

Collapse
 
abrahamn profile image
Abraham

Wow. Just wow.

Very comprehensive.

For SQLlite I actually use Firefox. It's nice to be able to not need another tool that achieves the same thing

Collapse
 
msamgan profile image
Mohammed Samgan Khan

really great peace of information.

Collapse
 
aleksczajka profile image
Aleksandra Maria Czajka

Have you taken a look at getgrackle.com? It's a web-based database GUI and we're building more. Welcome your thoughts.

Collapse
 
santhoshsubbiah profile image
Santhosh Subbiah

How to drop database in DbGate?

Image description

Collapse
 
janproch profile image
Jan Prochazka Author

This feature is obviously missing in DbGate, if you don't want to manually write SQL query. Better to use issue tracker for submiting issues, I am sure that author will implement this with great priority :-)

Collapse
 
santhoshsubbiah profile image
Santhosh Subbiah

Thanks for your reply :)

Collapse
 
sardiusjay profile image
SardiusJay

Nice article

Collapse
 
chideraike profile image
Chidera

Nice article. Have you tried TablePlus?

Collapse
 
janproch profile image
Jan Prochazka Author

I believe I have tried almost everything in past.... TablePlus uses different technologies (Swift, C#...), so that's why it was not mentioned here. Also it doesn't have nice characters of JavaScript GUIs - free, opensource, cross platform

Collapse
 
lexiebkm profile image
Alexander B.K.

Thank you for this.
Ah, MySQL is not supported in Azure Data Studio, despite having familiar look and feel.
Export SQL dump can be necessary, so I will probably try DbGate.

Collapse
 
fruntend profile image
fruntend

Π‘ongratulations πŸ₯³! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 🫰

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post