Intermediate9 min

Visual Output and Custom Renderers

Plugins can render interactive HTML directly in the Claude Code Desktop app's preview pane. This enables richer output formats — interactive diagrams, data tables, test reports, dashboards — that communicate more than prose alone when working with complex or visual information.

Quick Reference

→Visual output renders interactive HTML in the Desktop app preview pane
→Only available in Desktop app — not CLI mode or browser extension
→Claude generates structured data → plugin renders it as HTML → displayed in preview pane
→Use cases: Mermaid diagrams, D3 charts, interactive test reports, architecture visualizations
→The render hook: plugin defines how to convert Claude's output to HTML
→When to use: complex relationships, time-series, hierarchies, comparisons
→When to skip: simple text output where prose communicates clearly
→Output is ephemeral — not saved to disk unless the plugin explicitly writes it

What Visual Output Is

Desktop App Only

Visual output requires the Claude Code Desktop app. It renders in the preview pane alongside the chat. It is not available in the CLI (claude in a terminal), the VS Code extension, or the JetBrains extension.

Visual output allows plugins to intercept Claude's response and render it as interactive HTML. The workflow: Claude generates structured output (JSON, Mermaid syntax, a data table) → the plugin's render function converts it to HTML → the HTML renders in the Desktop preview pane.

The user sees both Claude's prose explanation (in the chat) and the visual representation (in the preview pane). The combination communicates more than either alone — especially for data that is inherently visual.

When Visual Output Beats Prose

Content type	Why visual beats prose
Architecture diagrams	Spatial relationships between components are impossible to convey accurately in text
Data comparisons	Side-by-side tables with highlighting show differences that prose obscures
Time-series data	Trends, spikes, and patterns are visible in a chart; invisible in numbers
Hierarchical structures	Trees and nested relationships are natural visually; tedious in prose
Dependency graphs	Cycles, depths, and fan-out patterns require visual representation
Test reports	Pass/fail matrices with coverage heat maps surface patterns in large test suites

How the Render Pipeline Works

Claude generates structured output

Claude produces output in a format the plugin knows how to render — JSON with a specific schema, Mermaid syntax, CSV data, or any other structured format.

Plugin intercepts via render hook

The plugin's render function receives Claude's output. It checks whether the output matches its expected format. If it does, it generates HTML.

HTML renders in preview pane

The generated HTML renders in the Desktop app's preview pane. It can include JavaScript for interactivity — hover states, click handlers, zoom controls.

Sign in to read this article

This is a premium article. Sign in with your Google account to continue.