Hosted onxlavapies.comvia theHypermedia Protocol

Document cover
Drag Document Tabs to Open in PanelPower feature I wanted to test how it would look and feel. so I decided to prototype it!

What's New

You can now drag any document tab (Content, People, Comments) and drop it into either the main view or the side panel. This gives you a fast, visual way to arrange your workspace — similar to how you split editors in VS Code.

How It Works

  1. Grab a tab — click and hold any of the document tool tabs (Content, People, or Comments)

  2. Drag it — two drop zones appear after a moment:

    • Left zone — opens the tab as the main view (same as clicking)

    • Right zone — opens the tab content in the side panel

  3. Drop it — release over the zone you want

That's it. The tab opens exactly where you dropped it.

Why This Matters

Side-by-side workflows

Reading a document while reviewing comments? Drag "Comments" to the right panel and keep the content on the left. Need to check collaborators while editing? Drag "People" to the panel without leaving your draft.

Less context switching

Before, opening something in the panel required navigating away from your current view and clicking "Open in Panel." Now it's a single drag gesture — your eyes stay on the content, and your workspace rearranges around you.

Content preview in the panel

This update also introduces the ability to view document content in the side panel. When editing a draft, drag the "Content" tab to the right panel to see the published version side-by-side with your edits.

Works everywhere

The drag interaction works on both the desktop app and the web app, and on both published documents and drafts.

Under the Hood

The feature uses the browser's native HTML5 drag-and-drop API — no extra libraries needed. A lightweight React context connects the tabs (drag sources) to the drop zones (targets), and a short delay before showing the overlay prevents the browser from cancelling the drag mid-flight.

We also added a new "content" panel type to the routing system, which enables showing read-only document content in the side panel for the first time. The panel URL state (?panel=content) round-trips correctly, so bookmarking or sharing a URL preserves your layout.

Photo by Logan Voss on Unsplash

Do you like what you are reading? Subscribe to receive updates.

Unsubscribe anytime

Discussions