✏️ Editor¶

TINO’s editor is built on CodeMirror 6 and offers Typst-aware syntax highlighting, structural indentation, search and navigation, code folding, and optional Vim keybindings.

Tabs¶

Every opened file appears as a tab above the editor. Click a tab to switch to it, or click the × button on a tab to close it. Use Close all tabs to clear them all at once. Tabs are persisted across page reloads.

Syntax highlighting¶

.typ files are highlighted with a Typst-aware grammar: comments, strings, keywords (#let, #show, #import, …), function calls, headings, strong and emphasis, math, labels and references, numbers, and punctuation each get their own colour. The palette is drawn from the corporate-design colours and adapts to the active theme (dark and light).

Formatting toolbar¶

The toolbar above the editor provides common Typst formatting actions. For the full syntax reference, see the Typst documentation.

Action	Typst syntax	Description
Bold	`…`	Wrap the selection in asterisks.
Italic	`_…_`	Wrap the selection in underscores.
Heading	`=`	Cycle the current line’s heading level (`=` → `==` → `===` → `====` → plain text).
Bullet list	`-`	Start a bullet list on the current line.
Numbered list	`+`	Start a numbered list on the current line.
Link	`#link("…")`	Insert a link function call.
Image	`#image("…")`	Insert an image function call.
Table	`#table(…)`	Insert a 2×2 table skeleton.
Inline code	` … `	Wrap the selection in backticks.
Code block	` `…` `	Wrap the selection in triple backticks.
Math	$…$	Wrap the selection in dollar signs.

Indentation¶

The editor indents structurally. Pressing Enter keeps the surrounding indentation, adds a level after an opening bracket ((, [ or {), and a line that begins with a closing bracket snaps back to match its opener. Plain prose is left at its current indentation.

Lists continue automatically: pressing Enter on a list item starts the next item (numbered markers increment), while pressing Enter on an empty item ends the list.

Keyboard shortcuts¶

Shortcut	Action
`Ctrl`+`S` / `⌘S`	Save the current file.
`Ctrl`+`Z` / `Ctrl`+`Y`	Undo / redo.
`Tab` / `Shift`+`Tab`	Indent / dedent.
`Enter`	New line with structural indentation; continue a list.
`Ctrl`+`F` / `⌘F`	Open the search panel (find & replace, with match-case / regexp / by-word options).
`F3` / `Shift`+`F3`	Find next / previous.
`Ctrl`+`G` / `⌘G`	Go to line.
`Ctrl`+`D` / `⌘D`	Select the next occurrence of the selection (multi-cursor).
`Ctrl` / `⌘` + scroll	Zoom the preview around the mouse cursor.

Folding and brackets¶

Collapse a {…} or […] block from the fold gutter beside the line numbers, and click again to expand it. When the cursor sits next to a bracket, its matching partner is highlighted.

Vim mode¶

Click Vim in the toolbar to enable Vim keybindings. A status bar at the bottom of the editor shows the current mode and : command line, and the caret becomes a block cursor in normal mode. The setting is remembered per browser — click Vim again to return to the default editing mode.

The usual motions and operators apply; u / Ctrl+R undo and redo, and :w saves the file.

Saving¶

Files are auto-saved a short moment after you stop typing — by default 250 ms, configurable via TINO_SAVE_DEBOUNCE_MS. You can also save manually with the Save button, Ctrl+S, or :w in Vim mode. Unsaved files are marked with a dot on their tab.

Preview¶

The right-hand panel shows an SVG preview of the current .typ file. The preview is re-rendered automatically after each save.

Use the Zoom in / Zoom out buttons to adjust the preview scale; the content at the centre of the preview stays in place. Click the displayed percentage to reset the zoom to 100%. Fit to width zooms the page to fill the preview’s width, and keeps it fitted while you resize the panel, until you zoom manually again. To zoom around a specific spot, hold Ctrl (or ⌘) and scroll with the mouse over it, or pinch on a trackpad.

DOCX export¶

Warning

The DOCX export is experimental.

It relies on Typst’s HTML export, which is still under active development: the Word document keeps the content, but not the page layout, and the result may change between Typst and TINO releases. Use the PDF for documents that need to look exactly right.

Next to the PDF button, the DOCX button downloads the current .typ file as a Word document. It is only shown when pandoc is installed on the server (it is included in the Docker image for amd64 and arm64).

The document is built from Typst’s HTML export, which pandoc converts to DOCX. That keeps the content and structure (headings, paragraphs, lists, tables, links and images), but not the page layout:

Page setup, spacing, headers and footers are ignored.
The content of grid elements is dropped. In templates, render a borderless table instead when exporting to HTML:
```
#let layout-grid(..args) = context {
  if target() == "html" { table(stroke: none, ..args) } else { grid(..args) }
}
```
Use layout-grid wherever the template uses grid (e.g. for a letterhead or signature rows); the PDF stays unchanged.

To style the Word document (fonts, colours, margins, header and footer), add a reference.docx next to the .typ file or at the root of the bucket. TINO passes it to pandoc as reference document. A good starting point is pandoc’s default, which you can adjust in Word:

pandoc -o reference.docx --print-default-data-file reference.docx