UI Overview

Below is an annotated screenshot of the full Noteism editor window. Each numbered callout maps to a section on this page describing exactly what that panel does, how to interact with it, and what options control its behavior.

---

① Editor Area

The editor area is the central, largest region of the window — it is where you write. This is the core of Noteism's hybrid editing model: you type raw Markdown directly into rendered content.

How the hybrid editor works

Noteism uses a block-based architecture where every Markdown element (heading, paragraph, code block, list, table, etc.) is an independent block. Each block has two states:

• Click any rendered block → it opens into a text editor showing raw Markdown.
• Click away or press Esc → the block re-renders as styled output.
• Ctrl+Enter creates a new block below the current one.
• Enter adds a newline within the current block.

Content width and scrolling

The editor area is a scrollable viewport. Content is horizontally constrained to a maximum width of 900 px for comfortable reading, with generous padding on all sides (34 px top/bottom/right when line numbers are off, left padding adjusts based on gutter visibility).

Viewport culling (performance)

For long documents with heavy content (Mermaid diagrams, syntax-highlighted code blocks, large tables), Noteism employs viewport culling: only blocks within the visible scroll region (plus a 300 px buffer above and below) are fully rendered. Off-screen blocks are replaced with lightweight fixed-height spacers. This dramatically reduces the work per frame and keeps the editor responsive even in multi-hundred-block documents.

Supported block types

The following Markdown block types are detected and rendered:

Inline formatting

Within any block, inline formatting is rendered in-place:

• Bold (**text** or __text__)
• Italic (*text* or _text_)
• Bold + Italic (***text***)
• Strikethrough (~~text~~)
• inline code (backticks)
• ==Highlighted text== (==text==)
• Underline, superscript, subscript
• Inline math ($...$)
• Links ([label](url)) — clickable in render mode

---

② File Manager Panel

The left sidebar is the File Manager — a workspace-aware file browser.

Opening a workspace

There are several ways to open a workspace:

• File → Open Workspace... from the menu bar
• The ⌗ (Open Workspace) button in the sidebar toolbar
• Setting a default workspace in Preferences → General → Files
• Typing or pasting a path directly into the navigation bar at the top of the sidebar

Navigation bar

At the top of the File Manager panel there is a path navigation bar with two modes:

Three icon buttons sit to the right of the path bar:

The file tree

Files and folders are displayed in a scrollable tree list:

• Folders show expandable triangle arrows (▸ collapsed / ▾ expanded). Click the arrow or the folder name to expand or collapse.
• Files display with system file icons; supported Markdown files (.md, .markdown, .mdown, .mkd, .mkdn, .mdwn, .mdtxt, .txt) use the custom Noteism document icon.
• Indentation increases by 10 px per nesting depth for visual hierarchy.
• Selection highlighting uses the theme accent color — clicking a file opens it in a new tab (or switches to its existing tab).

Hidden files

By default hidden files and folders are shown. Hidden entries are defined as:

• Files or directories whose name starts with a . (dot-prefix, Unix convention)
• On Windows: files with the FILE_ATTRIBUTE_HIDDEN flag

You can toggle hidden file visibility in Preferences → General → Files → Show hidden files.

Right-click context menu

Right-clicking any file or folder entry opens a context menu:

Action toolbar

A compact icon toolbar sits at the bottom of the File Manager panel:

Left group (always active):

• ⊕ New File
• ⊞ New Folder
• ⌗ Open Workspace
• ⊟ Collapse All

Right group (context-aware, dimmed when nothing is selected):

• ↺ Rename
• ↗ Reveal in File Manager
• ⓘ Properties (files only)
• ⊗ Delete

Each button has a tooltip that appears on hover.

Sidebar resizing

The File Manager panel width is adjustable. A thin vertical strip between the sidebar and the editor area can be dragged left or right to resize:

• The strip highlights with the accent color while actively resizing.
• Width is clamped between 160 px and 600 px.
• The default width is 280 px.

---

③ Tab Bar

When you have one or more documents open (beyond the startup landing page), the tab bar appears at the top of the editor area (below the menu bar).

Tab appearance

• Each tab shows the filename (e.g. Markdown.md), truncated to 20 characters with ... if longer (14 characters when hovered to make room for the close button).
• Active tab: highlighted with the theme's tab_active color and an accent border, with a subtle shadow.
• Dirty indicator: an amber ● dot appears before the title when the file has unsaved changes.
• Close button: a red × button appears on hover. Clicking it triggers the tab close flow (with unsaved-changes protection if the file is dirty).

Tab interactions

Tab context menu

Right-clicking a tab opens a context menu with:

Tab overflow

When more tabs are open than can fit in the available width, navigation arrows (◀ / ▶) appear at the right end of the tab bar. The visible tab capacity is dynamically calculated based on the window width minus sidebar width, with each tab slot approximately 186 px wide.

---

④ Status Bar (Footer)

The status bar runs along the bottom of the editor area. It provides at-a-glance document statistics and editor state.

Left side — document metrics

Displayed as a dot-separated row:

• Block count (e.g. 895 blocks)
• Line count (e.g. 1678 lines)
• Word count (e.g. 6120 words)
• Character count (e.g. 39010 chars)
• Cursor position (e.g. Ln 4, Col 12) — shows Ln -, Col - when no block is focused
• Selection count (e.g. Sel 3 blocks or Sel none)

If a recent export was performed, an export status indicator (green "Export ready" or amber "Export failed") also appears.

Right side — keyboard and mode indicators

• CAPS / NUM / SCR — lock key indicators. Displayed in the accent color when active, muted text when inactive. These are tracked by toggling on each key-press.
• View mode toggle — a clickable icon button (see section ⑦).

---

⑤ Menu Bar

The top-level menu bar contains seven dropdown menus. Each menu item shows its keyboard shortcut (if it exists) on the right side.

File menu

Export sub-menu provides these formats:

HTML, HTML (without styles), PDF, Word (.docx), OpenDocument (.odt), RTF, EPUB, LaTeX, Reveal.js, MediaWiki, reStructuredText, Textile, OPML, Pandoc Markdown, CommonMark, GitHub Flavored Markdown — plus "With Previous..." and "Overwrite Previous" for re-exporting.

Edit menu

Markdown menu

A flyout menu with seven sub-sections:

Format menu

View menu

Toggle items (checkmarks show current state):

Settings menu

Help menu

---

⑥ Sidebar Action Toolbar

At the very bottom of the File Manager panel is the compact action toolbar. This is the narrow icon strip described more fully in Section ②.

The toolbar is split into two groups:

• Left group — always-active actions (New File, New Folder, Open Workspace, Collapse All)
• Right group — context-aware actions that dim when no file or folder is selected (Rename, Reveal, Properties, Delete)

All buttons have dark-card-style tooltips that appear on hover.

---

⑦ View Mode Toggle

At the far-right end of the status bar sits a small view mode toggle button.

Clicking the button (or pressing F6, or using View → Source Code Mode) switches between the two modes. When switching:

• Hybrid → Source: the block content is serialized into one Markdown string and displayed in a monospace text editor with syntax highlighting.
• Source → Hybrid: the raw Markdown is re-parsed back into blocks. This round-trip is lossless.

The toggle uses the theme accent color for its icon and highlights on hover.

---

⑧ Title Bar

The window title bar is managed by the operating system (Noteism uses native window decorations). The title dynamically reflects the current state:

The window icon is the Noteism logo, loaded from the .art/ directory in the following priority order: logo-512.png → logo-256.png → logo-128.png → logo-64.png. The application ID is set to noteism for desktop environment integration.

---

⑨ Save Status Indicator

On the right end of the menu bar row (not the status bar — the very top row next to the menu buttons), the current file's save status is displayed:

This indicator only appears when a real document tab is active — it is hidden on the startup landing page. The colored dot and label give an immediate visual cue about dirty state without needing to check the tab bar.

---

⑩ Line Numbers and Block Guides

The numbered gutter on the left side of the editor area contains two optional features that can be independently toggled:

Line numbers

• Toggle with Ctrl+L or View → Toggle Line Numbers
• The gutter is 56 px wide with a subtle vertical divider separating it from the content area.
• Line numbers are displayed in a monospace font at 12 px.
• The active cursor line is shown in the main text color; all other lines use muted text.
• Numbers are document-level: they continue counting across block boundaries, so block 1 might be lines 1–5 and block 2 starts at line 6.
• A full-height gutter background strip is layered behind the scrollable content so the gutter color always extends to the bottom of the viewport regardless of content length.

Block guides

• Toggle with View → Block Guides
• Thin colored vertical lanes (18 px wide) that appear between the line number gutter and the content area.
• Each block type gets a distinct visual treatment using a semi-transparent accent color.
• When a block is focused (being edited), its guide lane highlights.
• Selected blocks also receive highlighted guide lanes.

The line numbers and block guides can be used together or independently. The content area padding adjusts automatically based on which features are active.

---

⑪ Output Log Panel

The output log panel sits between the editor area and the status bar. It is a collapsible, resizable panel that displays application events and diagnostics.

Visibility

• Toggle with View → Output Log in the menu bar
• Persisted in your config at ~/.config/noteism/config.json under show_output_log

Content

The log shows timestamped entries with severity levels:

Each entry is formatted as: YYYY-MM-DD HH:MM:SS [LEVEL] message

History and persistence

• The log is persisted to disk at ~/.config/noteism/output_log.json so history survives app restarts.
• Maximum capacity is 200 entries — oldest entries are dropped when the limit is reached.
• Each new session starts with a fresh Welcome to Noteism banner prepended (this banner is not persisted).

Interaction

• The log uses a read-only text_editor widget — you can select and copy text but not type into it.
• The panel is scrollable with the standard themed scrollbar.

Resizing

A thin horizontal strip at the top of the panel serves as a resize handle:

• Drag up to make the log taller, down to make it shorter.
• The handle highlights in the accent color while actively dragging.
• Height is clamped between 60 px and 400 px.
• The configured height is persisted across sessions.

Right-click context menu

Right-clicking inside the log opens a context menu with: