App Shell & Setup12 screenshots Bookshelf, project home, create-project flow, and the first-run setup wizard.
Project bookshelf — desktop, light
generated/bookshelf-desktop-light.png
Project bookshelf — desktop, dark
generated/bookshelf-desktop-dark.png
Project bookshelf — mobile, light
generated/bookshelf-mobile-light.png
Project bookshelf — mobile, dark
generated/bookshelf-mobile-dark.png
Project home tab — desktop, light
generated/project-home-desktop-light.png
Project home tab — desktop, dark
generated/project-home-desktop-dark.png
Create button in nav bar — light
generated/create-button-nav-light.png
Create button in nav bar — dark
generated/create-button-nav-dark.png
Create project — template picker, light
generated/create-project-templates-light.png
Create project — template picker, dark
generated/create-project-templates-dark.png
Create project — details form, light
generated/create-project-details-light.png
Create project — details form, dark
generated/create-project-details-dark.png
First-Run Setup Wizard10 screenshots The mode-selection and profile/server-configuration screens shown on first launch.
Setup — mode selection, light
generated/setup-mode-selection-light.png
Setup — mode selection, dark
generated/setup-mode-selection-dark.png
Setup — offline profile form, light
generated/setup-offline-light.png
Setup — offline profile form, dark
generated/setup-offline-dark.png
Setup — server connection, light
generated/setup-server-light.png
Setup — server connection, dark
generated/setup-server-dark.png
Setup — mode selection, mobile, light
generated/setup-mode-selection-mobile-light.png
Setup — mode selection, mobile, dark
generated/setup-mode-selection-mobile-dark.png
Setup — offline profile, mobile, light
generated/setup-offline-mobile-light.png
Setup — offline profile, mobile, dark
generated/setup-offline-mobile-dark.png
Editor4 screenshots The main prose editor on desktop and mobile, in both color schemes.
Editor — desktop, light
generated/editor-desktop-light.png
Editor — desktop, dark
generated/editor-desktop-dark.png
Editor — mobile, light
generated/editor-mobile-light.png
Editor — mobile, dark
generated/editor-mobile-dark.png
About Page6 screenshots The /about page with version info and library credits.
About page — desktop, light
generated/about-page-desktop-light.png
About page — desktop, dark
generated/about-page-desktop-dark.png
About — libraries card, light
generated/about-libraries-card-light.png
About — libraries card, dark
generated/about-libraries-card-dark.png
About page — mobile, light
generated/about-page-mobile-light.png
About page — mobile, dark
generated/about-page-mobile-dark.png
Writing Stats2 screenshots The user-profile writing-stats widget (online-only, mocked stats endpoints).
Writing-stats widget — light
generated/writing-stats-widget-light.png
Writing-stats widget — dark
generated/writing-stats-widget-dark.png
Element Type Chooser & Dialogs8 screenshots The create-element type chooser, the folder/tab context menus, and the new-document naming dialog.
Element type chooser dialog — light
generated/element-type-chooser-light.png
Element type chooser dialog — dark
generated/element-type-chooser-dark.png
Folder context menu — light
generated/folder-context-menu-light.png
Folder context menu — dark
generated/folder-context-menu-dark.png
Document tab context menu — light
generated/tab-context-menu-light.png
Document tab context menu — dark
generated/tab-context-menu-dark.png
New document naming dialog — light
generated/new-document-dialog-light.png
New document naming dialog — dark
generated/new-document-dialog-dark.png
Media Library15 screenshots The media tab with seeded images, search, filters, empty state, and mobile views.
Media tab — desktop, light
generated/media-tab-desktop-light.png
Media tab — desktop, dark
generated/media-tab-dark.png
Media tab — filtered by inline images
generated/media-tab-filtered-light.png
Media tab — empty state
generated/media-tab-empty-light.png
Media tab — mobile, light
generated/media-tab-mobile-light.png
Media tab overview — light
features/media-tab-light.png
Media tab overview — dark
features/media-tab-dark.png
Media gallery grid — light
features/media-gallery-light.png
Media gallery grid — dark
features/media-gallery-dark.png
Media search results — light
features/media-search-light.png
Media search results — dark
features/media-search-dark.png
Media filter panel — light
features/media-filter-panel-light.png
Media filter panel — dark
features/media-filter-panel-dark.png
Media empty state — light
features/media-empty-light.png
Media empty state — dark
features/media-empty-dark.png
Element References (@mentions)28 screenshots The @mention flow: popup, search, link, tooltip, context menu, edit mode, backlinks, and feature showcase.
@mention — popup open, light
features/element-ref-01-popup-light.png
@mention — popup open, dark
features/element-ref-01-popup-dark.png
@mention — search results, light
features/element-ref-02-search-light.png
@mention — search results, dark
features/element-ref-02-search-dark.png
@mention — inserted link, light
features/element-ref-03-link-light.png
@mention — inserted link, dark
features/element-ref-03-link-dark.png
@mention — hover tooltip, light
features/element-ref-04-tooltip-light.png
@mention — hover tooltip, dark
features/element-ref-04-tooltip-dark.png
@mention — character search, light
features/element-ref-character-search-light.png
@mention — character search, dark
features/element-ref-character-search-dark.png
@mention — character link in text, light
features/element-ref-character-link-light.png
@mention — character link in text, dark
features/element-ref-character-link-dark.png
@mention — character tooltip, light
features/element-ref-character-tooltip-light.png
@mention — character tooltip, dark
features/element-ref-character-tooltip-dark.png
Editor with element reference — light
features/element-ref-editor-light.png
Editor with element reference — dark
features/element-ref-editor-dark.png
Element reference tooltip (full page) — light
features/element-ref-tooltip-light.png
Element reference tooltip (full page) — dark
features/element-ref-tooltip-dark.png
Element reference context menu — light
features/element-ref-context-menu-light.png
Element reference context menu — dark
features/element-ref-context-menu-dark.png
Element reference edit mode — light
features/element-ref-edit-mode-light.png
@mention feature showcase
features/element-ref-feature.png
Backlinks — character view, light
features/element-ref-backlinks-character-light.png
Backlinks — character view, dark
features/element-ref-backlinks-character-dark.png
Backlinks — worldbuilding editor, light
features/element-ref-backlinks-worldbuilding-light.png
Backlinks — worldbuilding editor, dark
features/element-ref-backlinks-worldbuilding-dark.png
Backlinks — meta panel, light
features/element-ref-backlinks-panel-light.png
Backlinks — meta panel, dark
features/element-ref-backlinks-panel-dark.png
Worldbuilding Editor (Desktop)12 screenshots The worldbuilding editor sidenav layout: identity, schema fields, relationships, media, status bar.
Worldbuilding editor overview — light
features/worldbuilding-editor-overview-light.png
Worldbuilding editor overview — dark
features/worldbuilding-editor-overview-dark.png
Worldbuilding editor — schema fields, light
features/worldbuilding-editor-fields-light.png
Worldbuilding editor — schema fields, dark
features/worldbuilding-editor-fields-dark.png
Worldbuilding editor — relationships, light
features/worldbuilding-editor-relationships-light.png
Worldbuilding editor — relationships, dark
features/worldbuilding-editor-relationships-dark.png
Worldbuilding editor — media section, light
features/worldbuilding-editor-media-light.png
Worldbuilding editor — media section, dark
features/worldbuilding-editor-media-dark.png
Editor status bar — light
features/worldbuilding-editor-statusbar-light.png
Editor status bar — dark
features/worldbuilding-editor-statusbar-dark.png
Worldbuilding sidenav — light
features/worldbuilding-editor-sidenav-light.png
Worldbuilding sidenav — dark
features/worldbuilding-editor-sidenav-dark.png
Worldbuilding Editor (Mobile)10 screenshots The accordion layout used on phones and small tablets across several viewport sizes.
Mobile accordion — iPhone SE (375×667)
features/mobile/worldbuilding-accordion-iPhoneSE.png
Mobile tab fields — iPhone SE
features/mobile/worldbuilding-tab-fields-iPhoneSE.png
Mobile accordion — iPhone 14 Pro (393×852)
features/mobile/worldbuilding-accordion-iPhone14Pro.png
Mobile tab fields — iPhone 14 Pro
features/mobile/worldbuilding-tab-fields-iPhone14Pro.png
Mobile accordion — Galaxy S21 (360×800)
features/mobile/worldbuilding-accordion-galaxyS21.png
Mobile tab fields — Galaxy S21
features/mobile/worldbuilding-tab-fields-galaxyS21.png
Mobile accordion — small tablet (600×900)
features/mobile/worldbuilding-accordion-smallTablet.png
Mobile tab fields — small tablet
features/mobile/worldbuilding-tab-fields-smallTablet.png
Mobile accordion — dark mode
features/mobile/worldbuilding-accordion-dark.png
Mobile tab fields — dark mode
features/mobile/worldbuilding-tab-fields-dark.png
Relationships Tab & Chart37 screenshots Relationship-type management, per-character relationship panels, the relationship chart, and add/edit dialogs.
Relationships tab overview — light
features/relationships-tab-overview-light.png
Relationships tab overview — dark
features/relationships-tab-overview-dark.png
Relationship types grid — light
features/relationships-types-light.png
Relationship types grid — dark
features/relationships-types-dark.png
Relationship type card details — light
features/relationships-card-details-light.png
Relationship type card — dark
features/relationships-type-card-dark.png
Relationship type action menu — light
features/relationships-action-menu-light.png
Edit relationship type dialog — light
features/relationships-edit-dialog-light.png
Edit relationship type dialog — dark
features/relationships-edit-dialog-dark.png
Create relationship type dialog — light
features/relationships-create-dialog-light.png
New relationship type dialog — light
features/relationships-new-dialog-light.png
Relationships feature showcase
features/relationships-feature-showcase.png
Relationship types grid (showcase)
features/relationships-types-grid.png
Character relationships panel — light
features/character-relationships-panel-light.png
Character relationships panel — dark
features/character-relationships-panel-dark.png
Character relationships overview — light
features/character-relationships-overview-light.png
Character relationships overview — dark
features/character-relationships-overview-dark.png
Add relationship dialog — light
features/add-relationship-dialog-light.png
Add relationship dialog — dark
features/add-relationship-dialog-dark.png
Relationships empty state — light
features/relationships-empty-state-light.png
Parent relationship panel — light
features/character-parent-relationship-light.png
Parent relationship overview — light
features/character-parent-overview-light.png
Child relationship panel — light
features/character-child-relationship-light.png
Child relationship overview — light
features/character-child-overview-light.png
Parent relationship panel — dark
features/character-parent-relationship-dark.png
Parent relationship overview — dark
features/character-parent-overview-dark.png
Child relationship panel — dark
features/character-child-relationship-dark.png
Child relationship overview — dark
features/character-child-overview-dark.png
Multiple relationships on one character — light
features/character-multiple-relationships-light.png
Multiple relationships overview — light
features/character-multiple-relationships-overview-light.png
Multiple relationships on one character — dark
features/character-multiple-relationships-dark.png
Multiple relationships overview — dark
features/character-multiple-relationships-overview-dark.png
Debug — add-relationship dialog state
features/debug-dialog-state.png
Relationship chart overview — light
features/relationship-chart-overview-light.png
Relationship chart overview — dark
features/relationship-chart-overview-dark.png
Relationship chart sidebar — light
features/relationship-chart-sidebar-light.png
Relationship chart sidebar — dark
features/relationship-chart-sidebar-dark.png
Tags12 screenshots Tag management: empty state, create dialog, populated list, and edit dialog.
Tags empty state — light
features/tags-empty-light.png
Tags empty state — dark
features/tags-empty-dark.png
Create tag dialog — light
features/tags-create-dialog-light.png
Create tag dialog — dark
features/tags-create-dialog-dark.png
Tags list — light
features/tags-list-light.png
Tags list — dark
features/tags-list-dark.png
Edit tag dialog — light
features/tags-edit-dialog-light.png
Edit tag dialog — dark
features/tags-edit-dialog-dark.png
Tags tab — light
generated/tags-tab-light.png
Tags tab — dark
generated/tags-tab-dark.png
Tag edit dialog — light
generated/tag-edit-dialog-light.png
Tag edit dialog — dark
generated/tag-edit-dialog-dark.png
Templates10 screenshots The Element Templates tab: overview, list, controls, card menu, actions, and create dialog.
Templates overview — light
features/templates-overview-light.png
Templates overview — dark
features/templates-overview-dark.png
Templates list section — light
features/templates-grid-light.png
Templates header / create button — light
features/templates-create-button-light.png
Template card menu — light
features/templates-card-menu-light.png
Template card menu — dark
features/templates-card-menu-dark.png
Template row actions — light
features/templates-clone-menu-light.png
Template row actions — dark
features/templates-clone-menu-dark.png
Create template dialog — light
features/templates-create-dialog-light.png
Create template dialog — dark
features/templates-create-dialog-dark.png
Publish Style Editor12 screenshots The Style editor inside the publish-plan tab: preset picker, dropdown, body text, chapter, and worldbuilding sections.
Publish style overview — light
features/publish-style-overview-light.png
Publish style overview — dark
features/publish-style-overview-dark.png
Style preset picker — light
features/publish-style-preset-picker-light.png
Style preset picker — dark
features/publish-style-preset-picker-dark.png
Style preset dropdown — light
features/publish-style-preset-list-light.png
Style preset dropdown — dark
features/publish-style-preset-list-dark.png
Style — body text section — light
features/publish-style-body-text-light.png
Style — body text section — dark
features/publish-style-body-text-dark.png
Style — chapter title section — light
features/publish-style-chapter-light.png
Style — chapter title section — dark
features/publish-style-chapter-dark.png
Style — worldbuilding section — light
features/publish-style-worldbuilding-light.png
Style — worldbuilding section — dark
features/publish-style-worldbuilding-dark.png
Project Rename & Danger Zone9 screenshots The project rename card, expanded form, danger zone, and delete card.
Rename card (collapsed) — light
features/project-rename-card-light.png
Rename card (collapsed) — dark
features/project-rename-card-dark.png
Rename form expanded — light
features/project-rename-form-light.png
Rename form expanded — dark
features/project-rename-form-dark.png
Rename form filled — light
features/project-rename-filled-light.png
Danger zone overview — light
features/danger-zone-overview-light.png
Danger zone overview — dark
features/danger-zone-overview-dark.png
Delete project card — light
features/project-delete-card-light.png
Delete project card — dark
features/project-delete-card-dark.png
Quick Open4 screenshots The Quick Open dialog (Ctrl+P) showing recent files and filtered search.
Quick Open dialog — light
features/quick-open-dialog-light.png
Quick Open dialog — dark
features/quick-open-dialog-dark.png
Quick Open search — light
features/quick-open-search-light.png
Quick Open search — dark
features/quick-open-search-dark.png
Canvas Tab6 screenshots The Canvas element type: overview, sidebar (layers), and toolbar with drawn shapes.
Canvas overview — light
features/canvas-tab-overview-light.png
Canvas overview — dark
features/canvas-tab-overview-dark.png
Canvas sidebar (layers) — light
features/canvas-tab-sidebar-light.png
Canvas sidebar (layers) — dark
features/canvas-tab-sidebar-dark.png
Canvas toolbar — light
features/canvas-tab-toolbar-light.png
Canvas toolbar — dark
features/canvas-tab-toolbar-dark.png
Timeline Tab4 screenshots The Timeline element type with tracks, events, and an era, plus the toolbar.
Timeline canvas overview — light
features/timeline-tab-overview-light.png
Timeline canvas overview — dark
features/timeline-tab-overview-dark.png
Timeline toolbar — light
features/timeline-tab-toolbar-light.png
Timeline toolbar — dark
features/timeline-tab-toolbar-dark.png
Admin — AI Settings & Image Generation12 screenshots Admin AI settings page, provider cards, model configs, image model profiles, and the image generation dialog.
Admin AI settings — light
features/admin-ai-settings-light.png
Admin AI settings — dark
features/admin-ai-settings-dark.png
AI provider cards (all)
features/admin-ai-all-providers.png
OpenAI provider card
features/admin-ai-openai-card.png
OpenAI model config
features/admin-ai-openai-model-config.png
OpenRouter model config
features/admin-ai-openrouter-model-config.png
Image model profiles grid — light
features/admin-ai-image-profiles-light.png
Image model profiles grid — dark
features/admin-ai-image-profiles-dark.png
Image profile creation dialog — light
features/admin-ai-image-profile-dialog-light.png
Image profile creation dialog — dark
features/admin-ai-image-profile-dialog-dark.png
Image generation dialog — light
features/image-generation-dialog-light.png
Image generation dialog — dark
features/image-generation-dialog-dark.png
Admin — Kill Switch4 screenshots The AI kill-switch settings page and the focused kill-switch card.
Kill switch settings page — light
features/admin-kill-switch-settings-light.png
Kill switch settings page — dark
features/admin-kill-switch-settings-dark.png
Kill switch card — light
features/admin-kill-switch-card-light.png
Kill switch card — dark
features/admin-kill-switch-card-dark.png