Canvas Hand is a local infinite canvas plugin for Codex. Powered by tldraw, it lets you generate images, annotate them with arrows, and have the AI redraw images based on your annotations — all inside Codex. The canvas runs as a local web service and embeds directly in the Codex in-app sidebar browser.
- Open a local tldraw infinite canvas in the Codex sidebar.
- Have Codex generate images with its built-in image model and drop them onto the canvas automatically.
- Use the "revise instruction" pen to draw arrows + text on the canvas, marking which part of which image to change.
- The AI reads your annotations, redraws the image per your instructions, and places it back on the canvas — a "generate → annotate → redraw" iteration loop.
- Canvas data is saved to a fixed directory
~/.canvas-hand/canvas/— one canvas, reused everywhere.
Send this to Codex — it describes the goal, so Codex uses whatever install method its current version supports:
Please install the Canvas Hand Codex plugin from https://github.com/Tasihi89/canvas-hand.git.
Steps:
1. Clone the repo to ~/plugins/canvas-hand and confirm .codex-plugin/plugin.json exists.
2. Register it in my personal marketplace and enable it, using whatever your current
codex version supports. If the `codex plugin ...` CLI subcommands aren't available,
do it by editing the config files directly:
- add a "canvas-hand" entry to ~/.agents/plugins/marketplace.json (source.path
"./plugins/canvas-hand"), and
- add [plugins."canvas-hand@personal"] with enabled = true to ~/.codex/config.toml.
3. Tell me to restart Codex, then confirm Canvas Hand shows up in the Plugins panel.
The config-file method below is version-independent and always works. (The codex plugin ...
CLI commands exist in some versions — see the optional note at the end.)
1. Clone the plugin:
mkdir -p ~/plugins
git clone https://github.com/Tasihi89/canvas-hand.git ~/plugins/canvas-handNo need to run
npm install— the first time you open the canvas,scripts/start-canvas.shinstalls dependencies automatically.
2. Register it in the personal marketplace — make sure ~/.agents/plugins/marketplace.json has a canvas-hand entry in its plugins array (create the file if it doesn't exist):
{
"name": "personal",
"interface": { "displayName": "Personal" },
"plugins": [
{
"name": "canvas-hand",
"source": { "source": "local", "path": "./plugins/canvas-hand" },
"policy": { "installation": "AVAILABLE", "authentication": "ON_INSTALL" },
"category": "Productivity"
}
]
}3. Enable the plugin — add this to ~/.codex/config.toml:
[plugins."canvas-hand@personal"]
enabled = true4. Restart Codex. Canvas Hand should appear in the Plugins panel. Start a new chat so the skills and MCP tools load fully.
Optional (CLI): if your codex version supports the plugin subcommands, you can register the marketplace with
codex plugin marketplace add ~instead of hand-editing files. Availability varies by version — the config-file method above is the reliable path.
In Codex, say:
Open my canvas
Canvas Hand starts the local service (default http://127.0.0.1:8000/) and opens the canvas in the sidebar. Canvas data is saved to ~/.canvas-hand/canvas/canvas.json.
The port must be 8000 (the MCP tools connect to it by default). If 8000 is taken, free it first.
In Codex, describe the image you want, for example:
Generate a phone ad poster on my canvas
Codex generates the image with its built-in image model, drops it onto the canvas, and refreshes the sidebar so you see it immediately.
- Use the "revise instruction" pen in the canvas toolbar to draw an arrow on the image you want to change and type your instruction (e.g. "make the subject smaller", "use lighter colors").
- In Codex, say:
Redraw this image based on my annotations on the canvas
Codex reads the annotations (which image, which part, what to change), redraws it, places it back on the canvas, and refreshes. The original is kept; the new image goes beside it.
When iterating across rounds, only arrows on the latest image are processed — you're always iterating the image you just generated.
canvas-hand: the entry point, auto-routing by scenario to —- Open the canvas (
reference/open-canvas.md) - Generate a new image (
reference/generate.md) - Redraw from annotations (
reference/edit.md)
- Open the canvas (
npm install
npm run devThe canvas service is a Vite dev server — no build step needed.