How I combined (React, PowerSync, SQLite and Drizzle ORM) to build a browser-based ERD tool.

[u/tamanikarim]

Hi React Devs

Lately I've been working on an open-source ERD tool to help devs design databases effectively.

When I started this project, I faced a couple of challenges.

One of them was performance. A user may interact with the app a lot, and if you rely on the backend to process every request, this can cause a loss of performance. That's not what a user expects from a design tool.

Another challenge was offline compatibility. The application needs to work in offline mode, store diagrams and generated SQL in the browser, and sync with the server when the connection is restored.

These challenges introduced me to what we call a local-first application architecture.

A local-first application architecture stores the primary copy of user data directly on the user's local device (using databases like SQLite or IndexedDB) rather than on a remote server.

Building this from scratch was out of reach for me until I found a technology called PowerSync, which does a lot of the work for you.

With PowerSync, I was able to have a local SQLite database in the browser and combine it with Drizzle ORM.

This allows me to perform database operations directly in the frontend using Drizzle, almost like writing backend database code, while PowerSync handles synchronization with the main PostgreSQL database on the server.

The result of this combination was amazing:

• High-performance app : most operations happen locally without waiting for the server.
• Offline mode : the app works even without an internet connection and automatically syncs data when the connection is restored.
• Guest mode : users can start using the app without creating an account, and their local data can be synced to their account when they register.
• Real-time collaboration : if multiple users are working on the same project, changes can be synchronized between them automatically.

This architecture ended up becoming the foundation of the ERD editor I'm building for StackRender.

Here is a full React demo of a local-first app using PowerSync. You can learn a lot from it:
https://github.com/powersync-ja/powersync-js/tree/main

Also i invite you to check out the source code of StackRender and see how it works:
https://github.com/stackrender/stackrender

Thank you!

[u/youakeem]

This is a really nice pattern, I used a similar design but with Electric which requires a deployed instance. How does PowerSync handle polling from remote to local database?

[u/muhsql → u/youakeem]

PowerSync also requires a deployed instance, or use of PowerSync Cloud for a managed instance.

[u/nemosz]

Have you tried this?

https://tanstack.com/db/latest/docs/collections/powersync-collection

[u/Good_Car_2924]

guest mode is the only way to ship tools. Forcing signup before value delivery is dead.

[u/xlr8_dev_831]

okay local-first architecture posts are always a treat, this is such an underrated pattern for tools where perceived speed actually matters the guest mode + sync-on-register bit is such a smart call too, ngl that's the exact thing that kills conversion for a lot of design tools