This really would've come in handy when I was debugging my own SQLite parser a couple weeks ago.

One thing that initially confused me was how exactly the pages worked w.r.t. the first page on disk... I misunderstood the SQLite documentation in different ways, but it's really rather simple: the very first page is just treated as containing the file header in it, and it pushes down the rest of the data, making the page shorter than the other pages. You can see that illustrated clearly if you click into the first page of a database using this tool: the database header comes first, then the page header.

This tool will undoubtedly come in handy for anyone who has a reason to be dealing with SQLite data structures directly for whatever reason, especially since the SQLite documentation is a bit terse at times.

I especially like that it provides a sample database. Would be nice it were downloadable as a file, so we could explore it with our own tools as well and get a better feeling for how the tool works.

I tried with a simple database, and it just shows me a blank screen. The console in developer tools shows an exception (both in Firefox and Chromium):

    index-CGfYebmt.js:85 Uncaught RangeError: Offset is outside the bounds of the DataView
        at DataView.prototype.getUint32 (<anonymous>)
        at R0 (index-CGfYebmt.js:85:4683)
        at X0 (index-CGfYebmt.js:85:7966)
        at index-CGfYebmt.js:85:8157
        at Array.map (<anonymous>)
        at Q0 (index-CGfYebmt.js:85:8150)
        at index-CGfYebmt.js:85:8240
        at Object.useMemo (index-CGfYebmt.js:48:46087)
        at My.$.useMemo (index-CGfYebmt.js:17:7276)
        at V0 (index-CGfYebmt.js:85:8228)
    R0 @ index-CGfYebmt.js:85
    X0 @ index-CGfYebmt.js:85
    (anonymous) @ index-CGfYebmt.js:85
    Q0 @ index-CGfYebmt.js:85
    (anonymous) @ index-CGfYebmt.js:85
    useMemo @ index-CGfYebmt.js:48
    My.$.useMemo @ index-CGfYebmt.js:17
    V0 @ index-CGfYebmt.js:85
    tc @ index-CGfYebmt.js:48
    bc @ index-CGfYebmt.js:48
    lo @ index-CGfYebmt.js:48
    No @ index-CGfYebmt.js:48
    wm @ index-CGfYebmt.js:48
    Xc @ index-CGfYebmt.js:48
    Ao @ index-CGfYebmt.js:48
    Qo @ index-CGfYebmt.js:48
    me @ index-CGfYebmt.js:25

Really nice, looks great!

However, I am not a fan of uploading databases to "strange" sites on the internet, so I will probably never use this.

This is super cool and will really help anyone studying how to build their own storage engines.

A note: the table that describes the data structures (Field # | Description | Value) should also list the data type (uint8 uint16 int32 text etc.). If it's an enum ("Table Leaf"), reference other possible enum values. If its length depends on another field, reference that field No.