Writing & Editing

Skribex provides a rich TipTap editor with @-mentions, footnotes, inline notes, highlights, smart links, context menus, a floating formatting toolbar, autosave, and distraction-free mode.

What it does

When you navigate to an element, Skribex fetches it and all its children in a single request and mounts each as an independent editor instance in a scrollable view. The editor includes custom TipTap extensions that integrate with the Skribex backend for entity management, content search, and autosave.

How to use it

Open an element for editing — click any element in the structure sidebar. The editor loads it and all its children in one scrollable view. Each element has its own editor instance with independent undo/redo history.

Autosave — edits are saved automatically. After a brief pause in typing, a save is triggered which writes the file, updates word count, refreshes mention/link/note indices, and schedules a debounced git commit. There is no manual save button. If a git remote is configured, pushes are scheduled automatically.

Word count — displayed per element and as a total. The count covers prose text: text nodes and @-mention labels (e.g. "Jane" counts as one word). Footnote and inline note content is counted. Temporal markers are excluded.

@-mentions — type @ followed by a name to trigger the autocomplete dropdown. Selecting a match inserts a colored mention chip linked to that entity. If the name is new, a stub entity is created on resolve. Entity Assist modes can auto-link entity names without typing @. See @-Mentions & Entity Linking for full details on autocomplete, aliases, Entity Assist, and the sidebar panel.

Footnotes — insert a footnote (Cmd+Shift+F) to open a popover with a nested editor. The footnote content is stored inline in the TipTap document and rendered as a superscript marker. Click the marker to re-open the popover for editing.

Inline notes — insert a note (Cmd+Shift+M), similar to footnotes but designed for editorial annotations. Notes support tag parsing (e.g. #revision, #research) and reuse the same popover component. Tags are indexed on save for dashboard aggregation.

Highlight — select text and toggle highlight (Cmd+Shift+H). The highlight color is configurable.

Smart links (Cmd+K) — press Cmd+K to open the omnibar, which searches entities and notes. Select a result to insert a link to that element or entity.

~-mentions (temporal references) — type ~ to open a hint menu for inline time annotations. Supports absolute times (~[1942] ), named markers (~[June 1942](the_wedding)), relative references (~before:(the_trial)), flashbacks, ranges, fantasy calendars, and relationship lifecycle markers (~begins:/~ends:). See Temporal Markers for the full syntax reference and usage guide.

Chapter time — click the hourglass icon in the toolbar to set a time for the focused element. This time appears in the Timeline rolodex in the right sidebar.

Right sidebar panels — the editor's right sidebar is divided into four collapsible sections, each with a header you can click to expand or collapse. Your collapse state is saved per book and restored on reload.

• Timeline — a rolodex-style display of the previous, current, and next element with their times. Updates automatically as you scroll.
• Markers — inline temporal markers (~-mentions) in the currently visible element, shown as color-coded dots (blue for absolute/named, green for begins, red for ends, etc.).
• Entities — entity cards for every @-mention visible in the viewport. Click a card to expand and see aliases, backlinks, co-occurring entities, and a link to the entity page. Shows a count badge in the header.
• Links — smart links visible in the viewport, grouped by target type. Click to expand and navigate.

You can drag sections by their header to reorder them. The order is saved per book. Clicking an @-mention in the editor auto-opens the Entities section if it was collapsed; similarly for links.

Context menu — right-click in the editor to see context-aware menu options. The menu adapts to the current selection and cursor position, showing relevant actions (4+ variants depending on context).

Formatting toolbar — click the Aa button in the editor column or press Cmd+. to show or hide the toolbar. The toolbar adapts to context:

• Cursor in text, no selection — block controls appear: a heading picker (H1-H6 or paragraph) and text alignment (left, center, right, justify).
• Text selected — inline controls appear: bold, italic, underline, highlight, a font family picker (9 curated Bunny Fonts), and a font size picker (7 sizes).

Commands are applied to the focused editor instance. Toolbar visibility is persisted to the session and restored on reload.

Zen mode — press Cmd+\ or click the "zen" button in the status bar to enter a distraction-free writing mode. Zen mode hides the toolbar and optionally closes sidebars, hides the footnote/status bar, and dims or hides inline marks. Configure zen settings via the gear icon in the status bar or from the dashboard. While in zen mode, you can still manually toggle the toolbar (Cmd+.) and sidebars (Cmd+[ / Cmd+]).

Milestones — press Cmd+S to create a named milestone (a bookmarked point in version history). Milestones appear in the history view and let you jump back to significant moments.

Insert an image:

1. Use the image toolbar button or drag a file into the editor.
2. The image is uploaded to the book's assets/ folder and referenced by filename.
3. Accepted formats: PNG, JPEG, GIF, WebP, SVG. Maximum size: 10 MB.

Notes

• If an element has never been written, its document is empty but it still appears in the editor view so you can begin writing.
• Autosave writes the file immediately but git commits are debounced. Entity, relationship, and structure changes commit immediately.
• The cursor tracker dispatches events as you navigate, keeping the right sidebar context panel in sync with your position.
• UI state (zen mode, sidebar visibility, dark mode) is persisted to the session API and restored on reload.