Getting started with Klott

What Klott is

Klott is a lightweight, shareable note editor. You open it, you write, you share a link. There's no signup, no account to remember — your email becomes your identity, and every doc you start gets its own URL you can hand out.

Under the hood it's a rich-text editor with live collaboration, LaTeX math, code with syntax highlighting, Mermaid diagrams, Vega-Lite charts, and proper academic citations — built in, no plugins. Type / at the start of a line to see everything Klott can drop into your doc.

The menu

Klott keeps the writing surface front and centre. The Settings menu lives behind a thin strip on the right edge of the screen. On desktop, click the strip to slide the panel in or out. On mobile, tap the right edge of the screen — the same strip is there, widened to a comfortable touch target.

The panel has four tabs:

There's also a left-edge strip for the Pages panel — your library of every Klott you've written, plus tags and search. Cmd + \ toggles Settings; Cmd + Shift + \ toggles Pages.

Styling your document

Three ways to format text. Pick whichever feels least like work.

The bubble menu

Select any text. A small floating menu appears with bold, italic, strikethrough, inline code, and a link button. Use it when your hand is on the trackpad.

The slash menu

Press / at the start of any empty line — or anywhere with Cmd + / — to open the command picker. Filter by typing. Arrow keys to move, Enter to insert, Esc to dismiss. The full menu covers:

Keyboard

The usual suspects work as expected: Cmd + B bold, Cmd + I italic, Cmd + E inline code, Cmd + K add link. Headings are Cmd + Opt + 1/2/3.

Markdown shortcuts

If you think in Markdown, Klott will mostly meet you halfway. Type these at the start of a line and they transform on the next space:

Inline marks: **bold**, *italic*, ~~strike~~, and `code`. Klott also catches common smart-symbol shortcuts as you type — Greek letters (\alpha → α), arrows (-> → →), fractions, and a long list of math/unit symbols. The full set lives in the Symbol palette under the slash menu.

Math

Wrap an expression in single dollars for inline math: $E = mc^2$. Use double dollars for a centred display block: $$ \int_0^\infty e^{-x}\,dx $$. Both render with KaTeX.

For anything more involved, the Equation command in the slash menu opens an editor with a symbol palette, autocomplete, and a live preview — easier than wrestling with raw LaTeX in the middle of a paragraph.

Code blocks

/ → Code block, or just type three backticks. The toolbar above each block has a language picker (twelve languages, Shiki-highlighted), a line-numbers toggle, and a one-click Copy. For Python that actually runs, enable Executable Python under Settings → Experimental features.

Diagrams and charts

Mermaid diagrams — flowcharts, sequence diagrams, gantt charts, mind maps. Insert via / → Diagram, write Mermaid syntax in the editor, render side-by-side.

Vega-Lite charts — full grammar of graphics for data viz. Insert via / → Chart. Paste or write the spec; preview updates live. Both surfaces can copy their SVG or download a 2× PNG from the block toolbar.

Citations

Klott ships with citeproc-js and a handful of CSL styles (APA 7, MLA, Chicago, IEEE, Vancouver), plus support for custom .csl files. Open Settings → References to manage the library.

Add a reference manually, or drop a BibTeX file onto the References panel to import everything at once. Drag .csl files onto the same panel to install custom styles. Cite inline with @@ or [@ — both open the citation picker — then insert a Bibliography block where you want the formatted list to appear.

The active style and locale are per-document. Switch them in Settings and the whole bibliography re-renders without losing your inline citations.

Tags and pages

The left-edge panel — the Pagespanel — lists every Klott you've written or been invited to. Search across titles and contents from the input at the top (toggle the small text icon to include body matches with highlighted snippets).

Drag a Klott onto a tag chip to tag it. Rename tags in place from the tags popover. Use the same popover to filter the list down to a single tag.

Sharing

Every Klott has a unique URL the moment you start typing. Open Settings → Share and hit the copy button — or use Cmd + Shift + L from anywhere in the app.

Need an extra check before this klott opens? Pick an option under Share → Access:

Each access check can apply to viewing, editing, or both. Klott locks the doc to one editor at a time — live viewers appear as small avatars at the top of the page so you always know who's on.

Exports

Under Share → Download:

Moods

A mood is a single tile that bundles a font, size, line height, page width, bullet emoji, and a typing animation. The eight presets — Clean, Editorial, Boom, Pirate, Party, Data, Craving, Magical — cover the spread from austere academic to outright glitter. This very page repaints per mood via the same floating mood switcher used on the rest of the marketing site — try it.

Pick one under Settings → Mood. The Custom tile unlocks every dial individually: font preset or any web URL Klott can detect a typeface from, size and line-height presets, letter spacing, page width, and the typing-effect picker.

Tips and shortcuts

A keyboard cheat sheet. Cmd + ? opens the full in-app shortcuts dialog.

Editor

Document

App and navigation