Termul Docs
Browser and canvas

Edit a design on the canvas

Open your project's OpenPencil design file in a tab, edit it, and save it.

The canvas works in the desktop app and in the browser version on a computer. It isn't available on phone-sized screens.

The canvas is a design editor inside Termul. It opens your project's .op file, which is the design file format of OpenPencil, an open-source design tool. A .op file holds frames, shapes, and text. You can keep the design in the same repository as the code and look at both in one window.

Before you start

You need two things.

A .op file in the project's root folder. Termul looks only in the root folder, not in subfolders. If there are several .op files, Termul opens the first one in alphabetical order. If there are none, Termul shows this message:

Message that says no .op document was found in the project root

The OpenPencil editor server. The canvas runs OpenPencil's editor server, a program named op-host-web-server. Termul doesn't include it. Termul looks for it in this order:

  1. The file named in the TERMUL_OP_HOST_SERVER environment variable.
  2. An OpenPencil source folder named in the TERMUL_OPENPENCIL_ROOT environment variable. Build the server in that folder first with cargo build -p op-host-web-server.

Set the variable for the program that runs Termul: the desktop app, or the server that hosts the browser version. If Termul can't find the editor server, opening the canvas shows this error:

Error that says the canvas could not open because the op-host-web-server binary was not found

Open the canvas

Select a project first. Then use one of these ways:

  • Click Canvas in the left sidebar. When the sidebar is collapsed, click the pen icon (Open canvas).
  • Click + (New tab) at the right end of the tab bar, then click Open canvas.
  • Open the command palette with Ctrl+K (Cmd+K on macOS), type canvas, and run Open Canvas.

The New tab menu with New chat, the terminal shells, and Open canvas

The command palette filtered to canvas, with Open Canvas at the top

Each project has one canvas tab. If it is already open, Termul switches to it.

Work in the canvas tab

The bar at the top of the tab shows the file name and the editor's status:

  • Starting canvas… while the editor server starts.
  • Connecting… while the editor loads.
  • Ready when you can edit.
  • Canvas failed to connect if the editor didn't load.

Below the bar is the OpenPencil editor. Use its tools to add and change frames, shapes, and text. The editor uses the same light or dark appearance as Termul.

Save your changes

A dot next to the file name means you have unsaved changes. Click Save at the right end of the bar to write them to the .op file.

If the document changed while you were editing, Termul shows Canvas conflict. Choose one:

  • Keep my changes keeps your version.
  • Use the saved version drops your changes and loads the saved document.
  • Dismiss closes the message without choosing.

Let an agent work on the design

When you open the canvas, Termul adds an MCP server named OpenPencil Canvas to your MCP servers. An MCP server is a connection that gives an agent extra tools. Through this one, an agent can work with the design that is open on the canvas. See Agent setup for how agents use MCP servers.

Let an agent use the browser

Allow an agent to open pages, click, and type in a Termul browser tab while you watch.

Settings

Change how Termul looks and behaves, for the whole app or for one project.

On this page

Before you startOpen the canvasWork in the canvas tabSave your changesLet an agent work on the design