A few years ago I created a similar layout engine, it was extremely janky when I abandoned it because I first wanted to solve order/placing of the tiles but was unable to figure out a good algorithm for it
Eg your example diagram has an optimal order in which there are no overlapping lines... But it's surprisingly hard to figure that out without doing n^m calculations... And I wanted to use it in a game, so a shitton of tiles.
Dunno where I was going with this, just got reminded of that project after looking at this great implementation.
Not sure what you're seeing, but I see quite a few overlapping lines. One of them easily solvable if you move `addresses` down. It starts with the `orders->users` overlapping `orders->addresses`.
Also, the `reviews` table overlaps the line from `order_items` to `products` and moving `order_items` down for example gets rid of that problem.
Not saying the project isn't cool, but this layout isn't optimal as per your constraints.
Ah, I was imprecise in my comment. I didn't mean that this implementation was doing the optimal ordering - I was just reminiscing about a similar project I worked on an why I abandoned it (I was unable to get the ordering done while keeping performance good enough with thousands of tiles
It's a small too nothing great I just figured others might find it useful too. I kept finding myself needing to visualize database schemas, but most tools had the same problems: paywalls, mandatory signups, or sending your SQL to someone else's server.
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
Probably not that important in practice. Firefox allows 2^20 - 4 and Chrome allows 2100000 characters. Also, 8000 characters already allows for an unreasonable amount of SQL and could be extended even further with compression. And if that should not be enough, the website already supports JSON exports. All in all, this seems like a worthwhile tradeoff for not having to store anything.
I kept finding myself needing to visualize database schemas, but most tools had the same problems: paywalls, mandatory signups, or sending your SQL to someone else's server.
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.
(Only minor tweak one could suggest would be multiple table selection for dragging... but to quote Frasier: "Think about it, Niles. What's the one thing better than an exquisite meal? An exquisite meal, with one tiny flaw we can pick at all night." Niles, raising a glass: "Ah, of course, to impossible standards.")
not fully yet but what you can do today is create separate profiles for each Space (ide+browser on one, Fork+server on another,music on a third) and they auto switch as you swipe between desktops. So the per Space part works but what's missing is the "group" bit there's no way to say "these 3 profiles are all part of my Coding workspace, activate them all at once." That's exactly where I want to take this though. The building blocks are mostly there, just need that workspace layer on top. The display switching thing with snapshotting per display config so laptop only vs docked setups just work is a bit PITA to build but I am working on it
I've been building HopTab as a free alternative to the combination of Cmd+Tab replacers and window managers. It started as a simpleapp switcher — pin your apps, Option+Tab through them. But the latest release adds a lot.
*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.
This looks very cool. Does the window picker for multi-window apps work with the pinning? So if I have a safari windows I want to have associated with a profile, and the option-tab will ignore all the other windows?
It is a constant pain when I cmd-tab in a space with safari, and it throws me out of the space to another one because the window that gets focus isn’t the “closest” one on the current space.
right now it shows all safari windows not just the ones on your current space, so the "wrong space" problem could still happen.
I'll look into Space aware window filtering.
reply