Editors & Claude

Mock IDE windows and Claude Code sessions I drop into READMEs when a real screenshot would be wrong or distracting.

Background

I kept reaching for a generic "screenshot of a code editor" or "screenshot of an agentic CLI" when writing READMEs and design docs, and I never found one that wasn't either too branded or too ugly. So I drew my own. They live in zrosenbauer/art alongside the rest of the collection.

The Mocks

660×420, macOS chrome, light-on-dark. The "abstract" variants swap real text for tinted bars, which is what I use when the language or content shouldn't matter to the point I'm making.

code editor

Sidebar tree, tab bar, line-number gutter, and a 20-line TypeScript React Button open in the editor. Reach for it when the post is actually about TypeScript or React.

code editor (abstract)

Same chrome, source swapped for tinted bars. Language-agnostic, for posts about flow instead of syntax.

code editor (empty)

Sidebar tree, blank editor pane. A canvas for overlays or annotations on top.

code editor (abstract, empty)

Bars in the sidebar, nothing in the editor. The most generic IDE silhouette this site will ever ship.

claude code

Welcome banner, a user prompt, two tool calls (Read, Write), an assistant response, the input box, and the status line. A full Claude Code session rendered as art, for posts that name the tool by name.

claude code (abstract)

Same session, every line rendered as tinted bars. For when "agentic CLI" is the right level of abstraction and pinning it on Claude Code specifically would be misleading.