Features

Everything Klarinotte can do — and how to use it.

Editor & Markdown

Klarinotte uses a CodeMirror 6 editor with full markdown support: headings, bold, italic, strikethrough, lists (ordered, unordered, task lists), code blocks with syntax highlighting, tables, math equations (KaTeX), and more.

Formatting Toolbar

A formatting toolbar above the editor provides quick access to common formatting actions — bold, italic, headings, lists, links, code, and math.

On mobile devices, an additional markdown character toolbar appears, giving quick access to characters frequently needed when typing markdown: [ ] # ` - *. This saves you from hunting through the mobile keyboard for these symbols.

Edit & Preview Mode

Switch between Edit mode (the markdown editor) and Preview mode (rendered markdown) with Ctrl+E (⌘+E on Mac), or click the toggle button in the note header. The scroll position syncs between modes, so you don't lose your place.

Jumping to the editor

To return focus to the editor from anywhere in the app — the sidebar, the search field, a modal trigger — press Ctrl+Enter (⌘+Enter on Mac). The cursor lands where it was last positioned, ready to type. Tab from the sidebar or from the note title still works for the common cases.

Pasting from the Web

When you copy formatted content from a website — headings, bold text, links, lists, tables — and paste it into Klarinotte, the HTML formatting is automatically converted to Markdown. Pasted content becomes clean, portable Markdown rather than raw HTML or a blob of plain text stripped of all structure.

For example, copying a bulleted list from a webpage and pasting it will produce a proper Markdown list; a bold heading on a page becomes ## Heading; a hyperlink becomes [link text](url).

Overriding the conversion

Sometimes you want plain text without any formatting, or you want the raw HTML itself. There are two ways to bypass the automatic conversion:

• Context menu → "Paste without formatting" — Right-click in the editor and choose Paste without formatting (or use the browser's built-in Ctrl+Shift+V / ⌘+Shift+V shortcut on most systems) to paste raw plain text, discarding all HTML structure.
• Paste inside a code block — When the cursor is inside a fenced code block (```), pasted content is always inserted as-is plain text, with no Markdown conversion applied. This is useful for pasting HTML snippets, code, or any content where you want to preserve the original characters exactly.

Pasting and Dropping Images

You can add an image to a note by pasting it from the clipboard (a screenshot, a copied browser image) or by dragging a file in from your file manager. Klarinotte saves the image as an attachment and inserts a Markdown image link at the cursor.

Before saving, a small dialog asks you to confirm or change the filename. The filename it suggests depends on where the image came from:

• Files dragged from your operating system keep their original name. Dragging Screenshot 2024-04-01.png from your file manager (Finder on macOS, File Explorer on Windows, Files / Nautilus on Linux) produces Screenshot 2024-04-01.png.
• Clipboard pastes and browser drops arrive without a real name (the browser hands them over as image.png or a temporary blob: URL). For these, Klarinotte generates a name using the format you choose in settings.

Choosing the default filename format

Open Settings → Files and links → Default filename for pasted images and pick one of:

• Note title + counter (default) — produces names like my-note-1.png, my-note-2.png, my-note-3.jpg. The prefix is your note title slugified to lowercase, hyphenated, ASCII-safe (so "Trip to Paris!" becomes trip-to-paris; accented characters are mapped to their plain forms). The counter increments per title — files of different formats share the same sequence, so the numbers in your note read as a continuous list. If your note has no title yet, the prefix falls back to pasted (so pasted-1.png, pasted-2.png, …).
• Timestamp — produces names like pasted-2026-05-10-153045.png using the time the image was pasted. Always unique, never depends on the note's title.

Skipping the filename dialog

If you don't want to be asked every time, turn off Settings → Files and links → Prompt for image filename on paste. Pasted and dropped images will then be saved silently using the format you selected above.

Wiki-Links

Connect your notes with double-bracket wiki-style links. The full syntax:

[[Meeting Notes]]                  Link by title
[[Projects/Redesign]]              Link by folder path + title
[[Meeting Notes#Action Items]]     Jump to a specific heading
[[#Action Items]]                  Same-note heading link
[[Meeting Notes|notes]]            Custom display text
[[id:a1b2c3d4-e5f6-…]]             Link by note ID — survives renames

The heading anchor and display label are optional and can be combined: [[Meeting Notes#Action Items|action items]], [[id:a1b2…#Action Items]], and so on.

Following Links

From preview mode, click any wiki-link to open the target. If the link includes a heading anchor, the editor scrolls to that heading on arrival.

From edit mode, hold ⌘ (macOS) or Ctrl (Windows/Linux) and click the link to navigate. While the modifier is held, the link under the pointer gets an underline and the cursor turns to a pointer — your signal that it's about to be followed. Without the modifier, clicks position the text cursor as usual. If you pause briefly over a wiki-link without pressing the modifier, a small ⌘+Click to open hint appears as a reminder.

When the target doesn't exist yet, cmd/ctrl-clicking a title-based link creates it on the spot — including any missing folders in the path. If the link includes a heading, the new note is seeded with that heading so the cursor lands inside it. ID-based links ([[id:…]]) and same-note heading links ([[#Heading]]) never auto-create — they show a warning toast if the target is missing.

Visual Cues

Wiki-links to existing notes appear in blue; broken links — targets that don't exist yet — appear in red. The colour updates as soon as the target is created or deleted, so a link's appearance always reflects whether it currently resolves.

Fuzzy Auto-Suggest

When you type [[, an autocomplete menu appears. It uses fuzzy matching — you don't need to type the exact title. For example, typing [[meet no will match "Meeting Notes", and [[prj rdsn will find "Projects/Redesign".

Typing # after a title (e.g. [[Meeting Notes#) switches the suggestions to that note's headings, so you can pick the right anchor without leaving the editor.

Backlinks

The right sidebar shows backlinks — all notes that link to the currently open note. This lets you discover connections and navigate your knowledge graph.

Automatic Link Updates

When you rename or move a note, all wiki-links pointing to it are automatically updated across your entire vault.

Note ID

Every note has a unique note ID assigned when it's created. The ID is stable — it never changes when you rename, move, or edit the note. This is what makes it possible to link to a note in a way that survives renames (see Projects & Backlinks and the [[id:…]] wiki-link form).

Where to find a note's ID

Open the note and look at the browser's address bar. The URL has the form:

https://app.klarinotte.com/note/<note-id>

Everything after /note/ is that note's ID. For example, in https://app.klarinotte.com/note/a1b2c3d4-e5f6-4789-abcd-ef1234567890 the ID is a1b2c3d4-e5f6-4789-abcd-ef1234567890. Copy that segment whenever you need to reference the note by ID — for instance inside a [[id:…]] wiki-link or a task's projects: field.

Sharing a link to a note

The full URL in the address bar is also a direct link to the note. Bookmark it in your browser, paste it into another note, or send it to yourself across devices — opening the link reopens that exact note, as long as the vault containing it is the one currently open.

Tags

Add tags anywhere in your notes using hashtag syntax:

#project #idea #work/meeting #research/physics/quantum

Hierarchical Tags

Tags support hierarchies using forward slashes. #work/meeting creates a nested tag — you can filter by the parent #work to see all work-related notes, or drill down to #work/meeting specifically. The tags panel lets you switch between flat and hierarchy views.

Tasks

Klarinotte includes lightweight task management that lives inside your notes. There is no separate task database — every task is just a note with some YAML frontmatter at the top. Open the Tasks panel from the left sidebar (the checkbox icon) to see all tasks across the current vault.

What Makes a Note a Task

A note is treated as a task when its frontmatter contains a non-empty status: field. That single key is the trigger:

---
status: todo
---
Investigate the auth race condition reported by a user.

This note now appears in the Tasks panel under todo. If status: is missing or empty, the note is treated as a normal note — even if it has other frontmatter fields like tags or title.

Status Values

The Tasks panel groups tasks by their status. The recommended values are:

• todo — not started yet
• doing — in progress
• done — completed

Any string is allowed. If you write status: blocked or status: waiting-on-client, that becomes its own group in the panel. Klarinotte does not enforce a fixed list — pick whatever vocabulary fits your workflow. The trade-off is that custom statuses don't fall under the canonical todo / doing / done columns.

Toggling the checkbox in the panel sets the status to done when checked and back to todo when unchecked — even if the task previously had a custom status like doing or blocked. To keep a non-canonical status, edit the frontmatter directly in the note rather than toggling.

Other Task Properties

Beyond status, a task supports these optional fields:

---
status: doing
due: 2026-05-20
priority: normal
contexts: [writing, deep-work]
projects: ["[[Q2 Editorial Calendar]]"]
timeEstimate: 120
---
Draft section 3 — token bucket vs leaky bucket.

Date and Time Format

due accepts any string the browser's Date parser understands. Recommended forms:

• Date only — 2026-05-15
• Date + time + UTC — 2026-05-15T09:00:00Z
• Date + time + offset — 2026-05-15T09:00:00+02:00

An unparseable value (tomorrow, next week) is silently ignored — the task still shows up, just without a due date. timeEstimate is a positive integer in minutes.

Sort Order

Inside each status group, tasks are sorted by:

1. Due date ascending — earliest first; tasks with no due date go to the end.
2. Priority descending — urgent → high → normal → low; tasks with no priority go to the end.
3. Last updated descending — most recently changed first.

Filtering

Click any context or project chip on a task row to filter the list. The chip becomes an active-filter pill below the panel header.

• Filters combine with AND — picking home and errands shows only tasks tagged with both.
• Click an active-filter pill (or the same chip again) to remove it.
• The Show completed toggle persists across reloads.

Projects & Backlinks

The projects: field uses the same wiki-link syntax as the rest of Klarinotte. Each entry can be:

• "[[Q2 Editorial Calendar]]" — link by note title
• "[[Q2 Editorial Calendar|Editorial]]" — link by title with a custom display label
• "[[id:abc-123]]" — link by note id (survives renames)

Because these are real wiki-links, every project link counts as a regular backlink. Open the project note (e.g. Q2 Editorial Calendar) and its Backlinks panel will list every task that references it — no separate task lookup needed. This is the recommended way to see all tasks belonging to a project.

The little arrow icon on a project chip jumps directly to the linked note; clicking the chip body filters the task list instead.

Sync

Because a task is just a note, it syncs through the same end-to-end encrypted pipeline as every other note. Status changes you make in the Tasks panel are reflected on your other devices on the next sync, and the panel auto-refreshes when remote changes arrive — no manual reload required.

Editing Tasks

You can edit a task either from the Tasks panel (status toggle) or by opening the note and editing the frontmatter directly. Both paths stay in sync — typing a new status: in the editor immediately updates the panel; toggling the panel checkbox immediately updates the open editor.

Frontmatter

YAML frontmatter is an optional metadata block at the very top of a note, delimited by ---. It's how Klarinotte stores structured properties (tags, task fields, import hints) without leaving the plain-text world — the file remains a portable Markdown document that any other editor can read.

---
title: Q2 Editorial Calendar
tags: [writing, planning]
created: 2026-04-01
status: doing
---

Body of the note starts here.

Keys Klarinotte Recognizes

Custom Keys Don't Interfere

Unknown keys are preserved when Klarinotte rewrites the frontmatter (for example when toggling a task status). You can freely add your own fields — customer:, confidence:, mood:, anything — and they will round-trip through any save without being touched.

Likewise, having only non-task keys (tags, title, etc.) does not turn a note into a task: the task system specifically looks for a non-empty status: and ignores everything else.

Editing Frontmatter

Edit the block directly in the editor. As you type, dependent panels (tags, tasks, backlinks) update in real time. Quote any value containing colons, leading dashes, or YAML special characters:

title: "Editing: Phase 1"
note: "- starts with a dash"

Visual treatment

The whole frontmatter block (from the opening --- through the closing ---) is rendered slightly faded so the body content reads as primary. Inside that block, keys that Klarinotte actually reads (the ones in the table above) are shown in your accent color; custom keys and typos stay in the regular text color.

This is passive feedback — there are no warnings or popups. If you typed staus: by mistake, it won't pick up the accent color, and the surrounding correctly-spelled keys will. A custom key like customer: stays plain because it's not a typo, and you'll know to expect that.

Quick Switcher

Press Ctrl+P (⌘+P on Mac) to open the Quick Switcher — a modal search that lets you jump to any note instantly.

It uses fuzzy search, so you can type fragments of a note title and it will find the match. Recently opened notes appear at the top when the search field is empty. Use arrow keys to navigate results and Enter to open.

Prefix the query with ? (for example ?meeting notes) to switch the switcher into omni mode. Instead of matching only on titles, it ranks results across the full note content and tags as well, and shows a short snippet around the matched word under each title — useful when you remember a phrase from inside a note but not the title. The leading ? is consumed as the mode switch and is not part of the query. Type just ? on its own to see the prompt before typing your search terms.

Search

The search page provides full-text search across all note titles, content, and tags. The index is built entirely in your browser — your notes never leave your device for search. It supports:

• Prefix search — partial words return results; "proj" matches "project plan"
• Relevance ranking — title matches rank higher than body matches
• Scope filters — restrict search to title only, content only, or tags only
• Tag, folder, and date filters — narrow results beyond the text query
• Fuzzy matching (~ toggle) — opt-in typo tolerance; with it on, "meetng" still finds "meeting". Off by default so results only contain the queried word.
• Case-sensitive mode (Aa toggle) — exact-case matching when needed
• Regular expressions (.* toggle) — for precise pattern matching
• Search history and suggestions — recent queries are remembered for quick reuse

Semantic Search

Beyond keyword matching, Klarinotte offers semantic search — find notes by meaning and concept, not just exact words. This is powered by a multilingual AI model that runs entirely on your device.

How It Works

1. Download the model — On first use, a ~25 MB embedding model is downloaded to your browser. This happens once and is cached for future use.
2. Index your notes — Notes need to be indexed before they can be searched semantically. Open the Semantic Search section in Settings to index your notes. Notes that are too short (below a configurable minimum character length) are excluded from indexing.
3. Search by concept — Activate the semantic search toggle (✨) on the search page and type a natural language query. Results are ranked by conceptual similarity.

Semantic Search Menu

In Settings → Semantic Search, you can:

• Index remaining notes — Index only notes that haven't been indexed yet or have changed since last indexing.
• Re-index all notes — Force a full re-index of every note.
• View index statistics (how many notes are indexed, model status).
• Configure the minimum note length for indexing.

Image Search via OCR

When you drop a photo or screenshot into a note, the content inside that image is invisible to search — until OCR runs on it. Klarinotte's OCR feature is powered by Tesseract.js and runs entirely on your device. No images are ever sent to a server.

The Goal: Findability, Not Transcription

Klarinotte's OCR is not trying to produce a perfect transcript of every image. The goal is simpler and more practical: extract enough meaningful keywords so that a typed search query can surface the right note, even when the relevant information lives inside an image rather than in the written text.

Think of it as giving your images a voice in search. If you paste a screenshot of a recipe, a whiteboard photo, or a scanned business card, OCR pulls out the words it can read — and those words become searchable anchors for the note.

How OCR Results Are Stored

The recognized keywords are stored as an HTML comment placed directly after the image in your note's markdown:

![whiteboard](assets/whiteboard.jpg)
<!-- OCR-DATA confidence=82 language=eng date=2025-11-15T10:30:00Z
sprint backlog velocity retrospective
user story acceptance criteria
-->

This is a deliberate design choice with two benefits:

• Invisible in rendered output — HTML comments are not displayed in Preview mode, in PDF exports, or in any rendered view. Your note looks exactly the same to the reader; the OCR text is completely hidden from sight.
• Fully searchable in the background — Because the comment is plain text inside your note file, the regular full-text search and semantic search can both index and find it, letting you locate a note by a word that appears inside one of its images.

The result is that visual appeal is preserved while your images become part of the searchable fabric of your vault.

Running OCR

To run OCR on a note's images, open the toolbar overflow menu ⋮ and choose the OCR command. Klarinotte will process every image in the note and insert keyword comments for any images that don't already have one.

Text Filtering

OCR output can be noisy — low-confidence guesses, image artifacts, and stray symbols. Klarinotte includes configurable filters to keep only the useful words. In Settings → OCR, you can enable or disable each filter:

• Confidence filter — Drop words below a minimum recognition confidence (default: 60%).
• Short word filter — Drop words shorter than a minimum length (default: 2 characters).
• Digit filter — Drop tokens that contain digits (cuts noise from image artifacts).
• Special character filter — Drop tokens made up of only special characters.

Languages

OCR supports multiple languages. Language data files are downloaded automatically on first use for each language you enable, then cached locally. When multiple languages are active, Tesseract processes images with all of them simultaneously, which is useful for notes that mix scripts (e.g., English and Arabic).

To add or remove OCR languages, go to Settings → OCR → Languages. Each language has a toggle — enable the ones you need and disable the ones you don't. You can have several languages active at the same time. Removing a language does not delete already-extracted OCR data from your notes; it only affects future OCR runs.

Graph View

The graph view visualizes your notes as an interactive node-link diagram. Each note is a node, and wiki-links between notes are edges. You can pan, zoom, and click on nodes to navigate to notes. Filtering by tags, folders, or connections is supported.

Note History

Klarinotte automatically creates snapshots of your notes as you work. Access the history from the note header to see past versions with timestamps. You can preview any version and restore it with one click.

The retention policy keeps recent edits (last 10), daily snapshots (30 days), weekly snapshots (12 weeks), and monthly snapshots (12 months).

Templates

A template is a regular note in your Templates/ folder whose frontmatter and body act as a recipe for new notes. Press Ctrl+D (⌘+D on Mac) to create a note from your default template, or click the chevron next to the + button to pick any template explicitly.

Getting started

Open Settings → Templates and click Create starter templates. This adds four example templates to your Templates/ folder — Daily, Weekly, Meeting, and Tasks — and binds ⌘+D to the Daily one. The action is safe to click again: existing templates are never overwritten, only missing ones are created.

The templates folder shows up in your file explorer with a distinctive stamp icon, sorted to the end of the folder list. To author your own template, just create a new note inside that folder.

The Tasks starter pre-wires every field the in-app tasks feature reads (status, due, priority, contexts, projects, timeEstimate) but ships with status: intentionally empty. That keeps the template note itself out of the Tasks panel — once you create a note from it, set status: todo (or doing / done) to start tracking it.

Template frontmatter

The directives live under a single klarinotte_template: block in the template's frontmatter. The whole block is stripped from the resulting note — only your own frontmatter is carried over.

---
klarinotte_template:
  folder: Daily/{{YYYY}}/{{MM}}
  title: "{{YYYY}}-{{MM}}-{{DD}}"
  on_existing: open
  description: "A daily journal entry, filed by year and month."
tags: [daily]
---

# {{YYYY}}-{{MM}}-{{DD}}

## Notes
{{cursor}}

## TODOs

The optional description directive is a free-form, human-readable blurb — useful as a self-documenting note for what the template is for.

Variable tokens

Tokens are wrapped in double curly braces and resolved once, on the device that creates the note, against the local clock. The created note contains concrete strings — there are no variables to re-evaluate later.

Collision strategies

The on_existing directive controls what happens when a note with the resolved title already exists in the resolved folder.

If the directive is omitted, the default is suffix.

Folder routing

The folder directive can contain variables and slashes — Klarinotte walks the path and creates any missing folders. Daily/{{YYYY}}/{{MM}} on Sat 2026-05-09 routes the note into Daily/2026/05/; the Daily, 2026, and 05 folders are auto-created if they don't exist.

The default template

The Default template setting (Settings → Templates) is the one ⌘+D invokes, and it gets a default badge in the new-note chevron menu. The plain + button always creates a plain note — it does not use the default template — so users who never touch templates see exactly the original new-note behavior.

The Default template is per-notebook: each notebook stores its own value. Setting it in one notebook does not affect another. The Templates folder path is global (one value across notebooks); the default template binding is local because it stores a note id, which is meaningful only inside the notebook that owns the note.

Themes & Appearance

Dark & Light Mode

Toggle between dark and light themes with Ctrl+Shift+L (⌘+Shift+L on Mac).

Accent Color

Customize the accent color used throughout the interface — buttons, links, highlights, and active states. Choose from the available accent colors in Settings → Appearance.

Zen Mode

Toggle zen mode with Ctrl+Alt+Z (⌘+Option+Z on Mac) to hide the sidebar and all UI chrome, leaving only your note content for distraction-free writing.

Bidirectional Text

Klarinotte automatically detects the script direction of each line in the editor. Lines beginning with right-to-left characters (Arabic, Hebrew, Persian, Urdu, etc.) are automatically aligned to the right, while left-to-right lines remain left-aligned. This happens per-line — you can mix LTR and RTL content freely within the same note.

Empty lines inherit the direction of the previous line, so pressing Enter in the middle of RTL text continues in the correct direction.

Toolbars

Formatting Toolbar

The toolbar above the editor provides one-click formatting: bold, italic, headings, lists, links, code blocks, and math equations.

Mobile Markdown Toolbar

On mobile devices, an additional toolbar provides quick-insert buttons for commonly used markdown characters: [ ] # ` - *. These characters are often buried in secondary keyboard layers — this toolbar puts them one tap away.

Platforms & Mobile

Browser Support

Klarinotte runs in all modern browsers: Chrome, Firefox, Safari, and Edge.

Install as a Web App

On supported browsers, you can install Klarinotte as a PWA (Progressive Web App) for a native-like experience — fullscreen window, faster launch, and home screen icon.

Mobile Optimization

On mobile devices, Klarinotte adapts to smaller screens: the sidebar auto-closes when you select a note, the interface is optimized for touch interaction, and the mobile markdown toolbar provides quick access to commonly needed characters.

Sidebar Navigation

The file explorer sidebar supports keyboard navigation:

• Arrow keys — Navigate between notes in the sidebar.
• Tab — Jump from the sidebar to the note editor.
• Tab from title — When the cursor is in the note title field, pressing Tab moves focus to the note body.
• Ctrl+Shift+E (⌘+Shift+E on Mac) — Reveal the currently open note in the explorer. Switches back to the Notes tab if needed, expands collapsed parent folders, scrolls the note into view, and briefly highlights the row.

Offline & Updates

Klarinotte is a fully offline-capable application. Once loaded, it works without an internet connection. All your data is stored locally in your browser.

The app automatically checks for updates in the background. You can also manually check for updates in Settings. To force an immediate update, press Ctrl+Shift+R (⌘+Shift+R on Mac) to hard-reload and pull the latest version.

Bookmarks & Attachments

Bookmarks let you pin frequently accessed notes — or specific sections within notes — for quick access from the Bookmarks tab in the left sidebar.

Bookmarking a whole note

Right-click a note in the file list and choose Add Bookmark. The note appears in the Bookmarks tab.

Bookmarking a heading (section)

Every markdown heading in the editor (#, ##, ###, …) shows a small bookmark icon at the end of the line. Click the icon to bookmark that heading; click it again to remove the bookmark. The icon turns orange and fills in when the heading is bookmarked.

You can also bookmark a heading from the Outline panel in the right sidebar — hover any heading in the outline and click its bookmark button.

Heading bookmarks appear in the Bookmarks tab grouped under their parent note, labelled as Note title > Heading text. Clicking a heading bookmark opens the note and jumps straight to that section.

Hiding the heading bookmark icons

If you find the in-editor bookmark icons distracting, you can turn them off in Settings → Editor → Show bookmark icon next to headings. Bookmarking from the right sidebar Outline panel and the right-click menu still works regardless of this setting.

Syncing bookmarks

When you sign in to sync, your bookmarks (both whole-note and heading bookmarks) sync end-to-end encrypted across your devices alongside your notes. Adding, removing, or renaming a bookmark on one device propagates to the others on the next sync. Permanently deleting a note also removes its bookmarks on every device.

Attachments (images, files) can be added to notes via drag-and-drop or paste. They are stored alongside your notes in the local database.