> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bowerlabs.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# The note editor

> Rich text editing with slash commands, formatting, tables, math equations, callouts, and more.

Every note in Bower opens in a rich text editor. You can type freely, format text, insert tables and images, and use slash commands for quick block insertion.

## Text formatting

The toolbar at the top of the editor provides:

| Action            | Shortcut              |
| ----------------- | --------------------- |
| **Bold**          | Cmd+B                 |
| *Italic*          | Cmd+I                 |
| Underline         | Cmd+U                 |
| ~~Strikethrough~~ | Cmd+Shift+X           |
| `Code`            | Cmd+E                 |
| Highlight         | Cmd+Shift+H           |
| Text colour       | Toolbar colour picker |

Select text to reveal a **floating toolbar** with quick access to all formatting options, including text colour and font family.

You can also set text alignment (left, centre, right, justify) from the toolbar or via slash commands.

## Headings

Use the heading dropdown in the toolbar to switch between paragraph text and three heading levels, or use the `/h1`, `/h2`, `/h3` slash commands.

Headings are also used to generate the **Table of Contents** sidebar (see below).

## Slash commands

Type `/` at the start of a new line to open the command menu. This is the fastest way to insert blocks. You can search by typing after the slash -- for example, `/math` filters to math-related commands.

### Style

| Command     | What it inserts             |
| ----------- | --------------------------- |
| `/text`     | Plain paragraph             |
| `/h1`       | Heading 1                   |
| `/h2`       | Heading 2                   |
| `/h3`       | Heading 3                   |
| `/bullet`   | Bullet list                 |
| `/numbered` | Ordered list                |
| `/task`     | Task list with checkboxes   |
| `/quote`    | Blockquote                  |
| `/code`     | Code block                  |
| `/callout`  | Info callout box (blue)     |
| `/warning`  | Warning callout box (amber) |
| `/tip`      | Tip callout box (green)     |
| `/toggle`   | Collapsible toggle section  |

### Insert

| Command     | What it inserts                |
| ----------- | ------------------------------ |
| `/table`    | 3x3 table with header row      |
| `/hr`       | Horizontal divider             |
| `/image`    | Image upload dialog            |
| `/diagram`  | Open the diagram editor        |
| `/math`     | Inline LaTeX equation          |
| `/equation` | Block LaTeX equation (centred) |

### Align

| Command         | What it does     |
| --------------- | ---------------- |
| `/align left`   | Left-align text  |
| `/align center` | Centre text      |
| `/align right`  | Right-align text |
| `/justify`      | Justify text     |

## Lists

Three list types are available:

* **Bullet list** -- unordered items
* **Numbered list** -- ordered items
* **Task list** -- items with checkboxes you can tick off

Use the slash commands (`/bullet`, `/numbered`, `/task`) or the toolbar buttons to insert lists. Task lists support nesting -- press Tab to indent a task under another.

## Callout boxes

Callout boxes highlight important information with a coloured left border and tinted background. Three types are available from the slash menu:

* `/callout` -- **Info** (blue) -- general notes and information
* `/warning` -- **Warning** (amber) -- cautions and important warnings
* `/tip` -- **Tip** (green) -- helpful tips and suggestions

Type inside the callout to add your content. Each type has distinct colours that adapt to light and dark mode.

## Collapsible toggles

Use `/toggle` to insert a collapsible section. Toggles have:

* A **summary line** next to a triangle indicator
* A **content area** below that appears when expanded

Click the triangle to expand or collapse the section. Useful for hiding supplementary details, long method descriptions, or optional information.

## Tables

Insert a table with `/table` or Cmd+Shift+T. Tables start as 3x3 with a header row.

* **Resize columns** -- drag column borders
* **Add/remove rows and columns** -- use keyboard shortcuts:
  * Cmd+Shift+Right / Left -- add column after/before
  * Cmd+Shift+Down / Up -- add row after/before
  * Cmd+Shift+Delete -- delete column
  * Cmd+Alt+Delete -- delete row
* **Select cells** -- click and drag across cells
* **Merge/split cells** -- Cmd+Shift+M / Cmd+Shift+S
* **Navigate** -- Tab / Shift+Tab to move between cells
* **Scroll** -- on narrow screens, tables scroll horizontally

## Mathematics (LaTeX)

Write mathematical equations using LaTeX syntax, rendered with KaTeX:

* `/math` -- insert an **inline equation** that flows with surrounding text
* `/equation` -- insert a **block equation** displayed as a centred formula

Click on any rendered equation to edit the LaTeX source.

Common examples:

* Inline: `E = mc^2`, `\alpha + \beta = \gamma`
* Block: `\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}`
* Fractions: `\frac{a}{b}`
* Matrices: `\begin{pmatrix} a & b \\ c & d \end{pmatrix}`

## Images

Insert images with `/image` or the toolbar button. You can also drag and drop images directly into the editor, or paste from your clipboard.

Uploaded images support:

* **Resizing** -- drag the corner handles
* **Alignment** -- left, centre, right via the floating toolbar
* **Annotation** -- draw on images with shapes, arrows, and text
* **Lightbox** -- click an image in read-only mode to expand it

### Annotating images

Click an inline image to select it, then click the **draw icon** in the floating toolbar to open the annotation editor. Draw on the image with shapes, arrows, text, and freehand tools, then click **Save**. The annotated preview replaces the original image. To edit existing annotations, click the image and tap the draw icon again.

See [Image Annotations & Diagrams](/capture/annotations-and-diagrams) for full details.

## Diagrams

Type `/diagram` or click the **draw icon** in the fixed toolbar to create a diagram from scratch. The drawing editor includes shapes, arrows, text, freehand tools, and a library of pre-made scientific shapes (biology, chemistry, circuits, maths, and more).

See [Image Annotations & Diagrams](/capture/annotations-and-diagrams) for full details.

## Code blocks

Insert a code block with `/code` or type ` ``` ` followed by Enter.

## Block quotes

Insert a block quote with `/quote` or type `>` followed by a space.

## Links

Select text and press Cmd+K to add a hyperlink. Click an existing link to edit or remove it.

## Emoji

Type `:` followed by the emoji name (e.g. `:wave:`) to insert an emoji. Standard emoticons like `:)` and `:D` are auto-converted.

## Table of Contents

On wide screens (1280px+), a **Table of Contents** appears at the right edge of the editor:

* Small **dash indicators** show each heading at a glance
* **Hover** to expand a full heading outline panel
* **Click** any heading to scroll to that section
* The **active heading** is highlighted as you scroll

The Table of Contents updates automatically as you add, remove, or rename headings.

## Drag and drop blocks

Every block has a **drag handle** (six-dot icon) in the left gutter on hover:

* **Click** the handle to select the entire block (for copy/cut)
* **Drag** the handle to reorder blocks

The **+** button next to the drag handle opens the slash command menu.

## Markdown input

You can type Markdown syntax directly and it will convert to rich text:

* `# Heading` to H1, `## Heading` to H2
* `- item` or `* item` to bullet list
* `1. item` to numbered list
* `> quote` to block quote
* `**bold**` to bold, `*italic*` to italic
* `` `code` `` to inline code
* `---` to horizontal rule

You can also **paste Markdown** from other sources and it will be parsed into rich content automatically.

## Undo and redo

Use **Cmd+Z** to undo and **Cmd+Shift+Z** to redo. The toolbar also has undo/redo buttons.

## Autosave

Your content is saved automatically as you type. There is no manual save button -- changes are persisted within seconds of your last edit.

## Export

Notes can be exported from the note menu in multiple formats:

* **Markdown** (.md)
* **HTML** (.html)
* **Plain text** (.txt)
* **PDF** (via browser print)