SQLite Viewer
Learning React and finding a use for a weird library.
I love finding a weird library. Sometimes while browsing Reddit, Twitter, or anywhere else online, I鈥檒l come across something strange and wonderful (often written in JavaScript) that just makes me want to find some use for it.
The latest version of this happened a month or so ago when I stumbled on SQL.js. That library is two things: the SQLite binary in WebAssembly (compiled using Emscripten) and a JavaScript wrapper for interacting with it. Basically it鈥檚 SQLite in the browser.
Why? Why do that?
If you want to use SQLite with Node, there鈥檚 already a better way. But this works in the browser and that鈥檚 nuts. I love it. It鈥檚 not something I would ever use for anything remotely serious, but it鈥檚 the perfect kind of silly for a side project.
As noted before, I鈥檓 diving into React at work. Part of learning something new is, of course, making things with it, and I鈥檝e been trying to come up with some side projects that I can build in React. I don鈥檛 want to rebuild LexiTiles for the fourth (!) time so I wanted to come up with something different.
Then I found SQL.js. And built SQLite Viewer. You can try it out here.
The app is really simple. You will need a SQLite database to use, though you can start with a blank one. Once you have a database, the tables are listed on the left and on the right you find a query/command editor with the results show below that. Everything runs in the browser. It鈥檚 all static files hosted on Netlify.
And because this is the full SQLite engine, you can do more than just query. Inserts and updates work just fine. Create tables if you want. You can even export the database with all your changes preserved! It鈥檚 using a WebWorker to interact with the database so it鈥檚 really snappy. The editor is Monaco, the editor that VS Code uses which provides a good editing experience and great syntax highlighting. It was surprisingly easy to integrate with React and is a million times better than a standard <textarea>.
This turned out to be a really fun side project. I learned a ton about React and custom hooks. I even made the code public if you want to see how it鈥檚 done. I鈥檓 sure I鈥檒l keep refactoring it over time as I learn more about React, but it鈥檚 in a great place right now and is actually kind of useful.