Interface gallery for mods changedplugins/mods/gallery
Nearest release: v2.1.305, published 3 hours before upstream edited the page. Shown because the two are within 24 hours of each other. Nothing here says the release caused the edit.
Upstream edited this page at 20 Oct 2026 22:43 UTC, give or take a minute or two: the time comes from Anthropic’s own sitemap rather than from a commit. This site recorded the change at 22 Oct 2026 18:07 UTC.
Upstream edited
Recorded here
Lines+17added
Lines−17removed
From line
4
where the diff opens
First seen
1 Oct 2026
this site's first read of the page
Recorded edits7to this page, all time
The whole hunk
from line 4, old and new numbered
/
from line 4
44
55A mod draws its interface from elements: text, boxes, buttons, fields, and a few that format content for you. The samples here show the code that draws an element, and most come with a screenshot of the result in a terminal pane, so you can pick an element by how it looks.
66
7To learn how drawing works, start with [Draw in the interface](/docs/en/plugins/mods/interface). For the main props and which apps draw each element, see the [elements reference](/docs/en/plugins/mods/reference#elements). The [type declarations](/docs/en/plugins/mods/create#get-the-types-for-your-build) list every prop.
7To learn how drawing works, start with [Draw in the interface](/docs/en/plugins/mods/interface.md). For the main props and which apps draw each element, see the [elements reference](/docs/en/plugins/mods/reference.md#elements). The [type declarations](/docs/en/plugins/mods/create.md#get-the-types-for-your-build) list every prop.
88
99## Try a sample
1010
1111The samples on this page are snippets, not whole mods. Each one is the code for one element and anything nested inside it.
1212
13To see a sample in your own terminal, create the small mod in these steps and paste the sample into it. The mod adds a `/gallery` command that opens a pane and draws the sample there. A [pane](/docs/en/plugins/mods/interface#pick-where-to-draw) is a sidebar beside the transcript in a wide fullscreen terminal, or a framed region above the prompt otherwise.
13To see a sample in your own terminal, create the small mod in these steps and paste the sample into it. The mod adds a `/gallery` command that opens a pane and draws the sample there. A [pane](/docs/en/plugins/mods/interface.md#pick-where-to-draw) is a sidebar beside the transcript in a wide fullscreen terminal, or a framed region above the prompt otherwise.
1414
1515**1. Create the mod**
1616
17Create a directory named `gallery` with `.claude-plugin` and `hooks` directories inside it. [Create a mod](/docs/en/plugins/mods/create#write-a-mod-yourself) explains the files.
17Create a directory named `gallery` with `.claude-plugin` and `hooks` directories inside it. [Create a mod](/docs/en/plugins/mods/create.md#write-a-mod-yourself) explains the files.
1818
1919Save the manifest as `gallery/.claude-plugin/plugin.json`:
2020
from line 215
215215
216216## Take input
217217
218`Button`, `Input`, and `Select` are controls: the user moves between them with Tab and uses the one that has the focus. [Keyboard focus and hotkeys](/docs/en/plugins/mods/interface#know-which-keys-your-mod-can-receive) covers which keys reach them.
218`Button`, `Input`, and `Select` are controls: the user moves between them with Tab and uses the one that has the focus. [Keyboard focus and hotkeys](/docs/en/plugins/mods/interface.md#know-which-keys-your-mod-can-receive) covers which keys reach them.
219219
220Open a pane with `focus: true` to request keyboard focus for it. Typed letters reach an `Input` once it has the focus. To choose which field has the focus when the pane opens, see [Set a hotkey and the first focus](/docs/en/plugins/mods/interface#set-a-hotkey-and-the-first-focus).
220Open a pane with `focus: true` to request keyboard focus for it. Typed letters reach an `Input` once it has the focus. To choose which field has the focus when the pane opens, see [Set a hotkey and the first focus](/docs/en/plugins/mods/interface.md#set-a-hotkey-and-the-first-focus).
221221
222222### `Button`
223223
from line 303
303303
304304### `Raster`
305305
306A `Raster` is a grid of colored character cells, for a heat map, a sparkline, or a game board. The terminal draws it. This sample uses the `cellsOf` function in the starter module, which packs the cells into the string a `Raster` takes. [Draw a grid of colored cells](/docs/en/plugins/mods/interface#draw-a-grid-of-colored-cells) explains it:
306A `Raster` is a grid of colored character cells, for a heat map, a sparkline, or a game board. The terminal draws it. This sample uses the `cellsOf` function in the starter module, which packs the cells into the string a `Raster` takes. [Draw a grid of colored cells](/docs/en/plugins/mods/interface.md#draw-a-grid-of-colored-cells) explains it:
307307
308308```javascript theme={null}
309309Raster({
from line 339
339339
340340### `Image` and `Client`
341341
342Two more elements have no sample here. `Image` draws a PNG or raw pixels in the terminal. `Client` is a region that a second file of yours draws, for animation and pointer input. The [elements reference](/docs/en/plugins/mods/reference#elements) lists their props.
342Two more elements have no sample here. `Image` draws a PNG or raw pixels in the terminal. `Client` is a region that a second file of yours draws, for animation and pointer input. The [elements reference](/docs/en/plugins/mods/reference.md#elements) lists their props.
343343
344344An `Image` draws as a picture in these terminals:
345345
from line 350
350350In any other terminal, the user sees the `Image`'s `alt` text, dimmed, in place of the picture. Write `alt` text that stands on its own, because it also shows in these cases, among others:
351351
352352* **tmux and screen**: a session running inside tmux or screen, in any terminal.
353* **Background sessions**: every [background session](/docs/en/agent-view), whatever terminal it's attached from.
354* **iTerm2 outside fullscreen rendering**: in iTerm2 the picture draws only under [fullscreen rendering](/docs/en/fullscreen), and not while [`CLAUDE_CODE_ALT_SCREEN_FULL_REPAINT`](/docs/en/env-vars) is set to `1`. To see the picture, run `/tui fullscreen` at the Claude Code prompt and leave that variable unset.
353* **Background sessions**: every [background session](/docs/en/agent-view.md), whatever terminal it's attached from.
354* **iTerm2 outside fullscreen rendering**: in iTerm2 the picture draws only under [fullscreen rendering](/docs/en/fullscreen.md), and not while [`CLAUDE_CODE_ALT_SCREEN_FULL_REPAINT`](/docs/en/env-vars) is set to `1`. To see the picture, run `/tui fullscreen` at the Claude Code prompt and leave that variable unset.
355355* **A file path source in iTerm2**: iTerm2 draws an `Image` whose `source` prop holds `png` or `rgba` bytes, and shows the `alt` text for one whose `source` names a `file`. If your mod has iTerm2 users, pass the picture as base64 in `source.png` or `source.rgba` rather than as a path in `source.file`.
356356
357357If your mod's users see the dimmed text in a terminal that draws kitty graphics protocol images with Unicode placeholders, they can set [`CLAUDE_CODE_FORCE_TERMINAL_IMAGES`](/docs/en/env-vars) to `1`. Inside tmux or screen that doesn't help: the `alt` text goes away, and Claude Code sends the picture without wrapping it for tmux or screen passthrough.
from line 360
360360
361361The samples all draw in a pane. A mod can also draw in other places, and call Claude Code to show something for it:
362362
363* **Pane and band**: [Pick where to draw](/docs/en/plugins/mods/interface#pick-where-to-draw)
364* **Claude Code's own rows, such as the spinner**: [Change what Claude Code already draws](/docs/en/plugins/mods/interface#change-what-claude-code-already-draws)
365* **Toast, status line, and log line**: [Show something without starting a turn](/docs/en/plugins/mods/api#show-something-without-starting-a-turn)
366* **Question dialog**: [Hold a tool call until the user decides](/docs/en/plugins/mods/events#hold-a-tool-call-until-the-user-decides)
363* **Pane and band**: [Pick where to draw](/docs/en/plugins/mods/interface.md#pick-where-to-draw)
364* **Claude Code's own rows, such as the spinner**: [Change what Claude Code already draws](/docs/en/plugins/mods/interface.md#change-what-claude-code-already-draws)
365* **Toast, status line, and log line**: [Show something without starting a turn](/docs/en/plugins/mods/api.md#show-something-without-starting-a-turn)
366* **Question dialog**: [Hold a tool call until the user decides](/docs/en/plugins/mods/events.md#hold-a-tool-call-until-the-user-decides)
367367
368368## Next steps
369369
370* [Draw in the interface](/docs/en/plugins/mods/interface): build a pane with tabs, step by step
371* [Test a drawing](/docs/en/plugins/mods/test#test-a-drawing): press your buttons from a test
372* [Elements reference](/docs/en/plugins/mods/reference#elements): each element's main props and the apps that draw it
370* [Draw in the interface](/docs/en/plugins/mods/interface.md): build a pane with tabs, step by step
371* [Test a drawing](/docs/en/plugins/mods/test.md#test-a-drawing): press your buttons from a test
372* [Elements reference](/docs/en/plugins/mods/reference.md#elements): each element's main props and the apps that draw it
373373
No line in this hunk matches that.