The editor & blocks

A tela page is markdown underneath — pages.body is canonical markdown, forever. The editor and reader render a rich block palette well beyond plain markdown, and every block round-trips to readable markdown, so nothing locks you in.

[!TIP] Type / on an empty line to open the slash menu and insert any block by name. Start typing to filter (e.g. /call, /mermaid, /table).

Standard markdown works as you'd expect — # headings, -/1. lists, **bold**, [links](…), > quotes, --- dividers, inline `code` and ==highlight==.

Block reference

[!NOTE] Math uses double dollars, so prices are safe. A single $ is never treated as math — write $3,500 and $2,500 in the same paragraph and both render as text. Inline math needs $$…$$ (typing $x^2$ in the editor still converts it, and saves as $$x^2$$).

These same blocks are what an AI agent gets when it writes a tela page — see [[Agents & MCP]].

See it in action

A callout sets an aside apart:

[!IMPORTANT] Everything you see in this reader is plain markdown in the page body. Open this page in the editor to read the source.

Tabs show alternatives in one spot:

:::tabs

Slash menu

Type / on an empty line, then filter by name.

Drag & drop

Drop an image or file onto the page — it uploads and inserts itself. :::

A table with check/cross cells renders as a feature matrix:

Slide decks

A page can be a slide deck instead of a document — the whole page becomes a presentation, styled automatically from plain markdown. Turn it on from the page ⋯ menu → Convert to slide deck. See [[Presentations & decks]].

Worth knowing

• Read mode. A distraction-free, full-bleed reading view — larger type, an on-page table of contents, and a reading-progress bar, plus size / typeface / theme controls. Click Read mode in the page header (on a phone it's in the page ⋯ menu), or add ?view=read to any page URL.

• The page header on a phone. Narrow screens keep the bar to what you need — the page title, Edit, and ⋯ — and fold the rest (Read mode, Comments, page connections, favorite, follow) into that ⋯ menu. The bar stays pinned to the top as you scroll, so Edit is always one tap away. The ‹ at the left goes up one level.

• Tables get smart in the reader. A cell that's exactly check / cross / dash (or ✓/✗/–) renders as a colored icon. The first column pins on horizontal scroll, and tables of 8+ rows get sortable headers + a filter box.

• Charts support bar / grouped / stacked / line / area / scatter / pie / donut, follow the page theme, and are interactive (hover tooltips, clickable legend).

• Drawings are multiplayer. Open the same drawing in two browsers (or with a teammate) and strokes + cursors sync live. It autosaves while you work and on close — no Save step — and merges per shape, so two people drawing at once don't clobber each other.

• Wikilinks resolve by page title within the space and record a backlink, so "what links here" builds itself.

• Images & files upload automatically on drag-drop or paste. A PDF attachment renders as a card with a Preview button — read it inline (paged, zoomable) without downloading.

• Page properties. Frontmatter on a synced/imported page (or props set via the API/MCP) shows behind the {} icon in the page header.

• Summaries are automatic. When an LLM is configured (TELA_LLM_URL), every non-empty page gets a 1–2 sentence summary property, regenerated in the background when the body changes. Hover the page title for the summary card; on public spaces it doubles as the post excerpt and meta description. Pin a hand-written one with summary_lock: true. Settings → Summaries shows generation status across your spaces.

• Mermaid diagrams follow the page theme. A ```mermaid block covers flowcharts and sequence, class, state, ER, gantt, pie, git and journey diagrams — all recoloured automatically for the active theme (light / dark / warm). Two opt-in styles are available via a YAML frontmatter block at the top of the diagram: a hand-drawn sketch look, and the ELK layout engine for tighter routing on dense graphs.

  ```mermaid
  ---
  config:
    look: handDrawn   # sketch style (default is clean lines)
    layout: elk       # tighter routing for busy graphs (default is dagre)
  ---
  flowchart LR
    A[Start] --> B[End]
  ```