Skip to content
easl

Docs Using easl

Tiles

What each kind of tile on the canvas shows and does, from terminals and code to notes, pages, images and drawings.

All docs pages

Everything on a board is a tile or a drawing, and you and your agents read and change the same objects. Right-click empty canvas for New Terminal Here, New Note Here and New Browser Here; the File menu puts new tiles in the middle of your view.

To use what’s inside a tile, select it and press Return (or click into it). Esc gives the keyboard back to the canvas. In a terminal or a web page, Esc belongs to the program or page, so ⌘Esc (View › Leave Tile) leaves any tile.

Terminal

A real terminal, rendered by libghostty, running in a zmx session so it outlives the app. ⌘T opens one (1000×620 pt) in your view.

  • Your Ghostty config. Tiles read it the way Ghostty does: theme, colors, font family, padding, keybinds and selection colors are yours. easl keeps its own font size, and zoom scales text; for bigger text, Scale the tile. easl never writes your config.
  • ⌘-click a path:line in the output to open that code beside the terminal: src/foo.ts:42, :42:7, :10-20, foo.rs#L10-20, Python tracebacks (File "core.py", line 2651) and pdb frames. ⌘-click reuses the terminal’s one preview tile; ⌥⌘-click opens a separate tile you keep.
  • Command status. With Ghostty’s shell integration (easl loads it in tiles), the header shows the last command’s result quietly: exit 1 · 42 s for a failure, the duration for a long success, nothing for a quick one. ⌘↑ and ⌘↓ jump between prompts.
  • Notifications and bells. A program’s notification (OSC 9, OSC 777) or bell at the shell prompt raises a pink attention marker on the tile, unless you’re already looking at it.
  • Scrolling over a terminal scrolls its scrollback; over an unfocused full-screen program it pans the canvas. Click into the program to scroll it.

Code

A read-only view of the whole file, scrolled to a range. File › Open File as Code Tile… (⌘O) opens one; so does ⌘-click in a terminal, ⌘P, or a link in a note or page.

  • Gutter signs like nvim’s gitsigns show changes against the base: a green bar on added lines, blue on modified, a red wedge where lines were deleted. Click a sign to peek at the old lines. The base is the merge-base with the default branch, or HEAD; a picker in the header switches it.
  • Navigation (Code menu): hover for signatures, Go to Definition ⌃⌘J (⌃⌥⌘J opens it in a new tile), Find References ⌃⌘R (Open All lays every reference out as captioned excerpts in a group), Outline ⌃⌘O (type to filter). These use a language server when one is installed, else text search, labelled so.
  • ⌘F finds in the focused or selected code tile. With the keyboard in the tile: ↑/↓ or j/k move a row, Space and ⇧Space a page, Home and End.
  • Captions and ranges. An agent’s evidence tile has a caption under its header saying why those lines matter. The range stays on its code as lines move above or inside it; “⚠︎ stale” in the header means that code is gone.
  • Pinned to a commit, a tile shows the file as of that commit, read-only (“pinned at ”).
  • Edit Here opens your $VISUAL or $EDITOR in a terminal beside the tile.

Follow tile

Each agent terminal has one code tile that follows the file and line the agent last read or edited. It’s on by default and appears with the agent’s first read.

  • The strip under its header lists recent places, newest first; a pencil marks an edit. The rows an edit changed flash for about 3 seconds.
  • While you scroll or click in it, it holds still for about 10 seconds and counts what it missed; N new ▸ catches up.
  • Pin keeps the current view as a tile of its own. Right-click the terminal › Follow Files turns following off.
  • It follows source only: images, PDFs and other binaries, files over 4 MiB, scratch files in the temp directory and missing files never re-aim it.

Changes

One view of what changed, for reviewing an agent’s work like a pull request: File › Review Changes (⇧⌘R). You stage, unstage or discard per file, hunk or line, and ⌘Z undoes each. See Reviewing work.

Notes

Markdown. Double-click (or Return) to edit the raw text; click away or Esc saves, ⌘↩ saves and leaves. ⌘N makes a new note that starts in editing.

Code fences stay live against the files they quote:

```ts file=src/store.ts#L41-60
```

```ts file=src/store.ts symbol=restore
```

```ts file=src/store.ts#L41-48 propose
export async function restore(id: string) {
```
  • An excerpt (file=path#L10-40 or symbol=Name) renders the real lines from disk and follows them as the file changes; a lost anchor shows a stale badge.
  • A propose fence renders as a diff against the real range, and shows “✓ applied” once the file reads that way.
  • A plain fence is free-written text, highlighted.
  • path:line references link anywhere in a note: prose, headings, tables, inline code. ![alt](path) shows an image. Tables wrap to the note’s width.

If an agent changes a note while you’re typing in it, a banner says so and nothing you typed is lost: ⌘↩ saves yours, Esc keeps theirs with yours one ⌘Z away (“Kept their version of the note · ⌘Z puts yours back”).

A note’s menu has Copy as Markdown and Save as Markdown…, with its links and fences as written.

HTML

Sandboxed explainer pages, usually written by an agent. Network is blocked by default (a tile can allow listed hosts). Every tile preloads a kit: Tailwind themed to the app, Mermaid, and grounded components (<canvas-code>, <canvas-link>, <canvas-decisions>, <canvas-compare>). Code links in a page open code tiles. File › New HTML Tile (⇧⌘H); the tile’s menu has Save as HTML… and Open in Browser.

Browser

WebKit pages. File › New Browser Tile… (⇧⌘B), or right-click › New Browser Here. omp’s browser tool drives them.

  • All browser tiles share one browser profile; easl › Clear Browsing Data… empties it.
  • ⌘L goes to the address field. ⌥⌘I (View › Show Web Inspector) opens Safari’s Web Inspector for the page.
  • Console errors, uncaught exceptions and failed requests are recorded from page load. When there are any, a small red “2 errors” sits in the address bar; its list takes a Hyper-click, so you can hand an error to your agent.
  • A page that can’t load says so (“Can’t reach localhost:5391”) with Retry, and a local address keeps trying until its server answers.
  • A page nobody can see is hidden from WebKit and released 2 minutes later; it reloads when you come back. A page an agent is driving stays live for 60 seconds after its last command.
  • Snapshot to Image (the tile’s menu) freezes the page as an image tile beside it, kept with the board, for before/after evidence.

Image

An image file with an optional one-line caption, like a notebook’s output cell: png, jpg, gif, webp, heic, tiff, bmp, svg, or a PDF’s first page. It reloads when the file changes, so an agent re-saving a chart updates it. A Hyper-click mentions the pixel under the pointer.

Drawing

The toolbar at the top of the window draws rectangles (R), ellipses (O), arrows (A), text (T) and ink (P); V selects. Shape tools go back to Select after one shape; ink stays on until Esc or V.

  • Arrows are straight, orthogonal, or routed around tiles, and an end released on or near a tile or shape binds to it.
  • ⌘G groups the selection into a titled, tinted region; double-click a group to enter it.
  • Your ink means nothing by itself: when you mention a drawing, easl tells the agent what it encloses, overlaps and connects.

Sharing

Edit › Copy as Image (⇧⌘C) and File › Export Selection as PNG… (⇧⌘E) draw the selection without canvas chrome (no author marks, close buttons, dot grid or selection). Save sheets open in the folder you last saved into, else Downloads, never inside the board’s repository.