192 karma · joined July 16, 2023
No backend, no accounts, no data leaving your machine.
A few implementation details that were fun:
* Built on <canvas> instead of DOM/SVG. Tables are rasterized into cached bitmaps with viewport culling, which keeps things smooth even with hundreds of tables on screen.
* The SQL parser tracks source spans for every token. That lets edits stay surgical so a rename a table and only the relevant identifier (and its references) change while comments and formatting remain untouched.
* The URL contains the entire schema. Sharing simply serializes the schema into the URL itself, so there's no backend, no stored state, and no account required.
* I also experimented with a Rust/WASM version because why not? but the parser was ~37% slower because the JS↔WASM boundary cost outweighed the compute savings but The O(n^2) overlap-resolution pass was about 2.2x faster though * In the end I stuck with plain JavaScript. No framework ~32KB gzipped
So I ended up building my own.
You paste in your CREATE TABLE statements and it generates an interactive ER diagram right in the browser. You can drag tables around, auto arrange the layout, edit table/column names directly on the canvas (it rewrites the SQL for you), add notes and group boxes, and export as PNG or SVG.
No backend, no accounts, no data leaving your machine.
A few implementation details that were fun:
* Built on <canvas> instead of DOM/SVG. Tables are rasterized into cached bitmaps with viewport culling, which keeps things smooth even with hundreds of tables on screen.
* The SQL parser tracks source spans for every token. That lets edits stay surgical so a rename a table and only the relevant identifier (and its references) change while comments and formatting remain untouched.
* The URL contains the entire schema. Sharing simply serializes the schema into the URL itself, so there's no backend, no stored state, and no account required.
* I also experimented with a Rust/WASM version because why not? but the parser was ~37% slower because the JS↔WASM boundary cost outweighed the compute savings but The O(n^2) overlap-resolution pass was about 2.2x faster though * In the end I stuck with plain JavaScript. No framework ~32KB gzipped
It's a small too nothing great I just figured others might find it useful too.
*What's new*
Global window tiling shortcuts — Ctrl+Opt+Arrow for halves, Ctrl+Opt+UIJK for quarters, Ctrl+Opt+DFG for thirds. Works anytime, no switcher needed. All 17 directions are configurable.
Cycle through sizes — press Ctrl+Opt+Left twice and the window goes from 1/2 to 1/3, press again for 2/3. Same for right. This is the Rectangle feature I missed most.
Undo snap — Ctrl+Opt+Z restores the previous window position. Every snap saves the old frame automatically.
Move between monitors — Ctrl+Opt+Cmd+Arrow throws the window to the next display with proportional placement.
Configurable gaps — 0–20pt gaps between snapped windows. Settings slider with live preview.
Profile switcher shows app icons — instead of generic person avatars, the Option+` overlay shows a grid of each profile's actual pinned app icons.
*What was already there*
Pin apps, Option+Tab to cycle through only those Profiles per workflow (Coding, Design, etc.) with per-profile hotkeys Layout templates (50/50, IDE 60/40, three columns, 2×2 grid) Session save/restore — saves every window's position, size, z-order per profile Assign profiles to macOS Spaces — auto-switches when you swipe desktops Window picker for multi-window apps Cmd+Q/H/M while switcher is open Sticky notes per profile What it replaces
I was using Rectangle + AltTab + some manual window dragging. HopTab combines the app switching, window tiling, and workspace management into one app. The main difference from AltTab is that you pin specific apps instead of seeing everything. The main difference from Rectangle is that tiling is integrated with profiles and layouts — snap your windows, save the session, restore it tomorrow.
Free, open source, no telemetry. ~3MB binary.
Website: https://www.royalbhati.com/hoptab