Application Interface

Skribex runs as a web application with a three-column layout, HTMX-powered navigation, and global nav pills.

What it does

The interface provides a consistent writing environment: a left sidebar for structure navigation, a central editor area for prose and content pages, and a right sidebar for contextual information like entity details. Navigation happens without full page reloads — clicking links updates only the relevant panel. Every page also works as a direct URL you can bookmark or refresh.

Layout

The screen is divided into:

• Header — breadcrumb trail showing your current location, plus navigation pills (Home, Editor, Dashboard, Mindmap, Docs)
• Left sidebar — structure tree with expand/collapse, book switcher in the context menu at the bottom left
• Editor area — central content: prose editor, entity pages, dashboard, or history
• Right sidebar — contextual panel with four collapsible, draggable sections: Timeline, Markers, Entities, and Links. Each section can be collapsed independently; the order and collapse state are saved per book
• Status bar — bottom bar with zen mode toggle, entity assist mode, and settings
• Toast area — transient notifications for save confirmations, warnings, and errors

Session persistence

All interface state is saved automatically and restored when you reload or return to Skribex. This includes: which book is active, which element is open, your cursor position, scroll offset, sidebar visibility, sidebar section collapse/order, and dark mode preference. The state is injected into the page as JSON on load, so the editor picks up exactly where you left off.

Navigation

Clicking a structure element in the sidebar loads its content in the editor. The breadcrumb updates to reflect where you are. Clicking an @-mention badge navigates to that entity's full page at /books/{slug}/entities/{id}/page.

When the cursor is on an @-mention in the editor, the right sidebar shows a compact entity panel with the entity's name, type, mention count, aliases, and a "view page" link.

Switching books is done from the home page or from the context menu at the bottom left of the left sidebar.

Entity pages show the entity's name, type, mention count, aliases, relationships (as clickable links to related entity pages), backlinks listing every manuscript element that references the entity, notes, and rendered markdown body. A link back to the editor appears at the top of the page.

Zen mode

Toggle zen mode with Cmd+\ or click the "zen" button in the status bar. Zen mode hides the toolbar, and optionally closes sidebars, hides the footnote bar and status bar, and dims or hides inline marks (mentions, links, notes). Configure what zen mode does via the gear icon next to the zen button in the status bar, or from the dashboard settings page.

Zen mode settings (global, apply to all books):

• Close left/right sidebar on enter
• Hide footnote bar and/or status bar
• Marks treatment: normal (no change), dim (25% opacity, hover to restore), or hide (marks look like plain text; footnote markers stay dimmed for safety)

While in zen mode, you can still manually toggle sidebars (Cmd+[ / Cmd+]) and the toolbar (Cmd+.). Re-entering zen resets to your configured preferences.

Keyboard shortcuts

Global shortcuts:

• Cmd+[ — Toggle left sidebar
• Cmd+] — Toggle right sidebar
• Cmd+. — Toggle formatting toolbar
• Cmd+\ — Toggle zen mode
• Cmd+/ — Show keyboard shortcuts
• Cmd+S — Create milestone (named version bookmark)
• Cmd+Shift+, — Open dashboard
• Cmd+Shift+E — Open editor
• Cmd+Shift+X — Open mind map
• ? — Show help overlay

Editor shortcuts (when cursor is in the editor):

• Cmd+K — Omnibar (insert link)
• Cmd+Shift+F — Insert footnote
• Cmd+Shift+M — Insert note
• Cmd+Shift+H — Toggle highlight

Sidebar and toolbar state is saved to your session after each toggle.

Dark mode

Dark mode is fully supported with a complete dark palette across all panels and components. The preference is persisted to your session.

Note: A UI toggle for dark mode is planned but not yet exposed in the interface.

Notifications

Toast messages appear centered at the bottom of the screen. There are three levels: success (green), warning (gold), and error (red). Toasts auto-dismiss after five seconds. Click any toast to dismiss it immediately.