Here is a loop you have run a hundred times without noticing it.
You are looking at a filtered list of notes — everything tagged research, sorted by last edited. You click the third one. It is not the one you wanted. You press back. The list reloads at the top, and your scroll position, which was four screens down, is gone. You find your place again. You click the fourth one.
Twenty notes reviewed is forty navigations and nineteen re-orientations. The cost is not the page load. It is that the list is the thing you were actually working with, and every note you open destroys it.
Notes now open in a side panel over the list instead.
What changed
Click a note in the grid, the table, or the board, and it opens in a panel on the right. The list stays exactly where it was — same scroll position, same filters, same board columns, same multi-select. J and K step to the next and previous note in whatever order you are currently looking at. Esc closes.
The panel is not a preview. It is the same editor, with the same autosave, the same tags and properties, the same child notes, linked notes, and Similar Notes. Anything you can do to a note on its own page, you can do there.
The full page has not gone anywhere: Open full page in the panel's toolbar, or a middle-click on the card.
Three decisions that made it work
The panel is not a modal
The obvious implementation is a dialog: overlay, focus trap, scroll lock. We deliberately did none of that.
An overlay would defeat the entire point. The reason to keep the list on screen is so you can use it — scroll it, drag a card to another column, marquee-select a batch while a note is open. A dim layer that swallows clicks gives you a picture of your list rather than your list.
So the panel renders non-modal: no overlay, no focus trap, no scroll lock, and clicking outside it does not close it. Closing is always something you choose — the ✕, Esc, browser back, or a click on the seam at the panel's left edge.
That last one is worth calling out. The seam is already there for dragging the panel wider. A mousedown on it that never moves was previously a no-op, so a click on it now collapses the panel. The same gesture works on the sidebar and the AI chat panel, and the sidebar picked up a ⌘\ toggle while we were there.
The open note lives in the URL
The panel is driven by a search parameter — /notes?peek=<id> — not by component state.
This is the sort of decision that looks like extra work and immediately pays for itself. Browser back closes the panel, because closing it is a navigation. Reloading the page restores it. The link can be shared or bookmarked. Sorting, filtering, or typing in search while a note is open keeps it open, because those are all just other parameters on the same URL.
Cards are still links
Every note card and table row remains a real <a href="/notes/...">. Only a plain left click is intercepted.
That single decision is why middle-click, right-click → open in new tab, and "copy link address" all still work without a line of code. A <div> with an onClick would have quietly broken every one of them, and nobody would have filed a bug — they would just have stopped trying.
Two bugs worth telling you about
The save guard that fired on every keystroke
Notes autosave, and there is a guard that intercepts navigation while a save is pending, so you cannot leave a note mid-write.
With the panel, that guard suddenly had a much larger blast radius. The header search navigates on every keystroke — each character is a new URL. So typing into search with an unsaved note open in the panel meant the guard firing per character, flashing a modal "Saving note…" dialog over the list and forcing a save on every letter.
The fix is that the guard now only blocks navigations that stop showing this note — closing it, swapping to another, leaving the route. Re-sorting the list underneath is not leaving the note, so nothing fires.
A tooltip arrow ate the drag handle
The panel's resize seam is four pixels wide. Hover it and a tooltip appears explaining that you can drag to resize or click to close.
Except the tooltip renders an arrow — a small rotated SVG — and our tooltips sit flush against their trigger by default. So the arrow landed exactly on top of the four-pixel seam. Hover the seam, then press: your mousedown hit the arrow, not the handle. The panel neither resized nor closed.
What makes this one instructive is how we found it. It was caught by an end-to-end test, and the test only caught it because it drives a real mouse. Our earlier manual check had dispatched synthetic events straight at the element, which bypasses hit-testing entirely and cheerfully reports that everything works. The element under the cursor is a question only a real pointer asks.
document.elementFromPoint() on the seam returned an <svg>, and that was the whole story.
Where it does not apply
On phones, a note still opens as a full page. A full-screen drawer is just a page with a worse back button.
On the board, next and previous stay inside one column. A board has no single order across columns, so
JandKstep through the column of the card you opened.Links inside a note — the
[[chips, the connection graph, relation properties — still open the full page. Following a link is a move to somewhere else, not the next item in a list. The panel is for going through a list, not for wandering off it.
That last distinction is the rule the whole feature rests on: note cards and table rows open in the panel; every other route to a note opens the page. One sentence, and you can predict what any click will do.
Full details in Organizing notes and the keyboard shortcuts.
Continue reading
Add a screenshot to an existing note without opening it — a file pasted while you rename a note in the list goes to the end of that note.
Every property, one click away — a select, member, relation or board property as a one-click filter in the sidebar.
Beyond folders: how Notez organizes notes — why Notez has no folders, and what tags, sub-notes, boards and custom properties do instead.