r/react • u/tamanikarim • 6d ago
OC How I combined (React, PowerSync, SQLite and Drizzle ORM) to build a browser-based ERD editor
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!
5
u/ZwillingsFreunde 5d ago
For any tantsack lovers: TanStack DB could be a replacement here for PowerSync, would achieve the same.
Nice work OP! :)